refactor: use design system windicss config (#21503)

* chore: use design system windi config * fix: windi config should have colors in the right place * fix: remove direct dependencies to old windi * upgrade css plugin for types * update windi plugin * refactor: update without the safelist Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
2026-03-13 12:59:07 -05:00 · 2022-06-22 10:35:55 -05:00
parent 2603f013ac
commit a8f5e59b7d
13 changed files with 118 additions and 494 deletions
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -34,7 +34,6 @@
    "@vitejs/plugin-vue": "2.2.4",
    "@vitejs/plugin-vue-jsx": "1.3.8",
    "@vueuse/core": "7.2.2",
-    "@windicss/plugin-interaction-variants": "1.0.0",
    "ansi-to-html": "0.6.14",
    "bluebird": "3.5.3",
    "classnames": "2.3.1",
@@ -69,7 +68,6 @@
    "vue-i18n": "9.2.0-beta.7",
    "vue-router": "4",
    "vue-tsc": "^0.3.0",
-    "windicss": "3.1.4",
    "wonka": "^4.0.15"
  },
  "files": [
--- a/packages/app/windi.config.ts
+++ b/packages/app/windi.config.ts
@@ -1,4 +1,5 @@
-import { defaultConfig } from '@packages/frontend-shared/windi.config'
-import { defineConfig } from 'windicss/helpers'
+/**
+ * This file is used for vscode plugin autocompletion of windi colors
+ */

-export default defineConfig(defaultConfig)
+export { default } from '@packages/frontend-shared/windi.config'
--- a/packages/frontend-shared/.windicss/colors.ts
+++ b/packages/frontend-shared/.windicss/colors.ts
@@ -1,195 +0,0 @@
-// NOTE: All the colors in this file are also temporarily stored in packages/reporter/src/lib/variables.scss, for use in the reporter. If you change any here, please also change them there.
-
-import Colors from 'windicss/colors'
-
-const customColors = {
-  jade: {
-    50: '#E4FBF2',
-    100: '#C2F1DE',
-    200: '#A3E7CB',
-    300: '#69D3A7',
-    400: '#1FA971',
-    500: '#00814D',
-    600: '#005F39',
-    700: '#00442A',
-    800: '#003220',
-    900: '#00291B',
-    1000: '#00261A',
-  },
-  red: {
-    50: '#FBEFF1',
-    100: '#FAD9DF',
-    200: '#F8C4CD',
-    300: '#F59AA9',
-    400: '#E45770',
-    500: '#C62B49',
-    600: '#9F1331',
-    700: '#7A0723',
-    800: '#5E021B',
-    900: '#4F0018',
-    1000: '#490018',
-  },
-  orange: {
-    50: '#F5F4D7',
-    100: '#F3ECB3',
-    200: '#F1E08F',
-    300: '#EDBB4A',
-    400: '#DB7903',
-    500: '#BD5800',
-    600: '#963F00',
-    700: '#702C00',
-    800: '#521F00',
-    900: '#411800',
-    1000: '#391500',
-  },
-  indigo: {
-    50: '#F0F1FF',
-    100: '#DADDFE',
-    200: '#C5C9FD',
-    300: '#9AA2FC',
-    400: '#6470F3',
-    500: '#4956E3',
-    600: '#3A46CC',
-    700: '#2F3AB0',
-    800: '#252E8F',
-    900: '#1C236D',
-    1000: '#151A50',
-  },
-  gray: {
-    50: '#F3F4FA',
-    100: '#E1E3ED',
-    200: '#D0D2E0',
-    300: '#BFC2D4',
-    400: '#AFB3C7',
-    500: '#9095AD',
-    600: '#747994',
-    700: '#5A5F7A',
-    800: '#434861',
-    900: '#2E3247',
-    1000: '#1B1E2E',
-  },
-  teal: {
-    50: '#E0F6FA',
-    100: '#B7E7F0',
-    200: '#90D9E6',
-    300: '#4BBFD2',
-    400: '#0097A8',
-    500: '#007780',
-    600: '#00595D',
-    700: '#004143',
-    800: '#003131',
-    900: '#002828',
-    1000: '#002525',
-  },
-  purple: {
-    50: '#F5F0FB',
-    100: '#E9DDFA',
-    200: '#DECBF8',
-    300: '#C8A7F5',
-    400: '#A06CE4',
-    500: '#7F43C9',
-    600: '#632AA6',
-    700: '#4B1A83',
-    800: '#3B1268',
-    900: '#320E58',
-    1000: '#2F0C52',
-  },
-  green: {
-    50: '#F5F5D0',
-    100: '#E7E8AB',
-    200: '#DADC89',
-    300: '#BDC44D',
-    400: '#849706',
-    500: '#5B7100',
-    600: '#405500',
-    700: '#2E4000',
-    800: '#233200',
-    900: '#1C2A00',
-    1000: '#192500',
-  },
-  fuchsia: {
-    50: '#FAEFFB',
-    100: '#F7DAF9',
-    200: '#F3C6F8',
-    300: '#ED9FF4',
-    400: '#D65FE3',
-    500: '#B735C7',
-    600: '#901CA2',
-    700: '#6C0F7E',
-    800: '#510862',
-    900: '#400651',
-    1000: '#39054A',
-  },
-  magenta: {
-    50: '#FCEEF5',
-    100: '#FADAEA',
-    200: '#F9C5DF',
-    300: '#F69ECA',
-    400: '#E45DA3',
-    500: '#C53282',
-    600: '#9C1964',
-    700: '#750C4D',
-    800: '#59063D',
-    900: '#490435',
-    1000: '#420333',
-  },
-}
-
-export const cyColors = {
-  ...customColors,
-  primary: {
-    ...customColors.indigo,
-    DEFAULT: customColors.indigo[500],
-  },
-  secondary: {
-    ...customColors.indigo,
-    DEFAULT: customColors.indigo[50],
-  },
-  error: {
-    ...customColors.red,
-    DEFAULT: customColors.red[400],
-  },
-  caution: {
-    ...customColors.red,
-    DEFAULT: customColors.red[500],
-  },
-  info: {
-    ...customColors.indigo,
-    DEFAULT: customColors.indigo[500],
-  },
-  warning: {
-    ...customColors.orange,
-    DEFAULT: customColors.orange[500],
-  },
-  'warning-light': {
-    ...customColors.orange,
-    DEFAULT: customColors.orange[400],
-  },
-  success: {
-    ...customColors.jade,
-    DEFAULT: customColors.jade[400],
-  },
-  'success-light': {
-    ...customColors.jade,
-    DEFAULT: customColors.jade[300],
-  },
-  confirm: {
-    ...customColors.jade,
-    DEFAULT: customColors.jade[500],
-  },
-  'body-gray': {
-    ...customColors.gray,
-    DEFAULT: customColors.gray[600],
-  },
-}
-
-// filter out this deprecated color to remove the annoying warning
-const FilteredColors = Object.keys(Colors).reduce((acc, key) => {
-  if (key !== 'lightBlue') {
-    acc[key] = Colors[key]
-  }
-
-  return acc
-}, {})
-
-export const colors = { ...FilteredColors, ...cyColors }
--- a/packages/frontend-shared/.windicss/icon-color-plugins.ts
+++ b/packages/frontend-shared/.windicss/icon-color-plugins.ts
@@ -1,141 +0,0 @@
-/**
- * This package adds support for targeting
- * light vs dark classes in duotone icons.
- *
- * It works by adding utility classes and specific selectors
- */
-
-import createPlugin from 'windicss/plugin'
-import { reduce, kebabCase, isObject } from 'lodash'
-import { colors } from './colors'
-
-interface RuleConfig {
-  name: string
-  theme?: (key: string) => string
-  weight?: string
-  color?: string
-}
-
-const makeRuleForClass = ({ name, theme, weight, color }: RuleConfig) => {
-  const resolvedColor = color ? color : weight ? theme?.(`colors.${name}.${weight}`) : theme?.(`colors.${name}`)
-  let [lightKey, darkKey, secondaryLightKey, secondaryDarkKey] = [`.icon-light-${name}`, `.icon-dark-${name}`, `.icon-light-secondary-${name}`, `.icon-dark-secondary-${name}`]
-
-  // transparent, black, and white
-  if (weight) {
-    lightKey += `-${weight}`
-    darkKey += `-${weight}`
-    secondaryLightKey += `-${weight}`
-    secondaryDarkKey += `-${weight}`
-  }
-
-  return {
-    // When we're targeting an svg with icon-light-red-500
-    // only attach the fill and stroke for those same icons
-    // and vice versa for icon-dark
-    [lightKey]: {
-      '> *[fill].icon-light': {
-        fill: resolvedColor,
-      },
-      '> *[stroke].icon-light': {
-        stroke: resolvedColor,
-      },
-      '> *[fill][stroke].icon-light-fill': {
-        fill: resolvedColor,
-      },
-      '> *[fill][stroke].icon-light-stroke': {
-        stroke: resolvedColor,
-      },
-    },
-    [secondaryLightKey]: {
-      '> *[fill].icon-light-secondary': {
-        fill: resolvedColor,
-      },
-      '> *[stroke].icon-light-secondary': {
-        stroke: resolvedColor,
-      },
-      '> *[fill][stroke].icon-light-secondary-fill': {
-        fill: resolvedColor,
-      },
-      '> *[fill][stroke].icon-light-secondary-stroke': {
-        stroke: resolvedColor,
-      },
-    },
-    [darkKey]: {
-      '> *[fill].icon-dark': {
-        fill: resolvedColor,
-      },
-      '> *[stroke].icon-dark': {
-        stroke: resolvedColor,
-      },
-      '> *[fill][stroke].icon-dark-fill': {
-        fill: resolvedColor,
-      },
-      '> *[fill][stroke].icon-dark-stroke': {
-        stroke: resolvedColor,
-      },
-    },
-    [secondaryDarkKey]: {
-      '> *[fill].icon-dark-secondary': {
-        fill: resolvedColor,
-      },
-      '> *[stroke].icon-dark-secondary': {
-        stroke: resolvedColor,
-      },
-      '> *[fill][stroke].icon-dark-secondary-fill': {
-        fill: resolvedColor,
-      },
-      '> *[fill][stroke].icon-dark-secondary-stroke': {
-        stroke: resolvedColor,
-      },
-    },
-  }
-}
-
-function addIconUtilityClasses (theme) {
-  return reduce(colors, (acc, variants, colorName) => {
-    // lightGray => light-gray
-    const name = kebabCase(colorName)
-
-    // Collect the classes we're going to add to the windicss class registry
-    let additionalClasses = {}
-
-    // There are both nested and not-nested colors (e.g. black, white)
-    if (isObject(variants)) {
-      // multiple levels of colors
-      additionalClasses = reduce(variants, (variantAcc, _, weight) => {
-        const rules = makeRuleForClass({ name, theme, weight })
-
-        return { ...variantAcc, ...rules }
-      }, {})
-    } else {
-      // single values like black, white
-      additionalClasses = makeRuleForClass({ name, theme })
-    }
-
-    // Output is an object where each new class is a key
-    // And the selectors and values affected are values
-    /**
-      * {
-      *  `.icon-light-jade-500`: {
-      *    '> *[stroke].icon-light': {
-      *      stroke: resolvedColor
-      *    },
-      *    '> *[fill].icon-light': {
-      *      fill: resolvedColor
-      *    }
-      *  }
-      * }
-      */
-    return { ...acc, ...additionalClasses }
-  }, {
-
-    // These technically aren't under "colors"
-    ...makeRuleForClass({ name: 'transparent', color: 'transparent' }),
-    ...makeRuleForClass({ name: 'current', color: 'currentColor' }),
-  })
-}
-
-export const IconDuotoneColorsPlugin = createPlugin(({ theme, addUtilities }) => {
-  // @ts-ignore - dunno
-  addUtilities(addIconUtilityClasses(theme))
-})
--- a/packages/frontend-shared/.windicss/safelist.ts
+++ b/packages/frontend-shared/.windicss/safelist.ts
@@ -1,27 +0,0 @@
-/**
- * WindiCSS will strip out any styles that aren't used.
- * We do a lot of dynamic stuff, and we're not too concerned
- * ith bundle size, so this is a pretty greedy list
- */
-import { colors } from './colors'
-import { map, reduce, kebabCase } from 'lodash'
-
-const textSafelist = ['xs', 'sm', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'].map((v) => `text-${v}`).join(' ')
-const colorSafelist = reduce(colors, (acc, variants, colorName) => {
-  const name = kebabCase(colorName)
-
-  return `${acc}
-    ${map(variants, (_: string, k: string) => {
-    if (k === 'DEFAULT') return ``
-
-    return `
-    icon-light-${name}-${k}
-    icon-dark-${name}-${k}
-    bg-${name}-${k}
-    text-${name}-${k}
-    before:bg-${name}-${k}
-    before:text-${name}-${k}`
-  }).join(' ')}`
-}, '')
-
-export const safelist = `${textSafelist} ${colorSafelist}`
--- a/packages/frontend-shared/.windicss/shortcuts.ts
+++ b/packages/frontend-shared/.windicss/shortcuts.ts
@@ -1,26 +0,0 @@
-/**
- * Our default hover/focus behavior for buttons and cards is an indigo
- * border that hovers in and out
- * Animations not working? Border looking a little off? Make sure that you
- * have border-1 set on the non-hocus state. If you *don't* want a gray
- * outline with that, do border-transparent for the non-hocus state.
- */
-
-const focusDefault = 'outline-none focus:border focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 focus:outline-transparent transition duration-150 disabled:hover:ring-0 disabled:hover:border-transparent'
-
-// Usually what you want
-const hocusDefault = focusDefault.replace(/focus:/g, 'hocus:')
-
-// If you want to control a parent card when an inner button is in focus
-const focusWithinDefault = focusDefault.replace(/focus:/g, 'focus-within:')
-
-export const shortcuts = {
-  'default-ring': focusDefault.replace(/focus:/g, ''),
-  'hocus-within-default': focusDefault.replace(/focus:/g, 'hocus-within:'),
-  'hocus-default': hocusDefault,
-  'focus-within-default': focusWithinDefault,
-  'focus-default': focusDefault,
-  'hocus-link-default': 'focus:outline-transparent hocus:underline',
-  'hocus-error': hocusDefault.replace(/indigo/g, 'error'),
-  'hocus-secondary': hocusDefault.replace(/indigo/g, 'jade'),
-}
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -18,6 +18,7 @@
  "dependencies": {},
  "devDependencies": {
    "@antfu/utils": "^0.3.0",
+    "@cypress-design/css": "0.4.1",
    "@graphql-typed-document-node/core": "^3.1.0",
    "@headlessui/vue": "1.4.0",
    "@iconify/json": "1.1.368",
@@ -37,7 +38,6 @@
    "@vue/compiler-dom": "3.2.31",
    "@vue/compiler-sfc": "3.2.31",
    "@vueuse/core": "7.2.2",
-    "@windicss/plugin-interaction-variants": "1.0.0",
    "axe-core": "4.4.1",
    "combine-properties": "0.1.0",
    "cross-env": "6.0.3",
@@ -74,7 +74,6 @@
    "vue-router": "4",
    "vue-toastification": "2.0.0-rc.1",
    "vue-tsc": "^0.3.0",
-    "windicss": "3.1.4",
    "windicss-analysis": "^0.3.4",
    "wonka": "^4.0.15"
  },
--- a/packages/frontend-shared/script/generate-shiki-theme-ts.ts
+++ b/packages/frontend-shared/script/generate-shiki-theme-ts.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { colors } from '../.windicss/colors'
+import { colors } from '@cypress-design/css'
 import * as fs from 'fs'

 const filePath = './src/public/shiki/themes/cypress.theme'
--- a/packages/frontend-shared/vite.config.ts
+++ b/packages/frontend-shared/vite.config.ts
@@ -2,9 +2,9 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import WindiCSS from 'vite-plugin-windicss'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
 import VueSvgLoader from 'vite-svg-loader'
+import { CyCSSVitePlugin } from '@cypress-design/css'
 import Components from 'unplugin-vue-components/vite'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
@@ -71,7 +71,19 @@ const makePlugins = (plugins) => {
      }),
      ...plugins?.componentsOptions,
    }),
