<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-plug
npm install babel-plugin-twinThis plugin automatically adds the tw prop from twin.macro - no import required:
``diff
- import "twin.macro"
const Component = () =>
You’ll also get the css prop from your css-in-js library:
`diff
const Component = () => background-color: blue;} />
`Installation
`shell
npm i -D babel-plugin-twin
or
yarn add babel-plugin-twin -D
`Then add the plugin to your babel config:
`js
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:
`js
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:`js
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.