https://github.com/JiangWeixian/babel-plugin-styled-windicss

windicss + styled-components (beta)
https://github.com/JiangWeixian/babel-plugin-styled-windicss

babel plugin styled-components windicss

Last synced: 2 months ago
JSON representation

windicss + styled-components (beta)

• Host: GitHub
• URL: https://github.com/JiangWeixian/babel-plugin-styled-windicss
• Owner: JiangWeixian
• Created: 2021-08-08T09:49:15.000Z (over 3 years ago)
• Default Branch: windicss
• Last Pushed: 2022-11-20T09:57:34.000Z (about 2 years ago)
• Last Synced: 2024-09-14T20:58:00.396Z (4 months ago)
• Topics: babel, plugin, styled-components, windicss
• Language: JavaScript
• Homepage:
• Size: 1.09 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# `babel-plugin-styled-windicss`

> windicss + styled-components = 🥰

a fork version of [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components), but just compile windicss into css

## feature

1. support compile tailwindcss `@apply`

2. support compile windicss `group`

## install

Install the plugin first:

```

npm install --save-dev babel-plugin-styled-windicss

```

Then add it to your babel configuration:

```JSON

{

  "plugins": ["babel-plugin-styled-windicss"]

}

```

vite:

```javascript

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";

export default defineConfig({

  plugins: [

    react({

      babel:{

        plugins:["babel-plugin-styled-windicss"]

      }

    }),

  ],

});

```

## usage

> **💡 NOTE**  

see more example [here](./example/src/pages/index.tsx)

**compile tailwindcss `@apply`**

```tsx

// input

const Wrapped = styled(Inner)`

  color: red;

  @apply m-0 p-0 w-100vw h-100vh overflow-hidden;

`

// output

const Wrapped = styled(Inner)`

  color: red;

  margin: 0px;

  overflow: hidden;

  padding: 0px;

  width: 100vw;

`

```

**compile windicss `group`**

```tsx

// input

const Wrapped = styled(Inner)`

  @apply m-0 p-0 w-100vw h-100vh overflow-hidden hover:(bg-blue-500 text-xs);

`

const Wrapped = styled(Inner)`

  color: red;

  &:hover {

    -tw-bg-opacity: 1;

    background-color: rgba(59, 130, 246, var(--tw-bg-opacity));

    font-size: 0.75rem;

    line-height: 1rem;

  }

  & {

    height: 100vh;

    margin: 0px;

    overflow: hidden;

    padding: 0px;

    width: 100vw;

  }

`

```