vite-plugin-windicss

Bug Fixes

• ensure that the post request is successful (#97) (e9ea70e)

Features

• devtools: class name auto completion (f27859b)

"Design in DevTools"

⚗️ Experimental

It might be a common practice when you use the purge-based Tailwind where you have all the classes in your browser and you can try how things work by directly changing the classes in DevTools. While you might think this is some kind of limitation of "on-demand" where the DevTools don't know those you haven't used in your source code yet.

But unfortunately, we are here to BREAK the limitation 😎 See the video demo.

Just add the following line to your main entry

import 'virtual:windi-devtools'

It will be enabled automatically for you, have fun!

Oh and don't worry about the final bundle, in production build virtual:windi-devtools will be an empty module and you don't have to do anything about it :)

⚠️ Please use it with caution, under the hood we use MutationObserver to detect the class changes. Which means not only your manual changes but also the changes made by your scripts will be detected and included in the stylesheet. This could cause some misalignment between dev and the production build when using dynamically constructed classes (false-positive). We recommended adding your dynamic parts to the safelist or setup UI regression tests for your production build if possible.

💡 Idea by @ElMassimo.

Features

• "Design in DevTools", idea by @ElMassimo (#93) (f06d13e)
  • See the guide here

Bug Fixes

• transform for screen variant groups, close #92 (1a456e2)

Bug Fixes

• eslint error (adc8ac1)

Bug Fixes

• hmr for groups, close #80 (f1e2c80)

Bug Fixes

• pug: invalid pug breaking builds (#74) (a659d92)

Features

• support virtual: prefix (c01820e)

Features

• advocate the @virual/ prefix (4877d3d)

Bug Fixes

• clear cache after generating (d21729f)

Features

• support attribute selector in preflight safelist, close #68 (26df7da)

Features

• Allow users to provide a custom root to resolve files against (#66) (8b73962)

Bug Fixes

• resolve windows path, close #57 (#65) (6324d29)
• transform typo (#60) (b23d998)

Bug Fixes

• types (271e5ec)

Features

• automatically detect Pug support (817c28c)

Features

• support pug transformer, close #23 (33d0222)

Enable it by:

// vite.config.js
import WindiCSS, { PugTransformer } from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS({
      scan: {
        transformers: [
          PugTransformer(), // <--
        ],
      },
    }),
  ],
}