search

plumelo / rollup-plugin-styler

🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
https://anidetrix.github.io/rollup-plugin-styles
MIT License
6 stars 0 forks source link

The default "inject" mode seems to not work as expected #8

Open jelovac opened 2 weeks ago

jelovac commented 2 weeks ago

Description

I am attempting to configure a Rollup plugin to inject imported CSS from JSX/TSX files into the final bundle, but it's not working as expected. I'm unsure if this is due to a bug, a configuration issue, or a misunderstanding of the plugin's functionality.

In short, I'm building an Electron app and using Rollup to bundle its various components: the main, preload, and renderer processes.

Each component has its own Rollup configuration, generating a bundle that is output to the respective dist/{component} directory.

For the renderer component, which runs inside the Electron Browser, I am using React. I import CSS into my renderer/index.tsx file like this:

import * as React from "react";
import "./index.css";

Below is my Rollup configuration for the renderer process:

/**
 * @type {import("rollup").RollupOptions}
 */
const electronRendererProcessOptions = {
  input: "src/renderer/index.tsx",
  output: {
    file: "dist/renderer/index.js",
    format: "cjs",
    generatedCode: "es2015",
    sourcemap: true,
    assetFileNames: "[name]-[hash][extname]",
  },
  watch: {
    include: [
      'src/renderer/**'
    ],
  },
  plugins: [
    replace({
      values: {
        'process.env.NODE_ENV': () => {
          const currentEnvironment = getCurrentEnvironment();
          return JSON.stringify(currentEnvironment === 'production' ? currentEnvironment : 'development');
        },
      },
      preventAssignment: false
    }),
    styles({
      mode: "inject",
    }),
    nodeResolve({
      preferBuiltins: false,
      extensions: ['.mjs', '.js', '.json', '.node', '.css'],
    }),
    copy({
      targets: [
        { src: 'src/renderer/index.html', dest: 'dist/renderer' }
      ],
    }),
    json(),
    commonjs({
      ignoreTryCatch: false,
    }),
    typescript({
      tsconfig: "tsconfig.lib.json",
      moduleResolution: "bundler",
    }),
  ],
  ...commonOptions,
};

Expected Outcome

I expect the CSS to be embedded within the JavaScript bundle, but that isn't happening. I have tried reordering the plugins but continue to encounter the same issue.

If I change the mode to "extract" the outputed css in dist/renderer/SomeGeneratedName.css contains the actual css which has been imported within the react component.

Additional details