-    WindiCSS(),
+    CyCSSVitePlugin({
+      scan: {
+        // accepts globs and file paths relative to project root
+        include: [
+          'index.html',
+          '**/*.{vue,html,tsx}',
+          path.resolve(__dirname, '../frontend-shared/**/*.{vue,html,tsx,svg}'),
+          path.resolve(__dirname, '../app/**/*.{vue,html,tsx,svg}'),
+          path.resolve(__dirname, '../launchpad/**/*.{vue,html,tsx,svg}'),
+        ],
+        exclude: ['node_modules/**/*', '.git/**/*'],
+      },
+    }),
    VueSvgLoader(),

    // package.json is modified and auto-updated when new cjs dependencies
--- a/packages/frontend-shared/windi.config.ts
+++ b/packages/frontend-shared/windi.config.ts
@@ -1,57 +1,14 @@
-import { defineConfig } from 'windicss/helpers'
-import InteractionVariants from '@windicss/plugin-interaction-variants'
-import { IconDuotoneColorsPlugin } from './.windicss/icon-color-plugins'
-import { safelist } from './.windicss/safelist'
-import { colors } from './.windicss/colors'
-import { shortcuts } from './.windicss/shortcuts'
-import path from 'path'
-import type { FullConfig } from 'windicss/types/interfaces'
+/**
+ * This file is used for vscode plugin autocompletion of windi colors
+ */

