https://github.com/leegeunhyeok/swc-plugin-nativewind

Swc plugin implementation of the NativeWind babel plugin
https://github.com/leegeunhyeok/swc-plugin-nativewind

nativewind swc tailwind

Last synced: about 2 months ago
JSON representation

Swc plugin implementation of the NativeWind babel plugin

• Host: GitHub
• URL: https://github.com/leegeunhyeok/swc-plugin-nativewind
• Owner: leegeunhyeok
• License: mit
• Created: 2023-11-21T07:49:51.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-17T04:32:59.000Z (about 1 year ago)
• Last Synced: 2023-12-17T11:53:05.151Z (about 1 year ago)
• Topics: nativewind, swc, tailwind
• Language: Rust
• Homepage: https://www.npmjs.com/package/swc-plugin-nativewind
• Size: 178 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# swc-plugin-nativewind

Swc plugin implementation of the [NativeWind v4.x](https://github.com/marklawlor/nativewind) babel plugin.

✨ `100%` coverage of [test cases](https://github.com/marklawlor/nativewind/blob/main/packages/react-native-css-interop/src/__tests__/babel-plugin.ts) in NativeWind. (checkout the test cases [here](https://github.com/leegeunhyeok/swc-plugin-nativewind/tree/master/transform/tests/fixture))

## Installation

Requirement: `>= @swc/[email protected]`

```bash

npm install swc-plugin-nativewind

# or yarn

yarn add swc-plugin-nativewind

```

## Usage

```ts

import { transform } from '@swc/core';

await transform(code, {

  jsc: {

    transform: {

      react: {

        runtime: 'automatic',

        importSource: 'react-native-css-interop',

      },

    },

    experimental: {

      plugins: [['swc-plugin-nativewind', {}]],

    },

    externalHelpers: false,

  },

});

```

## Preview

Before

```tsx

import React, { createElement } from 'react';

import { Container, Section } from '@app/components';

export function Demo(): JSX.Element {

  return (

    

      {React.createElement('h1', null)}

      {createElement('div', null)}

    

  );

};

```

After

```js

import { jsx as _jsx, jsxs as _jsxs } from "react-native-css-interop/jsx-runtime";

import { createElementAndCheckCssInterop as __c } from "react-native-css-interop";

import React, { createElement } from "react";

import { Container, Section } from "@app/components";

export function MyComponent() {

  return /*#__PURE__*/ _jsxs(Container, {

    children: [

      /*#__PURE__*/ _jsx(Section, {

        children: __c("h1", null)

      }),

      /*#__PURE__*/ _jsx(Section, {

        children: __c("div", null)

      })

    ]

  });

}

```

## License

[MIT](./LICENSE)