Babel plugin twin

This plugin automatically adds the tw prop from twin.macro - no import required:

- import "twin.macro"

const Component = () => <div tw="block" />

You’ll also get the css prop from your css-in-js library:

const Component = () => <div css={`background-color: blue;`} />

Installation

npm i -D babel-plugin-twin
# or
yarn add babel-plugin-twin -D

Then add the plugin to your babel config:

module.exports = {
  plugins: [
    "babel-plugin-twin",
    "babel-plugin-macros",
    // ...
  ],
};

Note: You must add "babel-plugin-twin" before "babel-plugin-macros" in the plugins array.

Options

Add debug to your config to see some feedback:

module.exports = {
  plugins: [
    ["babel-plugin-twin", { debug: true }],
    "babel-plugin-macros",
    // ...
  ],
};

Special thanks

A big shoutout goes to @euvs for the plugin concept + code and @mxsbr for planting the idea.