-export const defaultConfig: FullConfig = {
-  // This adds !important to all utility classes.
-  // https://csswizardry.com/2016/05/the-importance-of-important/
-  important: true,
+import { colors } from '@cypress-design/css'
+import { defineConfig } from 'windicss/helpers'
+
+export default defineConfig({
  theme: {
    extend: {
-      borderRadius: {
-        DEFAULT: '4px',
-        md: '4px' },
-      fontFamily: {
-        mono: '"Fira Code", monospace',
-      },
      colors,
-      cursor: {
-        'ew-resize': 'ew-resize',
-      },
-      boxShadow: {
-        'dropdown': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
-      },
    },
  },
-  safelist,
-  variants: {
-    // What's hocus?
-    // Hocus is a portmanteau of hover + focus. This is useful because
-    // many of our styles are the same for both hover and focus.
-    backgroundColor: ['group-focus-within', 'group-focus-visible', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover'],
-  },
-  plugins: [
-    IconDuotoneColorsPlugin,
-    InteractionVariants,
-    require('windicss/plugin/filters'),
-  ],
-  shortcuts,
-  extract: {
-    // accepts globs and file paths relative to project root
-    include: [
-      'index.html',
-      '**/*.{vue,html,tsx}',
-      path.resolve(__dirname, '../frontend-shared/**/*.{vue,html,tsx,svg,ts}'),
-      path.resolve(__dirname, '../app/**/*.{vue,html,tsx,svg}'),
-      path.resolve(__dirname, '../launchpad/**/*.{vue,html,tsx,svg}'),
-    ],
-    exclude: ['node_modules/**/*', '.git/**/*'],
-  },
-}
-
-export default defineConfig(defaultConfig)
+})
--- a/packages/launchpad/package.json
+++ b/packages/launchpad/package.json
@@ -69,7 +69,6 @@
    "vue-i18n": "9.2.0-beta.7",
    "vue-tsc": "^0.3.0",
    "vue3-file-selector": "^1.0.1",
-    "windicss": "3.1.4",
    "windicss-analysis": "^0.3.4",
    "wonka": "^4.0.15"
  },
