a-x-/building-css-modules-library.md

## building-css-modules-library.md

      
    Raw
  

              building-css-modules-library.md
            
          
    🚫 Approach 1: converted plain css

pros:

much simple lib build

cons:

additional requirements to service build config (style-loader, css-loader for node_modules)
 bug: every library's css file got style tag in a project 😨
 bug: postcss-icss-selectors rule.parent is undefined — UPD fix
 bug: css-modules-transform generateScopedName does not work — UPD fix
 bug: generateScopedName does not apply to postcss optimized selectors — issue

todo:

babel-plugin-css-modules-transform preprocessCss + keepImport config
script for preprocessCss that should use postcss api

questions:

 can create-react-app work well with import '*.css' under node_modules? — NO

Approach 2: complete js bundles with css

pros:

easy to use

cons:

jss runtime
prefined build

todo:

create babel plugin that will:

replace import s from '*.css'; by:
const s = { selector: 'module-selector' };
create(jssEmptyPreset()).createStyleSheet(require('./filename.jss.js'))


check source-maps are still correct
create filename.jss.js using something like jss convert -f js -e es6 'build/**/*.css' (from jss-cli package) with css-modules post-processing
initial draft: https://github.com/a-x-/babel-plugin-import-css-to-jss-calls
similar implementaion babel-plugin-import-css-to-jss


install jss as peed-dep (because mui uses it too)

questions:

can webpack extract jss style-objects from calls to static files? (dig into ExtractTextPlugin underhood details)
postcss async mitigation, postcss.async()