windicss / vite-plugin-windicss

🍃 Windi CSS for Vite ⚡️

⚠️ Windi CSS is Sunsetting ⚠️
We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the full blog post.

---

vite-plugin-windicss

Windi CSS for Vite, it's fast! ⚡️

Features

• ⚡️ It's FAST - 20~100x times faster than Tailwind on Vite
• 🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2)
• 📦 On-demand native elements style reseting (preflight)
• 🔥 Hot module replacement (HMR)
• 🍃 Load configurations from tailwind.config.js
• 🤝 Framework-agnostic - Vue, React, Svelte and vanilla!
• 📄 CSS @apply / @screen directives transforms (also works for Vue SFC's <style>)
• 🎳 Support Variant Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
• 😎 "Design in Devtools" - if you work this way in the traditional Tailwind, no reason we can't!

Documentation

Read the documentation for more details.

New Features in v3.0

Attributify Mode

Enabled it by

// windi.config.ts
export default {
  attributify: true,
}

And use them as you would like:

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Prefix

If you are concerned about naming confliction, you can add custom prefix to attributify mode by:

// windi.config.ts
export default {
  attributify: {
    prefix: 'w:',
  },
}

<button 
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Button
</button>

Alias Config

// windi.config.ts
export default {
  alias: {
    'hstack': 'flex items-center',
    'vstack': 'flex flex-col',
    'icon': 'w-6 h-6 fill-current',
    'app': 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
}

Sponsors

License

MIT License © 2021 Anthony Fu

vite-plugin-windicss's Issues

Less Error

Sorry, this reproduction example is rather complicated. I can't reproduce this problem on a simple example.

After upgrading to 0.4.11, the operation failed. It seems that the less of the entire project is invalid.

Step

1. clone https://github.com/anncwb/vue-vben-admin
2. Modify vite-plugin-windicss version to 0.4.11
3. yarn && yarn serve
   An error occurred after running. Revert back to 0.4.10 to work normally
   

Make rollup-plugin-windicss actually work with Rollup

Currently rollup-plugin-windicss is designed to work with Vite, it would be awesome that it actually work with Rollup, so that we can use it to bundle libraries that use Windicss.

oops confused vite-plugin-windicss with rollup-plugin-windicss

@screen in scoped styles not adding data attribute specificity (Vue)

Description

When using the @screen directive in <style scoped> blocks, the resultant rules do not include the required [data-v-*] attribute, so don't take precedence over the non-media query rules.

Reproduction

Minimal reproduction repo here.

Or to reproduce in an existing Vite+Vue+WindiCSS app only requires the code below:

<template>
  <div class="scoped">SCOPED</div>
  <div class="unscoped">UNSCOPED</div>
</template>

<style lang="postcss" scoped>
.scoped {
  @apply text-red-500;
}

@screen sm {
  .scoped {
    @apply text-blue-500;
  }
}
</style>

<style lang="postcss">
.unscoped {
  @apply text-red-500;
}

@screen sm {
  .unscoped {
    @apply text-blue-500;
  }
}
</style>

The resultant scoped rules will be:

Versions

vue ^3.0.5
vite ^2.0.1
vite-plugin-windicss ^0.4.9
@vitejs/plugin-vue ^1.1.4
@vue/compiler-sfc ^3.0.5

Vscode Plugin?

Currently https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss does not seem to support windicss. Is it not supported?

typography plugin not working

I was testing my webpack windi implementation with the latest versions and the prose code didn't seem to work with the typography plugin, I tested it with this package and same issue.

Within examples/vue/src/App.vue put the prose code

<article class="prose lg:prose-xl prose-red">
    <h1>Garlic with cheese: What the science tells us</h1>
    <p>
      For years parents have espoused the health benefits of eating garlic bread with cheese to their
      children, with the food earning such an iconic status in our culture that kids will often dress
      up as warm, cheesy loaf for Halloween.
    </p>
    <p>
      But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
      springing up around the country.
    </p>
  </article>

windi.config.ts add the plugin

plugins: [require('windicss/plugin/typography')],

appended on to the vite.config.ts - safelist

 WindiCSS({
      safelist: 'no-select prose lg:prose-xl prose-red',
    }),

Not all classes are being included, but gets included after saving file containing the missing class

I'm experiencing classes missing from windi.css output, but after saving the file containing these classes (or just adding them while dev server is running), they show up. If I restart dev they become missing again.

The app is a "Sidebar" with two "tabs" loading into <component :is="tab"></component>, so I'm thinking maybe it's related to this. The code for async loading in components looks like this:

 components: {
         Education: defineAsyncComponent(() => import('../pages/Education.vue')),
         ThemeAdmin: defineAsyncComponent(() => import('../pages/ThemeAdmin.vue')),
    },

Also, adding scan option seemed to do the trick for my coworker and partly for me, but it's still missing padding, margin and size classes.

        WindiCSS({
            scan: {
                fileExtensions: ['html', 'js', 'ts', 'vue']
            },
        }),

The css for windi.css for each working/not working scenario are

Working:

const id = "/@windicss/windi.css"
const css = "*, ::before, ::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n* {\n  --tw-ring-inset: var(--tw-empty, );\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n:root {\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n}\n:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n::moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n[type='search'] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\na {\n  color: inherit;\n  text-decoration: inherit;\n}\nbody {\n  margin: 0;\n  font-family: inherit;\n  line-height: inherit;\n}\nb {\n  font-weight: bolder;\n}\nbutton, select, input, optgroup {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\nbutton, select {\n  text-transform: none;\n}\nbutton, [type='button'], [type='reset'], [type='submit'] {\n  -webkit-appearance: button;\n}\nbutton {\n  background-color: transparent;\n  background-image: none;\n}\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\nhtml {\n  -webkit-text-size-adjust: 100%;\n  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n  line-height: 1.5;\n}\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\nh4, h3, p, h2, hr, h1 {\n  margin: 0;\n}\nh4, h3, h2, h1 {\n  font-size: inherit;\n  font-weight: inherit;\n}\nimg {\n  border-style: solid;\n  max-width: 100%;\n  height: auto;\n}\ninput::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::webkit-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput:-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\nimg, iframe {\n  display: block;\n  vertical-align: middle;\n}\nsmall {\n  font-size: 80%;\n}\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.bg-sidebar-main-dark {\n  --tw-bg-opacity: 1;\n  background-color: rgba(217, 217, 217, var(--tw-bg-opacity));\n}\n.bg-sidebar-main-darker {\n  --tw-bg-opacity: 1;\n  background-color: rgba(228, 228, 228, var(--tw-bg-opacity));\n}\n.bg-sidebar-highlight-darker {\n  --tw-bg-opacity: 1;\n  background-color: rgba(33, 125, 186, var(--tw-bg-opacity));\n}\n.bg-sidebar-highlight {\n  --tw-bg-opacity: 1;\n  background-color: rgba(51, 152, 219, var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n.bg-sidebar-main-lighter {\n  --tw-bg-opacity: 1;\n  background-color: rgba(204, 204, 204, var(--tw-bg-opacity));\n}\n.border {\n  border-width: 1px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-sidebar-highlight {\n  --tw-border-opacity: 1;\n  border-color: rgba(51, 152, 219, var(--tw-border-opacity));\n}\n.border-none {\n  border-style: none;\n}\n.rounded-none {\n  border-radius: 0px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-b-none {\n  border-bottom-right-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n.rounded-tl-none {\n  border-top-left-radius: 0px;\n}\n.rounded-tr-none {\n  border-top-right-radius: 0px;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.flex {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: -webkit-flex;\n  display: flex;\n}\n.flex-row {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -ms-flex-direction: row;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-sans {\n  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n}\n.h-full {\n  height: 100%;\n}\n.h-px {\n  height: 1px;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.list-none {\n  list-style-type: none;\n}\n.m-0 {\n  margin: 0px;\n}\n.m-3 {\n  margin: 0.75rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-0 {\n  margin-top: 0px;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mr-1 {\n  margin-right: 0.25rem;\n}\n.ml-9 {\n  margin-left: 2.25rem;\n}\n.object-cover {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-0 {\n  padding: 0px;\n}\n.p-4 {\n  padding: 1rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.px {\n  padding-left: 1px;\n  padding-right: 1px;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.top-0 {\n  top: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.-left-80 {\n  left: -20rem;\n}\n.left-full {\n  left: 100%;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.text-right {\n  text-align: right;\n}\n.text-sidebar-main-bright {\n  --tw-text-opacity: 1;\n  color: rgba(20, 20, 20, var(--tw-text-opacity));\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.text-sidebar-main-light {\n  --tw-text-opacity: 1;\n  color: rgba(114, 114, 114, var(--tw-text-opacity));\n}\n.tracking-normal {\n  letter-spacing: 0em;\n}\n.w-full {\n  width: 100%;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-7 {\n  width: 1.75rem;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-80 {\n  width: 20rem;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.z-50 {\n  z-index: 50;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.grid {\n  display: -ms-grid;\n  display: grid;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transition-colors {\n  -webkit-transition-property: background-color, border-color, color, fill, stroke;\n  -o-transition-property: background-color, border-color, color, fill, stroke;\n  transition-property: background-color, border-color, color, fill, stroke;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 150ms;\n  -o-transition-duration: 150ms;\n  transition-duration: 150ms;\n}\n.visible {\n  visibility: visible;\n}\n.table {\n  display: table;\n}\n.hidden {\n  display: none;\n}\n.display\\:block {\n  display: block;\n}\n.dark .dark\\:text-sidebar-dark-main-bright {\n  --tw-text-opacity: 1;\n  color: rgba(235, 235, 235, var(--tw-text-opacity));\n}\n.float-left {\n  float: left;\n}\n.float-right {\n  float: right;\n}\n.relative {\n  position: relative;\n}\n.hover\\:bg-sidebar-main-lighter:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(204, 204, 204, var(--tw-bg-opacity));\n}\n.dark .dark\\:bg-sidebar-dark-main-dark {\n  --tw-bg-opacity: 1;\n  background-color: rgba(38, 38, 38, var(--tw-bg-opacity));\n}\n.dark .dark\\:hover\\:bg-sidebar-dark-main-lighter:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(51, 51, 51, var(--tw-bg-opacity));\n}\n.inline-block {\n  display: inline-block;\n}\n.hover\\:text-sidebar-main-bright:hover {\n  --tw-text-opacity: 1;\n  color: rgba(20, 20, 20, var(--tw-text-opacity));\n}\n.dark .dark\\:hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.hover\\:text-sidebar-dark-main-dark:hover {\n  --tw-text-opacity: 1;\n  color: rgba(38, 38, 38, var(--tw-text-opacity));\n}\n.hover\\:bg-sidebar-main-darker:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(228, 228, 228, var(--tw-bg-opacity));\n}\n.dark .dark\\:hover\\:text-sidebar-dark-main-bright:hover {\n  --tw-text-opacity: 1;\n  color: rgba(235, 235, 235, var(--tw-text-opacity));\n}\n.dark .dark\\:hover\\:bg-sidebar-dark-main-darker:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(27, 27, 27, var(--tw-bg-opacity));\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.dark .dark\\:bg-sidebar-dark-main-darker {\n  --tw-bg-opacity: 1;\n  background-color: rgba(27, 27, 27, var(--tw-bg-opacity));\n}\n.dark .dark\\:text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.block {\n  display: block;\n}\n.clear-both {\n  clear: both;\n}\n.dark .dark\\:text-sidebar-dark-main-light {\n  --tw-text-opacity: 1;\n  color: rgba(141, 141, 141, var(--tw-text-opacity));\n}\n.resize {\n  resize: both;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.not-italic {\n  font-style: normal;\n}\n.normal-case {\n  text-transform: none;\n}\n.hover\\:bg-sidebar-highlight-lighter:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(95, 174, 227, var(--tw-bg-opacity));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.hover\\:bg-sidebar-main-dark:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(217, 217, 217, var(--tw-bg-opacity));\n}\n.hover\\:text-black:hover {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n.dark .dark\\:hover\\:bg-sidebar-dark-main-dark:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(38, 38, 38, var(--tw-bg-opacity));\n}\n.dark .dark\\:bg-sidebar-dark-main-lighter {\n  --tw-bg-opacity: 1;\n  background-color: rgba(51, 51, 51, var(--tw-bg-opacity));\n}\n.italic {\n  font-style: italic;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.lowercase {\n  text-transform: lowercase;\n}\n.capitalize {\n  text-transform: capitalize;\n}"
updateStyle(id, css)
import.meta.hot.accept()
export default css
import.meta.hot.prune(() => removeStyle(id))

Not working

const id = "/@windicss/windi.css"
const css = "*, ::before, ::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n* {\n  --tw-ring-inset: var(--tw-empty, );\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n:root {\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n}\n:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n::moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n[type='search'] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\na {\n  color: inherit;\n  text-decoration: inherit;\n}\nbody {\n  margin: 0;\n  font-family: inherit;\n  line-height: inherit;\n}\nb {\n  font-weight: bolder;\n}\nbutton, select, input, optgroup {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\nbutton, select {\n  text-transform: none;\n}\nbutton, [type='button'], [type='reset'], [type='submit'] {\n  -webkit-appearance: button;\n}\nbutton {\n  background-color: transparent;\n  background-image: none;\n}\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\nhtml {\n  -webkit-text-size-adjust: 100%;\n  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n  line-height: 1.5;\n}\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\nh4, h3, p, h2, hr, h1 {\n  margin: 0;\n}\nh4, h3, h2, h1 {\n  font-size: inherit;\n  font-weight: inherit;\n}\nimg {\n  border-style: solid;\n  max-width: 100%;\n  height: auto;\n}\ninput::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::webkit-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput:-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\nimg, iframe {\n  display: block;\n  vertical-align: middle;\n}\nsmall {\n  font-size: 80%;\n}\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.bg-sidebar-main-darker {\n  --tw-bg-opacity: 1;\n  background-color: rgba(228, 228, 228, var(--tw-bg-opacity));\n}\n.bg-sidebar-highlight-darker {\n  --tw-bg-opacity: 1;\n  background-color: rgba(33, 125, 186, var(--tw-bg-opacity));\n}\n.bg-sidebar-highlight {\n  --tw-bg-opacity: 1;\n  background-color: rgba(51, 152, 219, var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n.bg-sidebar-main-lighter {\n  --tw-bg-opacity: 1;\n  background-color: rgba(204, 204, 204, var(--tw-bg-opacity));\n}\n.border {\n  border-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-sidebar-highlight {\n  --tw-border-opacity: 1;\n  border-color: rgba(51, 152, 219, var(--tw-border-opacity));\n}\n.border-none {\n  border-style: none;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.rounded-none {\n  border-radius: 0px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-b-none {\n  border-bottom-right-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n.rounded-tl-none {\n  border-top-left-radius: 0px;\n}\n.rounded-tr-none {\n  border-top-right-radius: 0px;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.flex {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: -webkit-flex;\n  display: flex;\n}\n.flex-row {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -ms-flex-direction: row;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-sans {\n  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n}\n.h-full {\n  height: 100%;\n}\n.h-px {\n  height: 1px;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.list-none {\n  list-style-type: none;\n}\n.m-0 {\n  margin: 0px;\n}\n.m-3 {\n  margin: 0.75rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mt-0 {\n  margin-top: 0px;\n}\n.mr-1 {\n  margin-right: 0.25rem;\n}\n.ml-9 {\n  margin-left: 2.25rem;\n}\n.object-cover {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-0 {\n  padding: 0px;\n}\n.px {\n  padding-left: 1px;\n  padding-right: 1px;\n}\n.top-0 {\n  top: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.-left-80 {\n  left: -20rem;\n}\n.left-full {\n  left: 100%;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.text-right {\n  text-align: right;\n}\n.text-sidebar-main-bright {\n  --tw-text-opacity: 1;\n  color: rgba(20, 20, 20, var(--tw-text-opacity));\n}\n.text-center {\n  text-align: center;\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.tracking-normal {\n  letter-spacing: 0em;\n}\n.w-full {\n  width: 100%;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-80 {\n  width: 20rem;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.z-50 {\n  z-index: 50;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.grid {\n  display: -ms-grid;\n  display: grid;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transition-colors {\n  -webkit-transition-property: background-color, border-color, color, fill, stroke;\n  -o-transition-property: background-color, border-color, color, fill, stroke;\n  transition-property: background-color, border-color, color, fill, stroke;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 150ms;\n  -o-transition-duration: 150ms;\n  transition-duration: 150ms;\n}\n.visible {\n  visibility: visible;\n}\n.table {\n  display: table;\n}\n.hidden {\n  display: none;\n}\n.display\\:block {\n  display: block;\n}\n.dark .dark\\:text-sidebar-dark-main-bright {\n  --tw-text-opacity: 1;\n  color: rgba(235, 235, 235, var(--tw-text-opacity));\n}\n.float-left {\n  float: left;\n}\n.float-right {\n  float: right;\n}\n.relative {\n  position: relative;\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.dark .dark\\:bg-sidebar-dark-main-darker {\n  --tw-bg-opacity: 1;\n  background-color: rgba(27, 27, 27, var(--tw-bg-opacity));\n}\n.dark .dark\\:text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.block {\n  display: block;\n}\n.clear-both {\n  clear: both;\n}\n.resize {\n  resize: both;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.not-italic {\n  font-style: normal;\n}\n.normal-case {\n  text-transform: none;\n}\n.hover\\:bg-sidebar-highlight-lighter:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(95, 174, 227, var(--tw-bg-opacity));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.hover\\:bg-sidebar-main-dark:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(217, 217, 217, var(--tw-bg-opacity));\n}\n.hover\\:text-black:hover {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n.dark .dark\\:hover\\:bg-sidebar-dark-main-dark:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(38, 38, 38, var(--tw-bg-opacity));\n}\n.dark .dark\\:hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n.dark .dark\\:bg-sidebar-dark-main-lighter {\n  --tw-bg-opacity: 1;\n  background-color: rgba(51, 51, 51, var(--tw-bg-opacity));\n}\n.italic {\n  font-style: italic;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.lowercase {\n  text-transform: lowercase;\n}\n.capitalize {\n  text-transform: capitalize;\n}"
updateStyle(id, css)
import.meta.hot.accept()
export default css
import.meta.hot.prune(() => removeStyle(id))

Let me know if you have any ideas what can cause this behavior?

relative class missing

My app described in the https://github.com/windicss/windicss/issues/27 has missing relative class in runtime.

This is what I found while searching 'relative' on the browser console. It seems invalid.

hmr question

First of all, this project is great. But I still have some questions about hMR

step

• git clone https://github.com/anncwb/vite-plugin-windicss-bug
• yarn && yarn dev
• Open the project in vscode and find /src/main.ts. Press ctrl+s several times in a row

A log appeared. Is this triggered multiple times?

Secondly, open app.vue in the same way and press save continuously, the following situation will also occur. Even if the content is changed, (x...) is still incremented

I just opened a question about memory overflow. #30
As I didn’t reproduce it again, but something happened to my colleague

Its operation is only continuous hot update and then the memory overflows. So I wonder if the hot update can be optimized again?

It stands to reason that the content of the same file has not changed. Save should not trigger a hot update.

Finally, this project has another hot update issue

• Open A.vue in the editor and save the file. Hot update is triggered.

But this project did not use A.vue, why would it trigger hmr? Is this also a point that may cause memory overflow

@antfu Can you answer me？thank you！

The class written inside the component that defined in TS file using render function does not get picked

// HelloWorld.ts
import { defineComponent, h } from "vue";
export default defineComponent({
  props: {
    msg: String
  },
  setup(props) {
    return () => h(
      'div',
      { class: 'p-2 bg-gray-700 text-orange-300 text-2xl'},
      [props.msg]
    )
  }
})

https://github.com/yangss3/vite-windi-test.git

Some color classes don't work

I remember it was ok a few days ago, but today I create a new project , the following code doesn't work any more

vite.config.ts

//...
import WindiCSS from 'vite-plugin-windicss'
export default defineConfig({
   //...
   WindiCSS(),
})

main.ts

import 'windi.css'

App.vue

<h1 class="bg-teal-500 text-orange-500">hello</h1>

Pug Support

Trying to upgrade a pug project and found out that windicss does not support pug class attributes.
Bug or am I missing something?

Vite doesn't pick up on changes to tailwind.config.ts?

To reproduce:

Clone this repo: https://github.com/HerbCaudill/hello-vite

  yarn install  
  yarn dev 

Note that background color is violet.

Open tailwind.config.ts and change the primary color from violet to blue:

  primary: colors.blue,

Actual behavior

• In the terminal: Vite doesn't react to the change
• In the browser: the background color doesn't change

The only way to get the change to register is to restart the dev server (or touch vite.config.ts, which I guess triggers a complete rebuild.)

Desired behavior

The browser updates immediately, just as it would if I modified the className directly in App.tsx.

Notes

This PR referencing this issue in the Vite repo suggests that this problem was noted and fixed in Vite at some point.

Some classes not working after restart the server

Working as expected when added this class, but after the restarting dev server this class not working.
class="border-opacity-10"

same issue for this also :class="`md:pl-${paddingLeft}`"

I am working on Vitesse @antfu

Set typescript alias options got an error

When I add the typescript alias and baseUrl options to tsconfig.json, I failed to run my project.

The error details:

I can run project successfuly, when I tried to remove the alias and baseUrl options at tsconfig.json.

Thanks for dudes' helping!

Forms plugin not working

Hi, im using the version 0.6.6 but the forms are still not working for me

its working with your temp bug fix: "preflight enable all" but its making the dev server very slow

transformCSS: 'post'

Hello,
when using transformCSS: 'post',
the css has already been converted to Javascript

import { updateStyle, removeStyle } from "/dist/@vite/client"
...

and windicss cant parse it anymore.
maybe put the the enforce option only if transformCSS is 'pre' ?
as a workaround you can use
transformCSS: 'some-other-string 😜'
when using 'pre' (or true), postcss hasnt run and windicss cant parse when you use e.g. postcsss-nesting

or is the first push with enforce: 'pre' wrong?

vite-plugin-windicss/packages/vite-plugin-windicss/src/index.ts

Lines 111 to 131 in f0f9088

	if (options.transformCSS === true) {
	plugins.push({
	name: `${NAME}:css:pre`,
	enforce: 'pre',
	transform(code, id) {
	if (!id.match(/\.(?:postcss|scss|css)(?:$|\?)/i) || utils.isExcluded(id) || id === MODULE_ID_VIRTUAL)
	return
	debug.css('pre', id)
	return utils.transformCSS(code)
	},
	})
	plugins.push({
	name: `${NAME}:css:post`,
	transform(code, id) {
	if (!id.match(/\.(?:sass|stylus|less)(?:$|\?)/i) || utils.isExcluded(id) || id === MODULE_ID_VIRTUAL)
	return
	debug.css('post', id)
	return utils.transformCSS(code)
	},
	})
	}

Forms Plugin

Is the forms plugin working with vite-plugin-windicss?

I'm adding it to the tailwind.config

  plugins: [
    require('windicss/plugin/forms'),
    // ...
  ],

But the styles aren't coming through....

Performance issues

Sorry that this question cannot be reproduced. I mentioned a memory issue before #30.

At that time, you repaired it, and the frequency of appearance was reduced a lot. I received a lot of feedback that it was stuck when Vite was performing a hot update, and it would cause the hot update to be incorrect.

Mainly manifested in the following points:

1. When the hot update is triggered continuously, the page refresh time is obviously longer. When the hot update reaches a certain amount, refresh the interface. At this time, the interface may take a long time to refresh, which may cause memory overflow on some computers.
2. After the hot update, sometimes the interface may appear inconsistent as expected. Need to refresh again.

The reason why I can determine it is windiCss because this problem only started to appear after I joined windiCss. So I want to trouble you to take a look. Check whether the hot update of the entire plug-in may cause memory overflow.

Config changes not applied

I import a font from Google Fonts in my index.html:

<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap" rel="stylesheet" />

In my tailwind.config.js, I have the following:

module.exports = {
  darkMode: "class",
  theme: {
    fontFamily: {
      'cairo': ['Cairo']
    },
    extend: {
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

None of these config changes are applied, but all standard classes are available.

Am I missing a step?

hmr causes memory overflow

I'm sorry that I can't provide a recurring example for this problem, because this problem happened by accident

description:

After I modify the components, hmr is very slow and the browser cannot be refreshed. After a while, the browser freezes

This happened by accident. I used it yesterday 3 times in total, but I didn't find any error messages. I had to re-execute yarn dev to solve it.

I raised this question, mainly because you may know which aspect of the problem, I will continue to follow up this problem

Any examples with storybook?

I've tried adding import 'windi.css' to preview.js in the .storybook folder, but it won't even start up because it can't find windi.css

I've also tried adding a webpack.config.js using the Vanilla Webpack example from the documentation.

I am using Vite with antfu/vitesse as a starter template

nested @apply not working with svelte

App.svelte

<style>
    h1 {
        @apply text-svelte-500 p-2 bg-green-200;
    }

    @screen sm {
        h1 {
            @apply text-blue-500;
        }
    }
</style>

is turned into

@media (min-width: 640px) {
  @apply text-blue-500;
}
h1.svelte-10vxxvj {
  --tw-text-opacity: 1;
  color: rgba(255, 62, 0, var(--tw-text-opacity));
  padding: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
}

Repro here: https://github.com/dominikg/svite-windicss

notice @svitejs/vite-plugin-svelte uses emitCss: true and a virtual css module App.svelte.css

Does not work with scss in Vue SFC

Cannot get <style lang="scss" scoped> to work.

Cannot find any mention about CSS preprocessors in the Docs.

[Bug] @apply variant won't work in react project with less css preprocessor enabled.

Bug description

@apply variant won't work in react project with less css preprocessor enabled.

How to reproduce

check reproduction repo: https://github.com/Ynewtime/vite-react-ts-with-less

1. yarn create @vitejs/app
2. yarn install -D less
3. follow the install guide of https://github.com/windicss/vite-plugin-windicss#install
4. change src/App.css to App.less and add test class with @apply variant
5. use test class in src/App.tsx

More information

I've tested with sass and postcss-nesting, both work well with @apply variant, it seems just less could not.

Vitepress support 🥰

Thanks for the great package 👻.
When I add import "windi.css" in the index.ts file on the .vitepress config folder --> Had an error bellow, hope your team can fix it!

Link index.ts on my repo: https://github.com/harrytran998/harrytran998.me/blob/main/src/.vitepress/theme/index.ts

[vite] Internal server error: Failed to resolve import "windi.css". Does the file exist?

Propagation issue when using conditional component is=""

Hi,

When using <component is="x ? 'button' : 'a'"> the font for example won't propagate to the component

Here's a demo: https://github.com/gawlk/windicss-propagation-issue

Source maps not created for all files containing tailwind/windicss styles with vite build when sourcemap setting is set

Hi there,

first thanks for Windicss and the vite plugin, makes frontend development is joyful again :)

I switched my project now from create-react-app and TailwindCSS over to vite and windicss. It was a very smooth switch so far.

One little thing I noticed: I added sourcemaps to the build (vite.config: build: {sourcemap: true}} because i like sometimes to debug a production build. The build gives me a lot of warnings:

Sourcemap is likely to be incorrect: a plugin (vite-plugin-windicss:groups) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

As this affects only CSS and I really don't need sourcemaps for them I can ignore these warnings. But is there a way to disable them in the first place?

Thanks

add windi.config.ts/tailwind.config.ts runing Error

windi.config.ts

import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  darkMode: 'class'
})

get error info

[vite-plugin-windicss] failed to load config "/Users/mac/code/oe-tr-fe-vue/windi.config.ts"
[vite-plugin-windicss] SyntaxError: Unexpected token } in JSON at position 360

version

    "vue": "^3.0.7",
    "@vue/compiler-sfc": "^3.0.7",
    "vite": "^2.0.5",
    "windicss": "^2.2.6",
    "vite-plugin-windicss": "^0.6.6",

use iconfont error

Version

^0.4.7

vite: ^2.0.2

Reproduction link

https://github.com/PingTouG/vite-iconfont

Steps to reproduce

Just run it.

What is expected?

Use vite-plugin-windicss, iconfont can work.

What is actually happening?

If use vite-plugin-windicss, iconfont can't work.

Issue with VitePress running from subdirectory

This plugin works great for me with VitePress when the .vitepress folder is in the project root. But when I place it in a subdirectory (i.e. docs/), it fails to find the generated windi.css import file. Not sure if there's a config change I'm missing here?

Repro: https://github.com/ky-is/vite-plugin-windicss-vitepress-bug

Thanks for the awesome project!

Vite Vanilla - Styles Not Applied

I have bootstrapped a standard Vite vanilla app to test this plugin. I have followed to the README to get started.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

main.js:

import 'windi.css'

document.querySelector('#app').innerHTML = `
<div class="w-40 h-40 bg-blue-300 text-white">hello</div>
<div class="w-40 h-40 bg-red-300 text-white">hello2</div>
<div class="w-40 h-40 bg-green-300 text-white">hello3</div>
<div class="w-40 h-40 bg-gray-300 text-white">hello4</div>
`

vite.config.js:

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS()
  ]
}

