Babel plugin twin

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

1- import "twin.macro"
2
3const Component = () => <div tw="block" />

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

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

Installation

1npm i -D babel-plugin-twin
2# or
3yarn add babel-plugin-twin -D

Then add the plugin to your babel config:

1module.exports = {
2  plugins: [
3    "babel-plugin-twin",
4    "babel-plugin-macros",
5    // ...
6  ],
7};

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:

1module.exports = {
2  plugins: [
3    ["babel-plugin-twin", { debug: true }],
4    "babel-plugin-macros",
5    // ...
6  ],
7};

To avoid checking files or folders, supply exclude with an array of regex patterns:

1module.exports = {
2  plugins: [
3    ["babel-plugin-twin", {
4      "exclude": [
5        "temp/",
6        "..."
7      ]
8    },
9    "babel-plugin-macros",
10    // ...
11  ],
12};

Special thanks

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