Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/a-x-/babel-plugin-transform-import-css
Pack css-modules css into js (for library building purposes)
https://github.com/a-x-/babel-plugin-transform-import-css
babel babel-plugin babel7 css-modules frontend postcss rocketbank
Last synced: 3 days ago
JSON representation
Pack css-modules css into js (for library building purposes)
- Host: GitHub
- URL: https://github.com/a-x-/babel-plugin-transform-import-css
- Owner: a-x-
- Created: 2018-03-01T14:25:55.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T17:43:31.000Z (over 3 years ago)
- Last Synced: 2024-08-09T13:15:08.140Z (3 months ago)
- Topics: babel, babel-plugin, babel7, css-modules, frontend, postcss, rocketbank
- Language: JavaScript
- Homepage: https://npmjs.com/package/babel-plugin-transform-import-css
- Size: 154 KB
- Stars: 10
- Watchers: 2
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
[0.x.x]: https://github.com/a-x-/babel-plugin-transform-import-css/tree/backports
# Installation & configuration
```sh
npm add -SD babel-plugin-transform-import-css
```
**.babelrc** example:
```json5
{
"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:
```js
import classes from './Component.css'
// ... some code
```
will be transpiled to:
```js
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
- [x] babel@7
- [x] `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](https://github.com/gajus/babel-plugin-react-css-modules)
- adds custom syntax
- react specific
- it isn't `export { classes }` friendly
- [babel-plugin-import-css-to-jss](https://github.com/websecurify/babel-plugin-import-css-to-jss)
- breaks css-modules api (`import jssObject from './style.css'`)
- [babel-plugin-css-modules-transform](https://github.com/michalkvasnicak/babel-plugin-css-modules-transform)
- genarates classes hash-map too
- cannot bundle css-modules in js
----
# Sponsored with ❤️ by RocketBank 
Russian Fintech startup