https://github.com/ben-rogerson/babel-plugin-twin
Activate twin.macro’s tw prop without adding the twin import. A companion plugin for twin.
https://github.com/ben-rogerson/babel-plugin-twin
Last synced: 7 months ago
JSON representation
Activate twin.macro’s tw prop without adding the twin import. A companion plugin for twin.
- Host: GitHub
- URL: https://github.com/ben-rogerson/babel-plugin-twin
- Owner: ben-rogerson
- Created: 2020-12-09T10:24:19.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-11-17T11:55:11.000Z (almost 3 years ago)
- Last Synced: 2024-05-02T00:52:24.056Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 40
- Watchers: 5
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Babel plugin twin
This plugin automatically adds the tw prop from [twin.macro](https://github.com/ben-rogerson/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 = () =>
```
## 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](https://github.com/euvs) for the plugin concept + code and [@mxsbr](https://github.com/mxstbr) for planting [the idea](https://github.com/ben-rogerson/twin.macro/issues/247).