babel-plugin-import-css-to-radium
inline CSS, SASS, and LESS files into Radium style objects,
Note: This Babel plugin works works with Babel 6**.
Installation
$ npm install babel-plugin-import-css-to-radium
Usage
This is a plugin that compiles css written in a modular way into Radium css style objects, so you can use them inline in a Component
styles.css
.header {
background-color: green;
font-size: 14px;
margin-bottom: 5px;
}
MyComponent.js
import removeCssDots from 'remove-css-dots';
import css from './styles.css';
const styles = removeCssDots(css);
@Radium
class MyComponent extends React.Component {
render() {
return (
<div>
<h3 style={css['.header']}>Cool Header</h3>
<h3 style={styles.header}>Cooler Header</h3>
</div>
)
}
}
css object compiles to:
console.log(css)
/*
'.header': {
'fontSize': 14,
'marginBottom': 12,
'backgroundColor': 'green'
}
*/
// make style object cleaner with remove-css-dots
console.log(styles);
/*
header: {
'fontSize': 14,
'marginBottom': 12,
'backgroundColor': 'green'
}
*/
Use Case
in a project that styling is done with css, sass, or less can be compiled into a inline javascript object so you have the benefits of having modular styles and easier portability, not all css works inline so we use a Radium decorator to serve like a polyfill for css features
Webpack config
config your styles to be loaded with radium-loader
.babelrc
(Recommended)
Via .babelrc
{
"plugins": [
["babel-plugin-import-css-to-radium"],
["babel-plugin-transform-decorators-legacy"],
]
}