awesome icon indicating copy to clipboard operation
awesome copied to clipboard

Add keep-css-imports plugin

Open SLTKA opened this issue 1 year ago • 0 comments

Awesome Contribution Checklist:

  • [x] I have read, and re-read the Contributing Guidelines
  • [x] I have searched to ensure the suggested item doesn't exist on this list
  • [x] This PR contains only one item (and follows the guide to remove trailing spaces on sucrase description, I can remove line break instead)

Please Provide a Link A Repository for Your Addition

https://github.com/SLTKA/rollup-plugin-keep-css-imports

Please Describe Your Addition

keep-css-imports allows to maintain the original structure of style imports (CSS, SCSS, or SASS) without altering them during the bundling process. It will be helpful for building a components library and want to keep all CSS module imports untouched so consumer decide how to bundle or tree shake them.

If it meets SASS or SCSS import it will compile it and output as a single imported CSS file in dist. Plugin can be configured to maintain component folder structure or produce flattened output.

Rollup and Webpack based consumers can easily ignore the produced CSS file if component imported them was not used.

This is an alternative to CSS-in-JS plugins and allow consumers to produce separate Server Side Rendered HTML and CSS which loads much faster than dynamic (forces to wait for JS to run to inject CSS) or inline (doesn't allow separate CSS files caching in browsers) CSS-in-JS

SLTKA avatar Apr 17 '24 11:04 SLTKA