Running npm run dev renders the page correctly, with all the HTML elements, but none of the TW styles are applied.

Any ideas?

Webstorm autocomplete + pug does not work

Is this a bug or am I missing something?

Ring inline style

Hello,
I am using this plugin, but when I add focus:ring-purple-800 the purple color doesn't affect the input. I checked it in the in the element section of dev tools and I found out an inline style was set to the input and in there the ring color was blue.
Should I do something to disable the default inline style?

Not working properly in Vue SFC with Pug template

Description

• When start dev, classnames in <template lang=pug> are not automatically extracted.
• When an HMR triggered, classnames in div(class="foo bar") form work, but div.foo.bar doesn't.
• Problem exists in build.

Minimal repro

Sorry for not knowing a codesandbox way to create a vite project.

vite.config.js

import vue from '@vitejs/plugin-vue'
import windicss from 'vite-plugin-windicss'
export default {
  plugins: [vue(), windicss()],
}

index.html

<!DOCTYPE html>
<div id="app" class="h-screen text-red-600 flex flex-col justify-center items-center"></div>
<script type="module">
  import {createApp} from 'vue'
  import 'windi.css'
  import App from './app.vue'
  createApp(App).mount('#app')
</script>

app.vue

<template lang="pug">
p.text-green-600 Lorem ipsum
p(class="text-blue-600") Lorem ipsum
</template>

