Building css-modules library

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()

including styles to head w/o jss alternative

https://github.com/Automattic/css-to-js/blob/master/client.js
https://github.com/webmodules/load-styles

DONE

https://www.npmjs.com/package/babel-plugin-transform-import-css