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.
Note. For babel@6 use previous version of plugin: 0.x.x
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 — css-modules scope template. Default: [name]__[local]___[hash:base64:5]
configPath — postcss config path. Default: auto detect
ext — postcss files' extension. Typical use: ext: '.pcss'. Default: '.css'

Note. Plugin rely on some @babel/ peerDependencies, that are typically included in your project by @babel/core self.

Use Cases

Bundling the css with npm packed library of js/react components. It is good for portability.

TODO

babel@7
configPath and ext options
Compatibility with mini-css-extract-plugin and extract-text-webpack-plugin. babel-plugin-transform-import-css should skip require('load-styles')(css) inserting in that cases.
Support postcss configs in package.json
More flexible postcss config loader. (asynchronous postcss-load-config lib can't be used due to synchronous nature of the babel).

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