Repro workspace: vite-plugin-windicss-pug-issue-repro.zip

Dep versions

• @vitejs/plugin-vue: 1.1.4
• @vue/compiler-sfc: 3.0.5
• vite: 2.0.1
• vite-plugin-windicss: 0.3.1

[Bug]Nesting feature of less no more working

Bug description

Nesting feature of less no more working

How to reproduce

check reproduction repo: https://github.com/Ynewtime/vite-react-ts-with-less

1. yarn create @vitejs/app
2. yarn install -D less
3. follow the install guide of https://github.com/windicss/vite-plugin-windicss#install
4. change src/App.css to App.less and add some less css to it, like these:

.parent {
  color: red;

  .child {
    color: red;
  }
}

5. use parent and child class in src/App.tsx

More information

If this plugin was disabled, the nesting feature would work.

Support grouping

I understand that right now, compilation mode is necessary to add features such as grouping.

sm:hover:(bg-gray-100 font-medium)

Which currently cannot be done in interpretation mode, right? And the way this is achieved in compilation mode is that windicss replaces all the classes with one class like windi-15wa4me and then writes css for that class.

The downside of this is that the output css will get larger, am I right? Because in compilation mode, if two elements use the p-4 attribute, then they will both get a padding: 1rem; line, thus the css will contain much more duplication. Am I right?

