feat: introduce legacy-compat preset (#3480)

Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>

docs/.vitepress/config.ts

@@ -52,6 +52,7 @@ const Presets: DefaultTheme.NavItemWithLink[] = [
   { text: 'Web fonts', link: '/presets/web-fonts' },
   { text: 'Wind', link: '/presets/wind' },
   { text: 'Mini', link: '/presets/mini' },
+  { text: 'Legacy Compat', link: '/presets/legacy-compat' },
   { text: 'Tagify', link: '/presets/tagify' },
   { text: 'Rem to px', link: '/presets/rem-to-px' },
 ]

docs/config/theme.md

@@ -18,7 +18,7 @@ theme: {
   colors: {
     'veryCool': '#0000ff', // class="text-very-cool"
     'brand': {
-      'primary': 'hsl(var(--hue 217) 78% / 51%)', //class="bg-brand-primary"
+      'primary': 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary"
     },
   },
 }

docs/guide/packages.md

@@ -21,6 +21,7 @@ UnoCSS is a monorepo that contains multiple packages. This page lists all the pa
 | [@unocss/preset-web-fonts](/presets/web-fonts)                       | Web fonts (Google Fonts, etc.) support            | ✅ | No |
 | [@unocss/preset-typography](/presets/typography)                     | The typography preset                             | ✅ | No |
 | [@unocss/preset-rem-to-px](/presets/rem-to-px)                       | Coverts rem to px for utils                       | No | No |
+| [@unocss/preset-legacy-compat](/presets/legacy-compat)               | Collections of legacy compatibility utilities     | No | No |
 | [@unocss/transformer-variant-group](/transformers/variant-group)     | Transformer for Windi CSS's variant group feature | ✅ | No |
 | [@unocss/transformer-directives](/transformers/directives)           | Transformer for CSS directives like `@apply`      | ✅ | No |
 | [@unocss/transformer-compile-class](/transformers/compile-class)     | Compile group of classes into one class           | ✅ | No |

docs/presets/legacy-compat.md

@@ -0,0 +1,60 @@
+---
+title: Legacy Compat preset
+description: Collections of legacy compatibility utilities.
+outline: deep
+---
+
+# Legacy Compat Preset
+
+Collections of legacy compatibility utilities.
+
+This preset does not include any rules, it's applying postprocess to the generated CSS from other presets.
+
+By default none of the options are enabled, you need to opt-in each of them explicitly.
+
+[Source Code](https://github.com/unocss/unocss/tree/main/packages/preset-legacy-compat)
+
+## Installation
+
+::: code-group
+  ```bash [pnpm]
+  pnpm add -D @unocss/preset-legacy-compat
+  ```
+  ```bash [yarn]
+  yarn add -D @unocss/preset-legacy-compat
+  ```
+  ```bash [npm]
+  npm install -D @unocss/preset-legacy-compat
+  ```
+:::
+
+```ts
+// uno.config.ts
+import { defineConfig } from 'unocss'
+import presetLegacyCompat from '@unocss/preset-legacy-compat'
+
+export default defineConfig({
+  presets: [
+    // ...other presets
+    presetLegacyCompat({
+      // options
+      commaStyleColorFunction: true,
+    }),
+  ],
+})
+```
+
+## Options
+
+### `commaStyleColorFunction`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Convert color functions (`rgb()` and `hsl()`) from space-separated to comma-separated, for better compatibility with legacy browsers. Bring back the old behavior before UnoCSS v0.57.0 that was changed to space-separated in [#3221](https://github.com/unocss/unocss/pull/3221) to align with Tailwind CSS.
+
+For examples:
+
+- `rgb(255 0 0)` -> `rgb(255, 0, 0)`
+- `rgb(255 0 0 / 50%)` -> `rgba(255, 0, 0, 50%)`
+- `hsl(0 100% 50% / 50%)` -> `hsla(0, 100%, 50%, 50%)`

docs/presets/mini.md

@@ -125,7 +125,7 @@ presetMini({
     colors: {
       'veryCool': '#0000ff', // class="text-very-cool"
       'brand': {
-        'primary': 'hsl(var(--hue 217) 78% / 51%)', //class="bg-brand-primary"
+        'primary': 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary"
       }
     },
   }

packages/preset-legacy-compat/README.md

@@ -0,0 +1,11 @@
+# @unocss/preset-legacy-compat
+
+Collections of legacy compatibility utilities.
+
+## Documentation
+
+Please refer to the [documentation](https://unocss.dev/presets/legacy-compat).
+
+## License
+
+MIT License © 2023-PRESENT [Anthony Fu](https://github.com/antfu)

packages/preset-legacy-compat/build.config.ts

@@ -0,0 +1,12 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/index',
+  ],
+  clean: true,
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+})

packages/preset-legacy-compat/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@unocss/preset-legacy-compat",
+  "version": "0.58.2",
+  "description": "Collections of legacy compatibility utilities.",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/preset-legacy-compat#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/unocss/unocss",
+    "directory": "packages/preset-legacy-compat"
+  },
+  "bugs": {
+    "url": "https://github.com/unocss/unocss/issues"
+  },
+  "keywords": [
+    "unocss",
+    "unocss-preset"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  },
+  "dependencies": {
+    "@unocss/core": "workspace:*"
+  }
+}

