babel-plugin-transform-import-css
v1.0.0-alpha.11
Published
Injects imported styles (css-modules) into js
Downloads
2,172
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 detectext
— 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
- [x] babel@7
- [x]
configPath
andext
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'
)
- breaks css-modules api (
- babel-plugin-css-modules-transform
- genarates classes hash-map too
- cannot bundle css-modules in js
Sponsored with ❤️ by RocketBank
Russian Fintech startup