So I was just wondering, wouldn't it be possible to combine interpretation mode and compilation mode into one mode? And instead of replacing bg-white sm:hover:(bg-gray-100 font-medium) with windi-15wa4me, you just replace it with bg-white sm:hover:bg-gray-100 sm:hover:font-medium?

PS

I'm myself unsure if this really makes much of a difference. Because I'm aware that if the css gets gzipped, that such duplication may end up adding negligible amounts of bytes. Did you do any benchmarking on this by any chance?

multiple entry build failed

import { defineConfig } from 'vite'
import { resolve } from "path"
import legacy from '@vitejs/plugin-legacy'
import { minifyHtml, injectHtml } from 'vite-plugin-html';
import WindiCSS from 'vite-plugin-windicss'
export default defineConfig({
  server: {
    port: 3005,
  },
  build: {
    sourcemap: true,
    manifest: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'template', 'index.html'),
        head: resolve(__dirname, 'template', 'head', 'index.html'),
      }
    }
  },
  plugins: [
    WindiCSS(),
    injectHtml(
      {
        injectData: {
          isDev: process.env.NODE_ENV === 'development'
        }
      }
    )
    // legacy({
    //   targets: ['IE >= 9']
    // }),
  ],
})

//  /template/index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>GrapesJS</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <!-- <link rel="stylesheet" href="./main.scss"> -->
</head>
<body>
  <img src="./assets/logo.png">
  <div id="app">
    <div class="flex">test</div>
  </div>
  <script type="module" src="./main.ts"></script>
  <script type="text/javascript">
  </script>
