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 == 6, node >= 8

babel and postcss configs for best results

Installation & configuration

npm add -SD babel-plugin-transform-import-css
npm add load-styles # puts styles into the head

.babelrc example:

{
  "sourceMaps": "inline",
  "presets": [
    ["env", {
      "targets": { "browsers": ["last 2 Chrome versions", "last 1 Safari version"] },
      "useBuiltIns": false, "modules": false
    }],
    "stage-1", "react"
  ],
  "plugins": [
    ["transform-import-css", {
      "generateScopedName": "lib-[folder]-[name]-[local]-[hash:base64:4]"
    }]
  ]
}

Usage

The following command will convert everything in the src folder to lib using babel and our plugin.

babel src/ -d lib/ --presets stage-0,env,react --plugins transform-import-css

Every js file that has a statement such as:

import classes from './Component.css'

will be roughly translated to:

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

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