Radix UI Theme not Applying in Chrome Extension

[sleda]

Environment:

OS: Windows Browser: Chrome Node.js version: v20.7.0 npm/yarn version: 10.5.0

Packages:

react: ^18.2.0 react-dom: ^18.2.0 @radix-ui/themes: ^3.0.2 webpack: ^5.75.0 webpack-dev-server: ^4.11.1

Issue Description: Despite following the official documentation and importing the @radix-ui/themes/styles.css file at the root of my React application, the theme styles are not being applied. The application still renders with default HTML styles.

import React from 'react';
import { createRoot } from 'react-dom/client';

import '@radix-ui/themes/styles.css';
import { Theme } from '@radix-ui/themes';

import Popup from './Popup';
import './index.css';

const container = document.getElementById('app-container');
const root = createRoot(container);

root.render(
  <Theme>
    <Popup />
  </Theme>
);

import React from 'react';
import '@radix-ui/themes/styles.css';

import { Flex, Text, Button } from '@radix-ui/themes';

const Popup= () => {
  return (
      <Flex direction="column" gap="2">
        <Button>Let's go</Button>
        <Text>Let's go</Text>
      </Flex>
  );
};

export default Popup;

[sleda]

After running into an issue where the @radix-ui/themes styles weren't being applied to my React application despite following the official documentation, I found a workaround that solved the problem. Here's exactly what I did:

1. Create Popup.css: First, a new CSS file named Popup.css was created in the same directory as Popup.jsx.

2. Import @radix-ui Theme Styles: Inside Popup.css, the @radix-ui/themes/styles.css was imported using the @ rule: @import '@radix-ui/themes/styles.css';

3. Import Popup.css in Popup.jsx: Lastly, the Popup.css file was imported into Popup.jsx to ensure the styles are applied: import './Popup.css';

By importing the CSS file into the JSX file, I made sure the styles were applied directly to my component, thus ensuring the @radix-ui theme styles were loaded and displayed as intended.

[vladmoroz]

This isn't an issue with Radix Themes, you likely need to configure Webpack to import CSS files from external packages

[sleda]

I had already configured webpack that way and even tried it in another library like chakra ui to check it, it was working, but as I said, I solved it by putting @ in the './Popup.css' like this @import '@radix-ui/themes/styles.css';

My configures:

  module: {
    rules: [
      {
        // look for .css or .scss files
        test: /\.(css|scss)$/,
        // in the `src` directory
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },

[tngflx]

hmm any solutions yet? im also having problem to import tree-shaked radix-ui/styles.css