--- a/packages/launchpad/windi.config.ts
+++ b/packages/launchpad/windi.config.ts
@@ -1,4 +1,5 @@
-import { defaultConfig } from '@packages/frontend-shared/windi.config'
-import { defineConfig } from 'windicss/helpers'
+/**
+ * This file is used for vscode plugin autocompletion of windi colors
+ */

-export default defineConfig(defaultConfig)
+export { default } from '@packages/frontend-shared/windi.config'
--- a/yarn.lock
+++ b/yarn.lock
@@ -400,10 +400,10 @@
  dependencies:
    "@types/throttle-debounce" "^2.1.0"

-"@antfu/utils@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.5.0.tgz#b3169429997cb87850e543cb74660f9e2fed7efd"
-  integrity sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==
+"@antfu/utils@^0.5.0", "@antfu/utils@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.5.1.tgz#7eb6764878adb715daff20019e5a15fd63d93342"
+  integrity sha512-8Afo0+xvYe1K8Wm4xHTymfTkpzy36aaqDvhXIayUwl+mecMG9Xzl3XjXa6swG6Bk8FBeQ646RyvmsYt6+2Be9g==

 "@ardatan/aggregate-error@0.0.6":
  version "0.0.6"
@@ -2867,6 +2867,16 @@
  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
  integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==

