0.2.9 • Published 8 years ago
babel-plugin-transform-jsx-stylesheet-es5 v0.2.9
babel-plugin-transform-jsx-stylesheet
Transform StyleSheet selector to style in JSX Elements.
Installation
npm install --save-dev babel-plugin-transform-jsx-stylesheet
Usage
Via .babelrc
.babelrc
{
"plugins": ["transform-jsx-stylesheet"]
}
Example
Your component.js
that contains this code:
import { createElement, Component } from 'rax';
import './app.css';
class App extends Component {
render() {
return <div className="header" />
}
}
Will be transpiled into something like this:
import { createElement, Component } from 'rax';
import appStyleSheet from './app.css';
class App extends Component {
render() {
return <div style={styleSheet.header} />;
}
}
const styleSheet = appStyleSheet;
Can write multiple classNames like this:
import { createElement, Component } from 'rax';
import './app.css';
class App extends Component {
render() {
return <div className="header1 header2" />;
}
}
Will be transpiled into something like this:
import { createElement, Component } from 'rax';
import appStyleSheet from './app.css';
class App extends Component {
render() {
return <div style={[styleSheet.header1, styleSheet.header2]} />;
}
}
const styleSheet = appStyleSheet;
And can also import multiple css file:
import { createElement, Component } from 'rax';
import 'app1.css';
import 'app2.css';
class App extends Component {
render() {
return <div className="header1 header2" />;
}
}
Will be transpiled into something like this:
import { createElement, Component } from 'rax';
import app1StyleSheet from 'app1.css';
import app2StyleSheet from 'app2.css';
class App extends Component {
render() {
return <div style={[styleSheet.header1, styleSheet.header2]} />;
}
}
const styleSheet = Object.assign({}, app1StyleSheet, app2StyleSheet);
0.2.9
8 years ago