babel-plugin-transform-prejss
v0.5.1
Published
Get the power of PostCSS and Babel with plugins in your JSS styles. Just put CSS into JS and get it as JSS object.
Downloads
21
Maintainers
Readme
babel-plugin-transform-prejss
Babel plugin which turns PreJSS constructions into JSS objects.
Example
In
const button = ({selector}) => preJSS`
button {
color: ${props => props.disabled ? 'grey' : 'red'};
width: 200px;
height: 70px;
&:hover {
text-decoration: underline;
}
}
`
Out
var button = function button(_ref) {
var selector = _ref.selector;
return {
'button': {
'color': function color(props) {
return props.disabled ? 'grey' : 'red';
},
'width': '200px',
'height': '70px',
'&:hover': {
'textDecoration': 'underline'
}
}
};
};
See more details here: https://github.com/axept/prejss
Installation
npm install babel-plugin-transform-prejss --save-dev
Usage
Options
removeImport: <Boolean|String>
- by default isprejss
. You can configure it tofalse
if you wouldn't like to remove imports for "prejss" automatically. But think twice! By disabling this option you may include server code and a lot of unnecessary dependencies into your bundle.silent: <Boolean>
- by default isfalse
. This option is configuring if the plugin should or not to log about each removed prejss import.namespace: <String>
- by default ispreJSS
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["transform-prejss"]
}
Via CLI
babel --plugins transform-prejss script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["transform-prejss"]
});