babel-plugin-react-native-stylename-to-style

    0.13.0 • Public • Published

    babel-plugin-react-native-stylename-to-style

    NPM version Build Status Build status Coverage Status PRs Welcome

    Transform JSX styleName property to style property in react-native. The styleName attribute and syntax are based on babel-plugin-react-css-modules.

    Usage

    Step 1: Install

    yarn add --dev babel-plugin-react-native-stylename-to-style

    or

    npm install --save-dev babel-plugin-react-native-stylename-to-style

    Step 2: Configure .babelrc

    You must give one or more file extensions inside an array in the plugin options.

    {
      "presets": [
        "react-native"
      ],
      "plugins": [
        ["react-native-stylename-to-style", {
          "extensions": ["css"]
        }]
      ]
    }
    

    Syntax

    Anonymous reference

    Anonymous reference can be used when there is only one stylesheet import.

    Single class

    import "./Button.css";
     
    <View styleName="wrapper">
      <Text>Foo</Text>
    </View>;

    ↓ ↓ ↓ ↓ ↓ ↓

    import Button from "./Button.css";
     
    <View style={Button.wrapper}>
      <Text>Foo</Text>
    </View>;

    Multiple classes

    import "./Button.css";
     
    <View styleName="wrapper red-background">
      <Text>Foo</Text>
    </View>;

    ↓ ↓ ↓ ↓ ↓ ↓

    import Button from "./Button.css";
     
    <View style={[Button.wrapper, Button["red-background"]]}>
      <Text>Foo</Text>
    </View>;

    Expression

    import "./Button.css";
    const name = "wrapper";
     
    <View styleName={name}>
      <Text>Foo</Text>
    </View>;

    ↓ ↓ ↓ ↓ ↓ ↓

    import Button from "./Button.css";
    const name = "wrapper";
     
    <View
      style={(name || "")
        .split(" ")
        .filter(Boolean)
        .map(function(name) {
          Button[name];
        })}
    >
      <Text>Foo</Text>
    </View>;

    Expression with ternary

    import "./Button.css";
     
    const condition = true;
    const name = "wrapper";
     
    <View styleName={condition ? name : "bar"}>
      <Text>Foo</Text>
    </View>;

    ↓ ↓ ↓ ↓ ↓ ↓

    import Button from "./Button.css";
     
    const condition = true;
    const name = "wrapper";
     
    <View
      style={((condition ? name : "bar") || "")
        .split(" ")
        .filter(Boolean)
        .map(function(name) {
          Button[name];
        })}
    >
      <Text>Foo</Text>
    </View>;

    with styleName and style:

    import "./Button.css";
     
    <View styleName="wrapper" style={{ height: 10 }}>
      <Text>Foo</Text>
    </View>;

    ↓ ↓ ↓ ↓ ↓ ↓

    import Button from "./Button.css";
     
    <View style={[Button.wrapper, { height: 10 }]}>
      <Text>Foo</Text>
    </View>;

    Named reference

    Named reference is used to refer to a specific stylesheet import.

    Single class

    import foo from "./Button.css";
     
    <View styleName="foo.wrapper">
      <Text>Foo</Text>
    </View>;

    ↓ ↓ ↓ ↓ ↓ ↓

    import foo from "./Button.css";
     
    <View style={foo.wrapper}>
      <Text>Foo</Text>
    </View>;

    Multiple classes

    import foo from "./Button.css";
    import bar from "./Grid.css";
     
    <View styleName="foo.wrapper bar.column">
      <Text>Foo</Text>
    </View>;

    ↓ ↓ ↓ ↓ ↓ ↓

    import foo from "./Button.css";
    import bar from "./Grid.css";
     
    <View style={[foo.wrapper, bar.column]}>
      <Text>Foo</Text>
    </View>;

    Install

    npm i babel-plugin-react-native-stylename-to-style

    DownloadsWeekly Downloads

    1,862

    Version

    0.13.0

    License

    MIT

    Unpacked Size

    14.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • kristerkari