Package Exports

babel-plugin-transform-import-css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-transform-import-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

babel-plugin-transform-import-css