+"@cypress-design/css@0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.4.1.tgz#40c73462a1b8a04a2d045cef43d5e2480c3bbf2f"
+  integrity sha512-ycyrNcqm9Cy0+IrhVa7Ef9dSv+B/p69T0Sw6zhLDxHwq4S0YxtFgE4zf8R7O4SbR8vlU/YpV5GSQhaXCFLsQXg==
+  dependencies:
+    "@windicss/plugin-interaction-variants" "^1.0.0"
+    vite-plugin-windicss "^1.8.4"
+    windicss "^3.5.1"
+    windicss-webpack-plugin "^1.6.10"
+
 "@cypress/browserify-preprocessor@3.0.0":
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/@cypress/browserify-preprocessor/-/browserify-preprocessor-3.0.0.tgz#2d1fa6a96ed7130a1b172c540448a5955cbc1264"
@@ -8940,16 +8950,16 @@
    jiti "^1.10.1"
    windicss "^3.1.4"

-"@windicss/config@1.8.2":
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.8.2.tgz#52f8720a7987184a79d610a151f12a6325c3677e"
-  integrity sha512-dGXkzcH1Bnm9716/pE63YSewLQIZXGWerHEotUKf2EMlz/JqsI9Z3yBy/lXVL9HsEoTNpyvMPLk75oquH0vXGg==
+"@windicss/config@1.8.4":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.8.4.tgz#090c7f48cb86b6cba1bd97742a2f012852026d3c"
+  integrity sha512-i4fFGFfZoRess6WMkauykHC3PFd9xKYVx7lSuLfMK7sgo6x3+l4dY42GbsWMHyLqH1sTMfyt1LgfXSIKYJozSA==
  dependencies:
