babel-plugin-restyle-css
Babel plugin to convert reStyle css strings into JS objects durning build.
Code originally taken from babel-plugin-css-to-js.
It was then modified to meet the needs of this library.
-
css
prop was changed toreStyle
- All dependencies were updated to the latest versions
Install
NPM
npm install babel-plugin-restyle-css --save-dev
Yarn
yarn add babel-plugin-restyle-css --dev
Setup
Add it to your babel config ( .babelrc
|| babel.config.js
)
{
"plugins": [["restyle-css"]]
}
Post CSS Plugins It uses postCSS under the hood to do the CSS conversion. Which means any you can pass any postCSS plugins you want by adding them to the babel config
{
"plugins": [["restyle-css", {
// Add PostCss Plugins ( optional )
"plugins": ["autoprefixer"]
}]]
}
method
By default the reStyle
method will be used in transposed code. To modify the name of the method, use the method property in the babel config.
{
"plugins": [["restyle-css", {
"method": 'customMethod'
}]]
}
Setting the method
property to false
will omit the method call entirely. Use this to get just the converted style object. See example below for more info
Examples
Example 1
Basic setup with the reStyle
method
Babel config
{
"plugins": [["restyle-css"]]
}
In App
- Import the
reStyle
method at the top of your file, then use it when building your styles
import { reStyle } from '@keg-hub/retheme/reStyle'
const rule = props => reStyle`
font-size: ${props.fontSize}px;
margin-top: ${props.margin ? '15px' : 0};
color: red;
line-height: 1.4;
:hover {
color: blue;
fontSize: ${props.fontSize + 2}px;
}
@media (min-height: 300px) {
background-color: gray;
:hover {
color: black;
}
}
`
Build Output
const rule = props => reStyle({
fontSize: props.fontSize + 'px',
marginTop: props.margin ? '15px' : 0,
color: 'red',
lineHeight: 1.4,
':hover': {
color: 'blue',
fontSize: props.fontSize + 2 + 'px'
},
'@media (min-height: 300px)': {
backgroundColor: 'gray',
':hover': {
color: 'black'
}
}
})
Example 2
With a custom method, which will overwrite the reStyle
method in the build output
Babel config
{
"plugins": [["restyle-css", {
"method": 'customMethod'
}]]
}
In App
- Import your
customMethod
method at the top of your file. You can usereStyle
orcustomMethod
when building your styles
import { customMethod } from './path/to/custom/method'
// reStyle will be replaced by customMethod
const rule = props => reStyle`
font-size: ${props.fontSize}px;
`
// Or use customMethod here directly
const rule = props => customMethod`
font-size: ${props.fontSize}px;
`
Build Output
const rule = props => customMethod({
fontSize: props.fontSize + 'px'
})
Example 3
With the method
property set to false
in the babel config.
Works the same as the babel-plugin-css-to-js plugin
Babel config
{
"plugins": [["restyle-css", {
"method": false
}]]
}
In App
- Still use
reStyle
when building your styles
// reStyle will be removed by the plugin
const rule = props => reStyle`
font-size: ${props.fontSize}px;
`
Build Output
// The converted styles object will be returned, without a method call
const rule = props => ({
fontSize: props.fontSize + 'px'
})
Notes
You may have a need to convert styles inline of a reStyle
definition. A helper tag has been added to allow this functionality. Similar to settng the method
property to false. It will return the converted styles as an object.
In App
const rule = props => reStyle`
.inline-w-helper {
composes: ${props.foo ? reInline`border: 1px` : undefined};
}
`
Build Output
const rule = props => reStyle({
'.inline-w-helper': {
composes: props.foo ? { border: "1px" } : undefined,
}
})