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

styled-components with windicss in vite
https://github.com/JiangWeixian/vite-plugin-styled-windicss

styled-components vite windicss

Last synced: 13 days ago
JSON representation

styled-components with windicss in vite

• Host: GitHub
• URL: https://github.com/JiangWeixian/vite-plugin-styled-windicss
• Owner: JiangWeixian
• License: mit
• Created: 2021-08-18T14:48:58.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-04T01:18:15.000Z (almost 3 years ago)
• Last Synced: 2024-08-09T11:43:40.910Z (3 months ago)
• Topics: styled-components, vite, windicss
• Language: TypeScript
• Homepage:
• Size: 122 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-styled-windicss

*windicss + styled-components = 🥰*

[![npm](https://img.shields.io/npm/v/vite-plugin-styled-windicss)](https://github.com/JiangWeixian/vite-plugin-styled-windicss) [![GitHub](https://img.shields.io/npm/l/vite-plugin-styled-windicss)](https://github.com/JiangWeixian/vite-plugin-styled-windicss)

## install

```console

yarn add vite-plugin-styled-windicss -D

```

## features

- ✨ transform `@apply` for `styled-components`

## usage

> **require** `vite-plugin-windicss`

in `vite.config.ts`

```ts

export default defineConfig({

  plugins: [reactRefresh(), Windicss(), StyledWindicss()],

})

```

in `any.tsx`, will

```tsx

// input

const Wrapped = styled.div`

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

`

// output

const Wrapped = styled.div`

  color: red;

  margin: 0px;

  overflow: hidden;

  padding: 0px;

  width: 100vw;

`

```