-    debug "^4.3.3"
+    debug "^4.3.4"
    jiti "^1.13.0"
    windicss "^3.5.1"

-"@windicss/plugin-interaction-variants@1.0.0":
+"@windicss/plugin-interaction-variants@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@windicss/plugin-interaction-variants/-/plugin-interaction-variants-1.0.0.tgz#11e412c6fd653899f6cced4e4f7b402eb5456981"
  integrity sha512-jk0kvJEwphPlzjgCASxi0yCrLIrMPBHKTjPB1vF2LZsmWVaIPhKQRfpJW6+G093ipDos1E2BkevDrh/R2Ln8gg==
@@ -8967,17 +8977,17 @@
    micromatch "^4.0.4"
    windicss "^3.1.4"

-"@windicss/plugin-utils@1.8.2", "@windicss/plugin-utils@^1.1.1":
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.8.2.tgz#f7c982b01d0ea96cf86585115743c770c6b2cd2e"
-  integrity sha512-UlinWxojyGxWV18AyQ1ISeGvtpbw4ITQpcRe0v4PyuJZHwnrrHmxp8o/pg10oEcDKnsTIbjGeZfW5DC+mkjYYQ==
+"@windicss/plugin-utils@1.8.4", "@windicss/plugin-utils@^1.1.1", "@windicss/plugin-utils@^1.8.4":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.8.4.tgz#fba74b6eb29276e24b9d09931bc22808fd7230d7"
+  integrity sha512-DqJVwAfzlgd8nYSNlmhXOey32pI8UwH7QiOWdFS/AR2O/q9oLDGHDn97Its/kZdfoyhi8ylwZNP2Pk0H7cihhQ==
  dependencies:
-    "@antfu/utils" "^0.5.0"
-    "@windicss/config" "1.8.2"
-    debug "^4.3.3"
+    "@antfu/utils" "^0.5.1"
+    "@windicss/config" "1.8.4"
+    debug "^4.3.4"
    fast-glob "^3.2.11"
-    magic-string "^0.25.7"
-    micromatch "^4.0.4"
+    magic-string "^0.26.1"
+    micromatch "^4.0.5"
    windicss "^3.5.1"

 "@xtuc/ieee754@^1.2.0":
@@ -11791,7 +11801,7 @@ braces@^2.3.1, braces@^2.3.2:
    split-string "^3.0.2"
    to-regex "^3.0.1"

-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -15057,10 +15067,10 @@ debounce@^1.2.0:
  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==

-debug@*, debug@4, debug@4.3.3, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@~4.3.1:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
-  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+debug@*, debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
  dependencies:
    ms "2.1.2"

@@ -15120,6 +15130,13 @@ debug@4.3.2:
  dependencies:
    ms "2.1.2"

