feat(preset-mini): add rawColorComment

bench/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.60.4",
+  "version": "0.61.0",
   "scripts": {
     "bench": "node run.mjs"
   },
@@ -10,9 +10,9 @@
     "fs-extra": "^11.2.0",
     "local-pkg": "^0.5.0",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "unocss": "workspace:*",
-    "vite": "^5.2.12",
+    "vite": "^5.2.13",
     "vite-plugin-windicss": "^1.9.3",
     "vue": "^3.4.27",
     "windicss": "^3.5.6"

docs/config/rules.md

@@ -65,6 +65,95 @@ the corresponding CSS will be generated:
 
 Congratulations! Now you've got your own powerful atomic CSS utilities. Enjoy!
 
+## Ordering
+
+UnoCSS respects the order of the rules you defined in the generated CSS. Latter ones come with higher priority.
+
+When using dynamic rules, it may match multiple tokens. By default, the output of those matched under a single dynamic rule will be sorted alphabetically within the group.
+
+## Rules merging
+
+By default, UnoCSS will merge CSS rules with the same body to minimize the CSS size.
+
+For example, `<div class="m-2 hover:m2">` will generate:
+
+```css
+.hover\:m2:hover, .m-2 { margin: 0.5rem; }
+```
+
+Instead of two separate rules:
+
+```css
+.hover\:m2:hover { margin: 0.5rem; }
+.m-2 { margin: 0.5rem; }
+```
+
+## Special symbols
+
+Since v0.61, UnoCSS supports special symbols to define additional meta information for your generated CSS. You can access symbols from the second argument of the dynamic rule matcher function.
+
+For example:
+
+```ts
+rules: [
+  [/^grid$/, ([, d], { symbols }) => {
+    return {
+      [symbols.parent]: '@supports (display: grid)',
+      display: 'grid',
+    }
+  }],
+]
+```
+
+Will generate:
+
+```css
+@supports (display: grid) {
+  .grid {
+    display: grid;
+  }
+}
+```
+
+### Available symbols
+
+- `symbols.parent`: The parent wrapper of the generated CSS rule (eg. `@supports`, `@media`, etc.)
+- `symbols.selector`: A function to modify the selector of the generated CSS rule (see the example below)
+- `symbols.variants`: An array of variant handler that are applied to the current CSS object
+- `symbols.shortcutsNoMerge`: A boolean to disable the merging of the current rule in shortcuts
+
+## Multi-selector rules
+
+Since v0.61, UnoCSS supports multi-selector via [JavaScript Generator functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator).
+
+For example:
+
+```ts
+rules: [
+  [/^button-(.*)$/, function* ([, color], { symbols }) {
+    yield {
+      background: color
+    }
+    yield {
+      [symbols.selector]: selector => `${selector}:hover`,
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
+      background: `color-mix(in srgb, ${color} 90%, black)`
+    }
+  }],
+]
+```
+
+Will generate multiple CSS rules:
+
+```css
+.button-red {
+  background: red;
+}
+.button-red:hover {
+  background: color-mix(in srgb, red 90%, black);
+}
+```
+
 ## Fully controlled rules
 
 ::: tip
