Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 15 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 (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-04T01:18:15.000Z (almost 3 years ago)
- Last Synced: 2024-11-16T01:19:45.735Z (about 1 month 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;
`
```