babel-plugin-transform-import-css

Injects class map imported from css-modules into js.

Plugin respects webpack css-modules API and postcss config.

Requirements

babel == 7, node >= 8

babel and postcss configs for best results

Installation & configuration

npm add -SD babel-plugin-transform-import-css

.babelrc example:

{
  "sourceMaps": "inline",
  "presets": [
    "@babel/env",
    "react"
  ],
  "plugins": [
    ["transform-import-css", {
      "generateScopedName": "lib-[name]-[local]-[hash:base64:4]"
    }]
  ]
}

Every js file that has a statement such as:

import classes from './Component.css'
// ... some code

will be transpiled to:

var classes = {
    root: 'lib-foo-root-SFs0',
    // ... some classes ...
}
require('load-styles')('.root{color:red}; ...some css...') // puts styles into the head
// ... some code

Api

• generateScopedName optional css-modules scope template

Use Cases

Bundling the css with js/react components. It is good for portability.

Alternatives

• babel-plugin-react-css-modules
  • adds custom syntax
  • react specific
  • it isn't export { classes } friendly
• babel-plugin-import-css-to-jss
  • breaks css-modules api (import jssObject from './style.css')
• babel-plugin-css-modules-transform
  • genarates classes hash-map too
  • cannot bundle css-modules in js

---

Sponsored with ❤️ by RocketBank

Russian Fintech startup