@@ -113,26 +202,3 @@ ${selector}::after {
   ],
 })
 ```
-
-## Ordering
-
-UnoCSS respects the order of the rules you defined in the generated CSS. Latter ones come with higher priority.
-
-When using dynamic rules, it may match multiple tokens. By default, the output of those matched under a single dynamic rule will be sorted alphabetically within the group.
-
-## Rules merging
-
-By default, UnoCSS will merge CSS rules with the same body to minimize the CSS size.
-
-For example, `<div class="m-2 hover:m2">` will generate:
-
-```css
-.hover\:m2:hover, .m-2 { margin: 0.5rem; }
-```
-
-Instead of two separate rules:
-
-```css
-.hover\:m2:hover { margin: 0.5rem; }
-.m-2 { margin: 0.5rem; }
-```

docs/package.json

@@ -1,22 +1,22 @@
 {
   "name": "docs",
   "type": "module",
-  "version": "0.60.4",
+  "version": "0.61.0",
   "private": true,
   "scripts": {
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.34",
-    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/carbon": "^1.1.35",
+    "@iconify-json/logos": "^1.1.43",
     "@iconify-json/mdi": "^1.1.66",
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/twemoji": "^1.1.15",
-    "@iconify-json/vscode-icons": "^1.1.34",
+    "@iconify-json/vscode-icons": "^1.1.35",
     "ofetch": "^1.3.4",
     "unocss": "workspace:*",
-    "vitepress": "^1.2.2"
+    "vitepress": "^1.2.3"
   }
 }

docs/presets/community.md

@@ -41,6 +41,7 @@
 - [unocss-transformer-attribute-values-group](https://github.com/lvjiaxuan/unocss-transformer-attribute-values-group) - Attribute values group transformer for UnoCSS by [@lvjiaxuan](https://github.com/lvjiaxuan).
 - [unocss-transformer-alias](https://github.com/zyyv/unocss-transformer-alias) - Transform alias for UnoCSS shortcuts by [@zyyv](https://github.com/zyyv).
 - [CSS to UnoCss](https://github.com/Simon-He95/transformToUnoCSS) - Transform CSS to Unocss by [@Simon-He95](https://github.com/Simon-He95).
+- [unocss-transformer-classnames-minifier](https://github.com/alisobirjanov/unocss-transformer-classnames-minifier) - Transform UnoCSS classnames minifier by [@alisobirjanov](https://github.com/alisobirjanov).
 
 # Community tools
 

examples/astro-vue/package.json

@@ -12,10 +12,10 @@
     "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@astrojs/vue": "^4.3.0",
-    "@iconify-json/logos": "^1.1.42",
+    "@astrojs/vue": "^4.4.0",
+    "@iconify-json/logos": "^1.1.43",
     "@unocss/reset": "link:../../packages/reset",
-    "astro": "^4.9.2",
+    "astro": "^4.10.2",
     "unocss": "link:../../packages/unocss"
   },
   "stackblitz": {

examples/astro/package.json

@@ -9,9 +9,9 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/logos": "^1.1.43",
     "@unocss/reset": "link:../../packages/reset",
-    "astro": "^4.9.2",
+    "astro": "^4.10.2",
     "canvas-confetti": "^1.9.3",
     "unocss": "link:../../packages/unocss"
   },

examples/next/package.json

@@ -13,7 +13,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.1.188",
+    "@iconify-json/lucide": "^1.1.191",
     "@types/node": "20.8.3",
     "@types/react": "18.2.25",
     "@types/react-dom": "18.2.11",

examples/nuxt2-webpack/package.json

@@ -7,7 +7,7 @@
     "start": "nuxt start"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.34",
+    "@iconify-json/carbon": "^1.1.35",
     "@unocss/core": "link:../../packages/core",
     "@unocss/nuxt": "link:../../packages/nuxt",
     "@unocss/reset": "link:../../packages/reset",

examples/nuxt2/package.json

@@ -7,7 +7,7 @@
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.34",
+    "@iconify-json/carbon": "^1.1.35",
     "@nuxt/bridge-edge": "latest",
     "@unocss/core": "link:../../packages/core",
     "@unocss/nuxt": "link:../../packages/nuxt",

examples/nuxt3-layers/package.json

@@ -10,12 +10,12 @@
     "lint:fix": "nr lint --fix"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.34",
+    "@iconify-json/carbon": "^1.1.35",
     "@unocss/core": "link:../../packages/core",
     "@unocss/eslint-plugin": "link:../../packages/eslint-plugin",
     "@unocss/nuxt": "link:../../packages/nuxt",
     "@unocss/reset": "link:../../packages/reset",
-    "nuxt": "^3.11.2",
+    "nuxt": "^3.12.1",
     "unocss": "link:../../packages/unocss"
   },
   "stackblitz": {

examples/nuxt3/package.json

@@ -7,11 +7,11 @@
     "preview": "nuxi preview"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.34",
+    "@iconify-json/carbon": "^1.1.35",
     "@unocss/core": "link:../../packages/core",
     "@unocss/nuxt": "link:../../packages/nuxt",
     "@unocss/reset": "link:../../packages/reset",
-    "nuxt": "^3.11.2",
+    "nuxt": "^3.12.1",
     "unocss": "link:../../packages/unocss"
   },
   "stackblitz": {

examples/quasar/package.json

@@ -15,7 +15,7 @@
     "@quasar/extras": "^1.16.11",
     "quasar": "^2.6.0",
     "vue": "^3.4.27",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.3"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.3",

examples/qwik/package.json

@@ -19,7 +19,7 @@
     "@unocss/reset": "link:../../packages/reset",
     "typescript": "^5.4.5",
     "unocss": "link:../../packages/unocss",
-    "vite": "^5.2.12"
+    "vite": "^5.2.13"
   },
   "stackblitz": {
     "installDependencies": false,

examples/remix/package.json

@@ -34,7 +34,7 @@
     "concurrently": "^8.2.2",
     "typescript": "^5.4.5",
     "unocss": "link:../../packages/unocss",
-    "vite": "^5.2.12",
+    "vite": "^5.2.13",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "stackblitz": {

examples/remix/tsconfig.json

@@ -12,13 +12,13 @@
     "resolveJsonModule": true,
     "types": ["@remix-run/node", "vite/client"],
     "allowJs": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
     "strict": true,
 
     // Vite takes care of building everything, not tsc.
     "noEmit": true,
-    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
     "skipLibCheck": true
   },
   "include": [

examples/sveltekit-preprocess/package.json

@@ -24,7 +24,7 @@
   },
   "svelte": "./dist/index.js",
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/logos": "^1.1.43",
     "@sveltejs/adapter-auto": "^3.2.1",
     "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
@@ -33,12 +33,12 @@
     "@unocss/preset-icons": "link:../../packages/preset-icons",
     "@unocss/svelte-scoped": "link:../../packages/svelte-scoped",
     "publint": "^0.2.8",
-    "svelte": "^4.2.17",
+    "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
-    "tslib": "^2.6.2",
+    "tslib": "^2.6.3",
     "typescript": "^5.4.5",
     "unocss": "link:../../packages/unocss",
-    "vite": "^5.2.12"
+    "vite": "^5.2.13"
   },
   "stackblitz": {
     "installDependencies": false,

examples/sveltekit-scoped/package.json

@@ -9,7 +9,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/logos": "^1.1.43",
     "@iconify-json/ri": "^1.1.20",
     "@julr/unocss-preset-forms": "^0.1.0",
     "@sveltejs/adapter-auto": "^3.2.1",
@@ -18,12 +18,12 @@
     "@unocss/core": "link:../../packages/core",
     "@unocss/preset-icons": "link:../../packages/preset-icons",
     "@unocss/svelte-scoped": "link:../../packages/svelte-scoped",
-    "svelte": "^4.2.17",
+    "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
-    "tslib": "^2.6.2",
+    "tslib": "^2.6.3",
     "typescript": "^5.4.5",
     "unocss": "link:../../packages/unocss",
-    "vite": "^5.2.12"
+    "vite": "^5.2.13"
   },
   "stackblitz": {
     "installDependencies": false,

examples/sveltekit/package.json

@@ -9,7 +9,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/logos": "^1.1.43",
     "@iconify/utils": "^2.1.24",
     "@sveltejs/adapter-auto": "^3.2.1",
     "@sveltejs/kit": "^2.5.10",
@@ -18,12 +18,12 @@
     "@unocss/extractor-svelte": "link:../../packages/extractor-svelte",
     "@unocss/preset-icons": "link:../../packages/preset-icons",
     "@unocss/preset-uno": "link:../../packages/preset-uno",
-    "svelte": "^4.2.17",
+    "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
-    "tslib": "^2.6.2",
+    "tslib": "^2.6.3",
     "typescript": "^5.4.5",
     "unocss": "link:../../packages/unocss",
-    "vite": "^5.2.12"
+    "vite": "^5.2.13"
   },
   "stackblitz": {
     "installDependencies": false,