Usage

Install this as your plugin's dependency:

npm i -D vite-plugin-windicss-elements-apply
# or
yarn add -D vite-plugin-windicss-elements-apply

Add windicss to your plugin

npm i -D vite-plugin-windicss windicss
# or
yarn add -D vite-plugin-windicss windicss

Setting your vite.config.js or vite.config.ts

//... import all 
import WindiCSS from 'vite-plugin-windicss'
import WindiCSSApply from 'vite-plugin-windicss-elements-apply'

export default {
  plugins: [
    //... all plugin
    WindiCSS(),
    WindiCSSApply(),
  ],
}

On your main.js or main.ts setting css

import 'virtual:windi.css'

Examples: vue SFC use @apply for elements

开发时(developing)
<template>
  <div class="@apply mt-10 lg:text-center">
    Hello
    <div class="@apply-custom-name bg-black text-white pl-2 pr-5 m-4">World</div>
    <div class="@apply-custom-name">World</div>
    <div class="@apply lg:text-center pl-2 pr-5">World</div>
  </div>
</template>

编译后(compilation)
<div class="css-1fc454o-0" data-v-469af010>
  Hello
  <div class="css-custom-name">World </div>
  <div class="css-custom-name">World </div>
  <div class="css-1fc454o-3" data-v-469af010>World </div>
</div>

Befor className

开发时(developing)
<template>
  <div class="@apply(bgcolor bg-black) mt-10 lg:text-center">
    Hello World
  </div>
</template>

编译后(compilation)
<div class="bgcolor bg-black css-c4541fo-0" data-v-469af010>
  Hello World
</div>

After className

开发时(developing)
<template>
  <div class="@apply(bgcolor) mt-10 lg:text-center; textcolor m-2">
    Hello World
  </div>
</template>

编译后(compilation)
<div class="bgcolor css-c4541fo-0 textcolor m-2" data-v-469af010>
  Hello World
</div>

License

MIT License © 2020 PGcao