</body>

</html>

The built CSS does not contain .flex

Styles not scoped within @screen directive

Hi there,

These styles:

<style scoped>
nav {
 background: blue;
}

@screen md {
  nav {
    background: blue;
  }
}
</style>

are compiled to:

<style type="text/css">
nav[data-v-264bddce] {
  background: blue;
}
@media (min-width: 768px) {
  nav {
    background: blue;
  }
}
</style>

It's supposed to be compiled to:

<style type="text/css">
nav[data-v-264bddce] {
  background: blue;
}
@media (min-width: 768px) {
  nav[data-v-264bddce] {
    background: blue;
  }
}
</style>

Never encountered this bug with Tailwind + vue-cli, so I thought it should belong here. Using standard media queries instead of @screen directive still works.

Thanks for your work!

IntelliSense

any support for class IntelliSense ?, new project, tailwind.config.js + the extension but still not suggestion in class=""

[SSR]Get stuck when switch to other page that use `less` pre-processor

Reproduce repo: https://github.com/cwxyz007/vite-windicss-bug

Steps:

1. start dev server

yarn

yarn dev

2. open http://localhost:3000/
3. Switch to About page

Then, It get stuck.

The main code is here: https://github.com/cwxyz007/vite-windicss-bug/blob/6fbcd29016cdf06ddd036259d99768f429595481/src/pages/About.vue#L24-L28

