feat(preset-legacy-compat): add legacyColorSpace option (#4301)

Author: zyyv

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

@@ -11,6 +11,13 @@ export interface LegacyCompatOptions {
    * @default false
    */
   commaStyleColorFunction?: boolean
+
+  /**
+   * Enable legacy color space conversion.
+   *
+   * @default false
+   */
+  legacyColorSpace?: boolean
 }
 
 /**
@@ -19,6 +26,7 @@ export interface LegacyCompatOptions {
 export const presetLegacyCompat = definePreset((options: LegacyCompatOptions = {}) => {
   const {
     commaStyleColorFunction = false,
+    legacyColorSpace = false,
   } = options
 
   return {
@@ -28,10 +36,15 @@ export const presetLegacyCompat = definePreset((options: LegacyCompatOptions = {
         let value = i[1]
         if (typeof value !== 'string')
           return
+
         if (commaStyleColorFunction)
           value = toCommaStyleColorFunction(value)
         if (value !== i[1])
           i[1] = value
+
+        if (legacyColorSpace) {
+          i[1] = i[1].replace(/\s*in (oklch|oklab)/g, '')
+        }
       })
     },
   }

test/preset-legacy-compat.test.ts

@@ -16,16 +16,19 @@ describe('preset-legacy-compat', () => {
   it('with commaStyleColorFunction', async () => {
     const uno = await generateUno({
       commaStyleColorFunction: true,
+      legacyColorSpace: true,
     })
 
     const { css } = await uno.generate([
       'bg-[rgba(255,255,255,0.1)]',
       'text-red',
+      'bg-gradient-to-b',
     ].join(' '), { preflights: false })
 
-    await expect(css).toMatchInlineSnapshot(`
+    expect(css).toMatchInlineSnapshot(`
       "/* layer: default */
       .bg-\\[rgba\\(255\\,255\\,255\\,0\\.1\\)\\]{--un-bg-opacity:0.1;background-color:rgba(255, 255, 255, var(--un-bg-opacity));}
+      .bg-gradient-to-b{--un-gradient-shape:to bottom;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
       .text-red{--un-text-opacity:1;color:rgba(248, 113, 113, var(--un-text-opacity));}"
     `)
   })