+debug@4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  dependencies:
+    ms "2.1.2"
+
 debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6, debug@^3.2.7:
  version "3.2.7"
  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -19184,6 +19201,11 @@ get-port@^4.2.0:
  resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119"
  integrity sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==

+get-port@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-6.1.2.tgz#c1228abb67ba0e17fb346da33b15187833b9c08a"
+  integrity sha512-BrGGraKm2uPqurfGVj/z97/zv8dPleC6x9JBNRTrDNtCkkRF4rPwrQXFgL7+I+q8QSdU4ntLQX2D7KIxSy8nGw==
+
 get-stdin@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -25007,6 +25029,13 @@ magic-string@0.25.7, magic-string@^0.25.0, magic-string@^0.25.5, magic-string@^0
  dependencies:
    sourcemap-codec "^1.4.4"

+magic-string@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.1.tgz#ba9b651354fa9512474199acecf9c6dbe93f97fd"
+  integrity sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 make-dir@^1.0.0, make-dir@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -25439,7 +25468,7 @@ microevent.ts@~0.1.1:
  resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
  integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==

-micromatch@4.0.4, micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@4.0.4:
  version "4.0.4"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
@@ -25485,6 +25514,14 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
    snapdragon "^0.8.1"
    to-regex "^3.0.2"

+micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 miller-rabin@^4.0.0:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -28856,7 +28893,7 @@ path-type@^4.0.0:
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==

-pathe@0.2.0:
+pathe@0.2.0, pathe@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.2.0.tgz#30fd7bbe0a0d91f0e60bae621f5d19e9e225c339"
  integrity sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==
@@ -28914,10 +28951,10 @@ picocolors@^1.0.0:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
-  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

 pidtree@^0.3.0:
  version "0.3.1"
@@ -37267,13 +37304,13 @@ vite-plugin-windicss@1.2.4:
    debug "^4.3.2"
    windicss "^3.1.4"

-vite-plugin-windicss@^1.4.7:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.2.tgz#0d07964018d6d0f97bb2a02a452b6bc1e66ba968"
-  integrity sha512-tO9bCoqIW945ehwMr9D41YPods8b7HXtVtYVPx62dxadxlbcoD7PQ/8wSvLEiIkMMfuDG5WQ6LZaUdmfALC/vQ==
+vite-plugin-windicss@^1.4.7, vite-plugin-windicss@^1.8.4:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.4.tgz#98430706691d54d6b9bf43ac0e3c74dd26b10664"
+  integrity sha512-LSZAO8BZn3x406GRbYX5t5ONXXJVdqiQtN1qrznLA/Dy5/NzZVhfcrL6N1qEYYO7HsCDT4pLAjTzObvDnM9Y8A==
  dependencies:
-    "@windicss/plugin-utils" "1.8.2"
-    debug "^4.3.3"
+    "@windicss/plugin-utils" "1.8.4"
+    debug "^4.3.4"
    kolorist "^1.5.1"
    windicss "^3.5.1"

@@ -38310,10 +38347,19 @@ windicss-analysis@^0.3.4:
    fs-extra "^10.0.0"
    sirv "^1.0.12"

-windicss@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.1.4.tgz#557eaf8e3c08064a309ccb5d887c82c4bce25069"
-  integrity sha512-3RBcANxdOy/n4dLVT8+0X409sGI+piO06ARbQ8RncxGuYgdw5Ip3hrhGIYajH67lV+tHc7xNVGxj73amOC9N0g==
+windicss-webpack-plugin@^1.6.10:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.7.2.tgz#e00382ba8b487813d340ba799effa26e1be3356b"
+  integrity sha512-7KopGPg63RXyJfsq/2OAHYoAFyIHSeexAk+MYMlW4CsBlEb+sw0Kt2v0gLgsPc1zs90oky1crAElKk+DDk8/5A==
+  dependencies:
+    "@windicss/plugin-utils" "^1.8.4"
+    debug "^4.3.4"
+    get-port "^6.1.2"
+    loader-utils "^2.0.0"
+    lodash "^4.17.21"
+    pathe "^0.2.0"
+    webpack-virtual-modules "^0.4.3"
+    windicss "^3.5.1"

 windicss@^3.1.4, windicss@^3.5.1:
  version "3.5.1"