Keep "import css" line to the output file?

Rollup Config

export default {
  input: "src/index.js",
  output: {
    file: "dist/index.js",
    format: "cjs"
  },
  plugins: [
    postcss({
      extract: true
    })
  ]
};

src/index.js

import "./index.less";

Expected bundle

require("./index.css") 

• But the actual result is an empty bundle

[ShanonJackson]

The production use is this @Himself65

At the moment most library authors bundle an entire styles.css file which is all the styles needed for all their components; This is not ideal as it imports styles for components the consumer isn’t using into their project.

If the requires(“.css”) statements are left in the output library consumers will automatically import only the critical css that they need as they import the components they want.

To get around this i issue iv’e created a hack work around which works for me in the meantime.

[ShanonJackson]

We leave the actual .module.scss files in the output in our usecase but it looks something like this as our own rollup plugin and we turned off rollup-plugin-postcss

export function scss() {
	var styles = {};
	var filter = createFilter(["**/*.scss"]);
	return {
		transform(code, path) {
			if (!filter(path)) {
				return;
			} else {
				/* is scss */
                                // just replaces "@import "src/styles/variables" with the library name reference "@import "~qubic-lib/src/styles/variables"
				if (styles[path] !== code && (styles[path] || code)) {
					styles[path] = code.replace(/src/g, "~qubic-lib/src").replace(/-legacy/g, "");
				}
				return '';
			}
		},
		generateBundle() {
			/* Outputs css files doesn't touch js files */
			return Promise.all(Object.keys(styles).map((key) => {
			  /* Output the files to their directory in dist */
        /* basically fileName.replace("src", "dist")
           writeFileSync Each File
         */
			}))
		},
	}
}