Awesome

Babel plugin twin

<a href="https://www.npmjs.com/package/babel-plugin-twin"><img src="https://img.shields.io/npm/dt/babel-plugin-twin.svg" alt="Total Downloads"></a> <a href="https://www.npmjs.com/package/babel-plugin-twin"><img src="https://img.shields.io/npm/v/babel-plugin-twin.svg" alt="Latest Release"></a> <a href="https://discord.gg/Xj6x9z7"><img src="https://img.shields.io/discord/705884695400939552?label=discord&logo=discord" alt="Discord"></a>

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",
    // ...
  ],
};

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

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

Special thanks

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