dp-taro-babel-plugin-transform-jsx-to-stylesheet v2.2.33

babel-plugin-transform-jsx-stylesheet

Transform StyleSheet selector to style in JSX Elements.

Installation

npm install --save-dev dp-taro-babel-plugin-transform-jsx-to-stylesheet

Usage

Via .babelrc

.babelrc

{
  "plugins": ["transform-jsx-to-stylesheet"]
}

Example

Your component.js that contains this code:

import { Component } from "Taro";
import "./app.css";
class App extends Component {
  render() {
    return <div className="header" />;
  }
}

Will be transpiled into something like this:

import { Component } from "Taro";
import appStyleSheet from "./app_styles";

class App extends Component {
  render() {
    return <div style={styleSheet.header} />;
  }
}

const styleSheet = appStyleSheet;

Can write multiple classNames like this:

import { Component } from "Taro";
import "./app.css";

class App extends Component {
  render() {
    return <div className="header1 header2" />;
  }
}

Will be transpiled into something like this:

import { Component } from "Taro";
import appStyleSheet from "./app_styles";

class App extends Component {
  render() {
    return <div style={[styleSheet.header1, styleSheet.header2]} />;
  }
}

const styleSheet = appStyleSheet;

Also support array, object and expressions like this:

import { Component } from "Taro";
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 { Component } from "Taro";
import appStyleSheet from "./app_styles";

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 { Component } from "Taro";
import "app1.css";
import "app2.css";

class App extends Component {
  render() {
    return <div className="header1 header2" />;
  }
}

Will be transpiled into something like this:

import { Component } from "Taro";
import app1StyleSheet from "app1_styles";

class App extends Component {
  render() {
    return <div style={[styleSheet.header1, styleSheet.header2]} />;
  }
}

const styleSheet = app1StyleSheet;