When I comment this code, It works. Or I remove vite-plugin-windicss, it also works.

esbuild dependency on plugin-utils

Within @windicss/plugin-utils as far as I can tell the esbuild and esbuild-register packages are not required for the code to run but are marked as dependencies within package.json.

For non-typescript based projects using the utils they'll be downloading these unused packages.

Would it make sense to have these as optional dependencies? If we always want to support the user providing a ts config file then this can be closed.

Not a big deal either way

Grouping utilities with parenthesis is not updating without restart the server

The changes are only updating on dom after restarting the server, I am using vitesse.

<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)"/>

Apply directive has no effect on Windows

I'm trying out Vite + Windi CSS and it seems to work other than my @apply directive not having any effect.

Here's the file with my directive in the <style> block. Rendered output is like this:

Is there further configuration needed, such as which CSS should be compiled, or some place I need to locate directives?

Updates to classes not loading unless you refresh the page

Updates to classes not loading unless you refresh the page.

Is this by design?

Conditional classes not being generated

Problem
It seems this plugin isn't generating classes for conditional classes in vue templates. For example the following worked when using tailwindcss, but it no longer works with windicss

<div :class="{ 'ml-24': hasSidebar }"></div>

If I move it to just a normal class attribute then it works, but obviously no longer produces the desired effet.

