https://github.com/cssobj/babel-plugin-transform-cssobj
Babel plugin to transform css into cssobj (CSS in JS solution), map class names into cssobj localized names
https://github.com/cssobj/babel-plugin-transform-cssobj
Last synced: about 1 month ago
JSON representation
Babel plugin to transform css into cssobj (CSS in JS solution), map class names into cssobj localized names
- Host: GitHub
- URL: https://github.com/cssobj/babel-plugin-transform-cssobj
- Owner: cssobj
- License: mit
- Created: 2016-12-16T10:38:33.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-24T01:30:31.000Z (over 9 years ago)
- Last Synced: 2024-10-03T09:17:13.219Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 39.1 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-transform-cssobj
Babel plugin to transform css into [cssobj][] (CSS in JS solution), map class names into cssobj localized names
[](https://gitter.im/css-in-js/cssobj)
[](https://travis-ci.org/cssobj/babel-plugin-transform-cssobj)
[](https://coveralls.io/github/cssobj/babel-plugin-transform-cssobj?branch=master)
[](https://www.npmjs.com/package/cssobj)
## Usage
1. Install
``` bash
npm install --save-dev babel-plugin-transform-cssobj
```
2. In your `.babelrc`:
``` json
{
"plugins": ["transform-cssobj"]
}
```
3. **Write CSS as normal, Wrap JSX in result.mapClass()**
``` javascript
const result = CSSOBJ`
---
# YAML as config
plugins:
- default-unit: px
- flexbox
---
// support inline comment in style
body { color: red; font-size:12; }
.container {
display: flex;
height: ${ getWindowHeight() };
// nest selector
.item {
flex: 1; width: 100; height: ${ v=> v.prev ? v.prev + 1 : 200 };
a {
color: red;
&:hover { color: blue; }
}
}
}
`
const html = result.mapClass(
)
```
Which transform into below code:
``` javascript
import cssobj from 'cssobj';
import cssobj_plugin_default_unit from 'cssobj-plugin-default-unit';
import cssobj_plugin_flexbox from 'cssobj-plugin-flexbox';
const result = cssobj({
body: {
color: 'red',
fontSize: 12
},
'.container': {
display: 'flex',
height: getWindowHeight(),
'.item': {
flex: 1,
width: 100,
height: v => v.prev ? v.prev + 1 : 200,
a: {
color: 'red',
'&:hover': {
color: 'blue'
}
}
}
}
}, {
plugins: [cssobj_plugin_default_unit('px'), cssobj_plugin_flexbox()]
});
const html =
;
```
**Note**: According to [cssobj][] `mapClass` rule, the `!news` will become `news` and not localized (aka keep AS IS).
## More Usage
This plugin transform the below formats:
- **result.mapClass(JSX)**
- **result.mapName(JSX)** (alias of result.mapClass)
- **mapName(JSX)** (function reference of result.mapClass)
If your existing code already has the form, .e.g:
```Javascript
// existing code, you don't want below to transform
myObj.mapClass(
should not be transformed)
```
You have two way to escape the transform
1. Change the original method call as `myObj['mapClass']`, that way this plugin don't touch it
2. Pass **plugin option** `mapName` to use other name rather than `mapClass`
``` json
{
"plugins": [ ["transform-cssobj", {"mapName": "makeLocal"}] ]
}
```
Then you can use `makeLocal` instead of `mapClass`, as a alias property of [cssobj][] result
**Notice**: `makeLocal` **must not exists** in result object to avoid conflict
```javascript
// below will be transformed, using alias property
style.makeLocal(
)
//
// your existing code keep untouched
myObj.mapClass(
)
```
## More about mapName
If you discard the [cssobj][] result part, then the `mapName` is not alias, it's a real function
**Notice**: `makeLocal` **must exists** in your scope, it will be kept as real function
```javascript
// makeLocal is not alias, it's have to be assigned
const makeLocal = style.mapClass
// will inject to className, shorter code
makeLocal(
)
//
```
See, all the className have a shorter code, that reduced the bundle size and have better pref
## Option for import names
Normally the default import name of `import cssobj from 'cssobj'` declear should be ok, but if the `cssobj` have conflicts, pass below option in `.babelrc`
```json
{
"plugins": [ ["transform-cssobj",
{
"mapName": "makeLocal",
"tag": "MYTAG",
"format": "less",
"names": {"cssobj": {"name": "_cssobj", "path": "./cssobj"}}
} ] ]
}
```
## TODO
- [ ] Support JSX Spread
- [x] Child element should regard to parent [cssobj][] scope
[cssobj]: https://github.com/cssobj/cssobj