fix: generated self-referencing CSS variables

package.json

@@ -37,7 +37,7 @@
   "scripts": {
     "build": "unbuild",
     "stub": "unbuild --stub",
-    "play": "pnpm --filter ./playground run dev",
+    "play": "pnpm -C ./playground run dev",
     "test": "vitest",
     "lint": "eslint .",
     "lint:fix": "pnpm run lint --fix",
@@ -48,13 +48,13 @@
     "@unocss/core": ">= 0.52.0"
   },
   "dependencies": {
-    "@unocss/core": "^0.61.0",
-    "@unocss/rule-utils": "^0.61.0"
+    "@unocss/core": "^0.63.4",
+    "@unocss/rule-utils": "^0.63.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.21.2",
     "@types/node": "^20.14.9",
-    "@unocss/preset-uno": "^0.61.0",
+    "@unocss/preset-uno": "^0.63.4",
     "bumpp": "^9.4.1",
     "eslint": "^9.6.0",
     "typescript": "^5.5.2",

playground/package.json

@@ -9,13 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@unocss/reset": "^0.61.0",
+    "@unocss/reset": "^0.63.4",
     "vue": "^3.4.31"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
     "typescript": "^5.5.2",
-    "unocss": "^0.61.0",
+    "unocss": "^0.63.4",
     "unocss-preset-theme": "workspace:*",
     "vite": "^5.3.2",
     "vue-tsc": "^2.0.24"

playground/tests/build.test.ts

@@ -0,0 +1,27 @@
+import { spawnSync } from 'node:child_process'
+import { readFileSync, readdirSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+describe('build', () => {
+  it('vite-build', async () => {
+    const output = spawnSync('pnpm', ['-C', 'playground', 'build'], { shell: true, encoding: 'utf8' })
+    expect(output.status).toBe(0)
+    expect(output.error).toBeUndefined()
+    expect(output.stdout).toMatch(/✓ built in (\d+\.)?\d+m?s/)
+
+    const dir = resolve(import.meta.dirname, '../dist/assets')
+    const assets = readdirSync(dir)
+    expect(assets.length).toBeGreaterThan(0)
+
+    const cssFile = assets.find(file => file.endsWith('.css'))
+    expect(cssFile).not.toBeUndefined()
+
+    const css = readFileSync(resolve(dir, cssFile!), 'utf8')
+
+    expect(css).toMatchInlineSnapshot(`
+      "*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:root{--un-preset-theme-spacing-xl:32px;--un-preset-theme-spacing-lg:24px;--un-preset-theme-spacing-base:16px;--un-preset-theme-spacing-xs:8px;--un-preset-theme-spacing-sm:12px;--un-preset-theme-colors-container:255 255 255;--un-preset-theme-colors-border:217 217 217;--un-preset-theme-colors-text:0 0 0;--un-preset-theme-colors-text--alpha:.88;--un-preset-theme-colors-primary:22 119 255;--un-preset-theme-colors-primary-border:22 119 255}.compact{--un-preset-theme-spacing-xl:16px;--un-preset-theme-spacing-lg:12px;--un-preset-theme-spacing-base:8px;--un-preset-theme-spacing-xs:4px;--un-preset-theme-spacing-sm:6px}.dark{--un-preset-theme-colors-container:20 20 20;--un-preset-theme-colors-border:66 66 66;--un-preset-theme-colors-text:255 255 255;--un-preset-theme-colors-text--alpha:.85;--un-preset-theme-colors-primary:22 104 220;--un-preset-theme-colors-primary-border:22 104 220}.mb-sm{margin-bottom:var(--un-preset-theme-spacing-sm)}.mt-10{margin-top:2.5rem}.mt-40{margin-top:10rem}.h-screen{height:100vh}.w-full{width:100%}.w-screen{width:100vw}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-x-4{column-gap:1rem}.border-1{border-width:1px}.border-2{border-width:2px}.border-color-border{--un-border-opacity:var(--un-preset-theme-colors-border--alpha, 1);border-color:rgb(var(--un-preset-theme-colors-border) / var(--un-border-opacity))}.hover\\:border-primary-border:hover{--un-border-opacity:var(--un-preset-theme-colors-primary-border--alpha, 1);border-color:rgb(var(--un-preset-theme-colors-primary-border) / var(--un-border-opacity))}.rounded-md{border-radius:.375rem}.bg-container{--un-bg-opacity:var(--un-preset-theme-colors-container--alpha, 1);background-color:rgb(var(--un-preset-theme-colors-container) / var(--un-bg-opacity))}.bg-container\\/20{background-color:rgb(var(--un-preset-theme-colors-container) / .2)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-base{padding-left:var(--un-preset-theme-spacing-base);padding-right:var(--un-preset-theme-spacing-base)}.px-xl{padding-left:var(--un-preset-theme-spacing-xl);padding-right:var(--un-preset-theme-spacing-xl)}.py-lg{padding-top:var(--un-preset-theme-spacing-lg);padding-bottom:var(--un-preset-theme-spacing-lg)}.py-xs{padding-top:var(--un-preset-theme-spacing-xs);padding-bottom:var(--un-preset-theme-spacing-xs)}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-primary\\/50{color:rgb(var(--un-preset-theme-colors-primary) / .5)}.text-text{--un-text-opacity:var(--un-preset-theme-colors-text--alpha, 1);color:rgb(var(--un-preset-theme-colors-text) / var(--un-text-opacity))}.hover\\:text-primary:hover{--un-text-opacity:var(--un-preset-theme-colors-primary--alpha, 1);color:rgb(var(--un-preset-theme-colors-primary) / var(--un-text-opacity))}.font-bold{font-weight:700}.font-sans{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"}@media (min-width: 640px){.sm\\:w-md{width:28rem}}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--un-default-border-color, #e5e7eb)}:before,:after{--un-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}
+      "
+    `)
+  })
+})