babel-plugin-transform-jsx-stylesheet

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);