packages/preset-legacy-compat/src/comma-color.ts

@@ -0,0 +1,13 @@
+export function toCommaStyleColorFunction(str: string) {
+  return str.replace(/(rgb|hsl)a?\(([^)]+)\)/g, (_, fn: string, v: string) => {
+    const [rgb, alpha] = v.split(/\//g).map(i => i.trim())
+    if (alpha && !fn.endsWith('a'))
+      fn += 'a'
+
+    const parts = rgb.split(/(?!,)\s+/).map(i => i.trim())
+    if (alpha)
+      parts.push(alpha)
+
+    return `${fn}(${parts.filter(Boolean).join(', ')})`
+  })
+}

packages/preset-legacy-compat/src/index.ts

@@ -0,0 +1,37 @@
+import { definePreset } from '@unocss/core'
+import { toCommaStyleColorFunction } from './comma-color'
+
+export interface LegacyCompatOptions {
+  /**
+   * Convert modern space style color function to comma style.
+   *
+   * @example `rgb(255 0 0)` -> `rgb(255, 0, 0)`
+   * @example `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
+   *
+   * @default false
+   */
+  commaStyleColorFunction?: boolean
+}
+
+export const presetLegacyCompat = definePreset((options: LegacyCompatOptions = {}) => {
+  const {
+    commaStyleColorFunction = 16,
+  } = options
+
+  return {
+    name: '@unocss/preset-legacy-compat',
+    postprocess: (util) => {
+      util.entries.forEach((i) => {
+        let value = i[1]
+        if (typeof value !== 'string')
+          return
+        if (commaStyleColorFunction)
+          value = toCommaStyleColorFunction(value)
+        if (value !== i[1])
+          i[1] = value
+      })
+    },
+  }
+})
+
+export default presetLegacyCompat

packages/preset-legacy-compat/test/comma-color.test.ts

@@ -0,0 +1,19 @@
+import { expect, it } from 'vitest'
+import { toCommaStyleColorFunction as r } from '../src/comma-color'
+
+it('toCommaStyleColorFunction', () => {
+  expect(r('rgb(255 255 255)'))
+    .toBe('rgb(255, 255, 255)')
+
+  expect(r('rgb(255 255 255 / 0.5)'))
+    .toBe('rgba(255, 255, 255, 0.5)')
+
+  expect(r('hsl(0 0% 100%)'))
+    .toBe('hsl(0, 0%, 100%)')
+
+  expect(r('hsl(0 0% 100% / 0.5)'))
+    .toBe('hsla(0, 0%, 100%, 0.5)')
+
+  expect(r('rgb(248 113 113 / var(--un-bg-opacity))'))
+    .toBe('rgba(248, 113, 113, var(--un-bg-opacity))')
+})