<div class="ml-24"></div>

Though I'm not sure if this is a problem with windicss or the plugin

Build Error

Description

When I use the plug-in, the package will report an error. Although there was a warning in version 0.2.2, it was still packaged successfully. An error occurred in the 0.3.0 version of the packaging

Step

1. git clone https://github.com/anncwb/vite-plugin-windicss-bug
2. yarn && yarn build
   

This is only a relatively small project, and it will cause packaging failure in a relatively complex project.

Because I use vditor in my project. It may be the internal css problem, but I can package it normally without the plugin vite-plugin-windicss.

Pug inline classes not considered

Hello, I've just migrate my webpack-vue2 project to a vite-vue3 one and now I am trying windicss over tailwindcss.
I made the decision because now windicss support pug and all my vue tamplate are using it.

The issue is that with a code like this

div.my-class.mt-2.py-2

the output it seems does not considere those classes.
If I change the code like this

div(class="my-class mt-2 py-2")

all work nicely.

I'd like to avoid to change all the template if possible.
Do you think it is something that can be solved?

Thanks

Problems in vitepress

Hey,

I'm trying out this plugin in vitepress and it doesn't work out of the box.

In development, I first need to make a change to the current .md file, once HRM kicks in, it correct applies classes. Same thing has to be done on Layout.vue – which is also vitepress specific.

More problematic is production build, because no used classes end up in production build's .css file.

My question is, was/is this ever intended to work with vitepress or not really?

npm error

version: 0.3.10

@windicss/plugin-utils This dependency does not seem to be released

missing Tailwind 2.0 colors

Hi, Thanks for this toolkit.

I have tried this: const colors = require('windicss/colors') in tailwind.config.js, but I see these typescript errors.

...
colors: {
       ...
        bluegray: colors.blueGray,
        coolgray: colors.coolGray,
        gray: colors.gray,
        truegray: colors.trueGray,
        warmgray: colors.warmGray,
        red: colors.red,
        orange: colors.orange,
}

Does windicss/colors' provide the full range of Tailwind 2.0 colors?