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;

Also support array, object and expressions like this: （since 0.6.0）

import { createElement, Component } from 'rax';
import './app.css';

class App extends Component {
  render() {
    return (
      <div className={'header'}>
        <div className={{ active: this.props.isActive }} />
        <div className={['header1 header2', 'header3', { active: this.props.isActive }]} />
        <div className={this.props.visible ? 'show' : 'hide'} />
        <div className={getClassName()} />
      </div>
    );
  }
}

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}>
        <div style={_getStyle({ active: this.props.isActive })} />
        <div style={_getStyle(['header1 header2', 'header3', { active: this.props.isActive }])} />
        <div style={_getStyle(this.props.visible ? 'show' : 'hide')} />
        <div style={_getStyle(getClassName())} />
      </div>
    );
  }
}

const styleSheet = appStyleSheet;
function _getClassName() { /* codes */ }
function _getStyle(className) {
  return styleSheet[_getClassName(className)]; // not real code
}

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

Current Tags

1.0.6-beta.3 ... beta (3 years ago)
1.0.6 ... latest (3 years ago)

96 Versions

1.0.6-beta.3 ... 3 years ago
1.0.6-beta.2 ... 3 years ago
1.0.6 ... 3 years ago
1.0.6-beta.1 ... 3 years ago
1.0.5-beta.7 ... 3 years ago
1.0.5-beta.6 ... 3 years ago
1.0.5-beta.5 ... 3 years ago
1.0.5-beta.4 ... 3 years ago
1.0.5-beta.3 ... 3 years ago
1.0.5-beta.2 ... 3 years ago
1.0.5 ... 3 years ago
1.0.5-beta.1 ... 3 years ago
1.0.4-beta.8 ... 3 years ago
1.0.4-beta.7 ... 3 years ago
1.0.4-beta.6 ... 3 years ago
1.0.4-beta.5 ... 3 years ago
1.0.4-beta.4 ... 3 years ago
1.0.4-beta.3 ... 3 years ago
1.0.4-beta.2 ... 3 years ago
1.0.4 ... 3 years ago
1.0.4-beta.1 ... 3 years ago
1.0.3 ... 3 years ago
1.0.3-beta.2 ... 3 years ago
1.0.3-beta.1 ... 3 years ago
1.0.2 ... 4 years ago
1.0.2-1 ... 4 years ago
1.0.2-0 ... 4 years ago
1.0.1 ... 4 years ago
1.0.0 ... 4 years ago
0.6.11 ... 5 years ago
0.6.10 ... 5 years ago
0.6.9 ... 5 years ago
0.6.8 ... 5 years ago
0.6.8-0 ... 5 years ago
0.6.7 ... 5 years ago
0.6.6 ... 5 years ago
0.6.5 ... 6 years ago
0.6.4 ... 7 years ago
0.6.3 ... 7 years ago
0.6.2 ... 7 years ago
0.6.1 ... 7 years ago
0.6.0 ... 7 years ago
0.5.4 ... 7 years ago
0.5.2 ... 7 years ago
0.5.1 ... 7 years ago
0.5.0 ... 7 years ago
0.4.20 ... 7 years ago
0.4.19 ... 7 years ago
0.4.18 ... 7 years ago
0.4.17 ... 7 years ago
0.4.16 ... 7 years ago
0.4.15 ... 7 years ago
0.5.0-beta ... 7 years ago
0.4.14 ... 7 years ago
0.4.13 ... 7 years ago
0.4.12 ... 7 years ago
0.4.11 ... 7 years ago
0.4.10 ... 7 years ago
0.4.9 ... 7 years ago
0.4.8 ... 7 years ago
0.4.7 ... 7 years ago
0.4.6 ... 7 years ago
0.4.5 ... 7 years ago
0.4.4 ... 7 years ago
0.4.3 ... 7 years ago
0.4.2 ... 7 years ago
0.4.1 ... 7 years ago
0.4.0 ... 7 years ago
0.3.8 ... 8 years ago
0.3.7 ... 8 years ago
0.3.6 ... 8 years ago
0.3.5 ... 8 years ago
0.3.4 ... 8 years ago
0.3.3 ... 8 years ago
0.3.2 ... 8 years ago
0.3.1 ... 8 years ago
0.3.0 ... 8 years ago
0.2.11 ... 8 years ago
0.2.10 ... 8 years ago
0.2.9 ... 8 years ago
0.2.8 ... 8 years ago
0.2.7 ... 8 years ago
0.2.6 ... 8 years ago
0.2.5 ... 8 years ago
0.2.4 ... 8 years ago
0.2.3 ... 8 years ago
0.2.2 ... 8 years ago
0.2.1 ... 8 years ago
0.2.0 ... 8 years ago
0.1.12 ... 8 years ago
0.1.11 ... 8 years ago
0.1.10 ... 8 years ago
0.1.9 ... 8 years ago
0.1.8 ... 8 years ago
0.0.2 ... 8 years ago
0.0.1 ... 8 years ago

babel-plugin-transform-jsx-stylesheet

Installation

Usage

Via .babelrc

Example

Current Tags

96 Versions

Via `.babelrc`