vite-plugin-styled-windicss

windicss + styled-components = 🥰

install

yarn add vite-plugin-styled-windicss -D

features

• ✨ transform @apply for styled-components

usage

require vite-plugin-windicss

in vite.config.ts

export default defineConfig({
  plugins: [reactRefresh(), Windicss(), StyledWindicss()],
})

in any.tsx, will

// 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;
`