babel-plugin-twin

KO | EN

gitlite — search

#javascript #ai #go #golang #android #machine-learning #rust #nodejs #windows #awesome #kubernetes #awesome-list #vue #security

babel-plugin-twin

(★ 42)

Activate twin.macro’s tw prop without adding the twin import. A companion plugin for twin.

babel-plugin-twin 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 = () => <div tw="block" />
```

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

```diff
const Component = () => <div css={`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](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).

babel-plugin-twin

babel-plugin-twin 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

babel-plugin-twin

babel-plugin-twin 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README