babel-plugin-transform-cssobj
Babel plugin to transform css into cssobj (CSS in JS solution), map class names into cssobj localized names
Usage
- Install
npm install --save-dev babel-plugin-transform-cssobj
- In your
.babelrc
:
{
"plugins": ["transform-cssobj"]
}
-
Write CSS as normal, Wrap JSX in result.mapClass()
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(
<div class='container'>
<div class='item'>
<a class='!news item active'>link text</a></div></div>
)
Which transform into below code:
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 = <div class={result.mapClass('container')}>
<div class={result.mapClass('item')}>
<a class={result.mapClass('!news item active')}>link text</a></div></div>;
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:
If your existing code already has the form, .e.g:
myObj.mapClass(<div className='abc'>should not be transformed</div>)
You have two way to escape the transform
-
Change the original method call as myObj['mapClass']
, that way this plugin don't touch it
-
Pass plugin option mapName
to use other name rather than mapClass
{
"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
style.makeLocal( <div className='nav'></div> )
myObj.mapClass( <div className='abc'> )
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
const makeLocal = style.mapClass
makeLocal( <div className='nav'></div> )
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
{
"plugins": [ ["transform-cssobj",
{
"mapName": "makeLocal",
"tag": "MYTAG",
"format": "less",
"names": {"cssobj": {"name": "_cssobj", "path": "./cssobj"}}
} ] ]
}
TODO