/babel-plugin-transform-import-css

Pack css-modules css into js (for library building purposes)

Primary LanguageJavaScript

So Alpha. Current version is unstable 1.0.0-alpha with babel@7 and postcss@7 support! Use stable 0.x.x version for babel@6 and postcss@6

Injects class map imported from css-modules into js.

Plugin respects webpack css-modules API and postcss config.

Requirements

  • babel == 7, postcss == 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


Sponsored with ❤️ by RocketBank

Russian Fintech startup