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 imported styles (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

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 rouroughly translated to:

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

Api

generateScopedName optional css-modules scope template

Example:

.babelrc:

{
  "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]"
    }]
  ]
}

Use Cases

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