feat: support theme color parse

package.json

@@ -42,11 +42,12 @@
     "prepublishOnly": "nr build",
     "release": "bumpp && npm publish",
     "start": "esno src/index.ts",
-    "test": "vitest",
+    "test": "vitest -u",
     "typecheck": "tsc --noEmit",
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
+    "@magic-color/core": "^2.0.0",
     "@types/css-tree": "^2.3.8",
     "@unocss/core": "^0.63.6",
     "css-tree": "^3.0.0",

src/maps/border.ts

@@ -1,10 +1,7 @@
-import { position, positionShort } from './position'
+import { createPos4Props } from './position'
 import type { PropsAtomicMap } from '../types'
 
 export const border: PropsAtomicMap[] = [
   ['border', ['border', 'b']],
-  [/^border-(top|bottom|left|right)(?:-\w+)?$/, ([, p]) => {
-    const index = position.indexOf(p)
-    return [`border-${positionShort[index]}`, `b-${positionShort[index]}`]
-  }],
+  createPos4Props('border', 'border', 'b'),
 ]

src/maps/color.ts

@@ -0,0 +1,8 @@
+import type { StaticPropAtomicMap } from '../types'
+
+export const colors: StaticPropAtomicMap[] = [
+  ['color', 'c'],
+  ['background', 'bg'],
+  ['background-color', 'bg'],
+  ['border-color', ['border', 'b']],
+]

src/maps/index.ts

@@ -1,9 +1,11 @@
 import { border } from './border'
+import { colors } from './color'
 import { margin } from './margin'
 import { positions } from './position'
 
 export const maps = [
   border,
   positions,
   margin,
+  colors,
 ].flat(1)

src/maps/position.ts

@@ -1,9 +1,22 @@
-import type { PropsAtomicMap } from '../types'
+import type { AtomicComposed, DynamicPropAtomicMap, PropsAtomicMap, StaticPropAtomicMap } from '../types'
 
 export const position = ['top', 'bottom', 'left', 'right']
 export const positionShort = ['t', 'b', 'l', 'r']
 
-export const positions: PropsAtomicMap[] = position.map((p, i) => [
-  p,
-  [p, positionShort[i]],
-])
+export const positions: PropsAtomicMap[] = [
+  ...position.map<StaticPropAtomicMap>((p, i) => [p, [p, positionShort[i]]]),
+  createPos4Props('margin', 'margin', 'm'),
+  createPos4Props('padding', 'padding', 'p'),
+]
+
+export function createPos4Props(prop: string, atom: string, shortAtom?: string): DynamicPropAtomicMap {
+  return [
+    new RegExp(`^${prop}-(top|bottom|left|right)(?:-\\w+)?$`),
+    ([, p]) => {
+      const index = position.indexOf(p)
+      if (index > -1) {
+        return [atom, shortAtom].filter(Boolean).map(s => `${s}-${positionShort[index]}`) as AtomicComposed
+      }
+    },
+  ]
+}

src/transfromer/index.ts

@@ -1,6 +1,8 @@
+import { Magicolor } from '@magic-color/core'
+import type { UnoGenerator } from '@unocss/core'
 import { maps } from '../maps'
 import { toArray } from '../utils'
-import type { AtomicComposed, CssValueParsed, CssValueParsedMeta, DynamicPropAtomicMap, StaticPropAtomicMap, TransfromOptions } from '../types'
+import type { AtomicComposed, Colors, CssValueParsed, CssValueParsedMeta, DynamicPropAtomicMap, StaticPropAtomicMap, TransfromOptions } from '../types'
 
 const atomicCache: Record<string, string[]> = {}
 
@@ -17,7 +19,7 @@ export function transfrom(metas: CssValueParsedMeta[], options: TransfromOptions
   const atomics: string[] = []
 }
 
-export function transfromParsed(parsed: CssValueParsed, options: TransfromOptions = {}) {
+export function transfromParsed(parsed: CssValueParsed, uno: UnoGenerator, options: TransfromOptions = {}) {
   let key: string | undefined
 
   const {
@@ -33,6 +35,7 @@ export function transfromParsed(parsed: CssValueParsed, options: TransfromOption
         atomics = toArray((map as StaticPropAtomicMap)[1]) as AtomicComposed
       }
     }
+
     else {
       const match = prop.match(map[0])
       if (match) {
@@ -62,15 +65,17 @@ export function transfromParsed(parsed: CssValueParsed, options: TransfromOption
     prop,
     meta,
     key,
+    uno,
   })
 }
 
 function analyzeMeta(bundle: {
   meta: CssValueParsed['meta']
   key: string
   prop: string
+  uno: UnoGenerator
 }): string[] {
-  const { meta, key, prop } = bundle
+  const { meta, key, prop, uno } = bundle
   const atomics: string[] = []
 
   for (const m of meta) {
@@ -80,14 +85,86 @@ function analyzeMeta(bundle: {
     else {
       if (m.unit === 'px' && /^\d+$/.test(m.value as string)) {
         if (nonTransfromPxProps.some(p => prop.includes(p))) {
-          atomics.push(`${key}-[${m.value}${m.unit}]`)
+          atomics.push(`${key}-${m.value}${m.unit}`)
         }
         else {
           atomics.push(`${key}-${Number(m.value) / 4}`)
         }
       }
+      else if (isColorProp(prop)) {
+        const colorKey = analyzeColor(m.value as string, uno)
+        if (colorKey) {
+          atomics.push(`${key}-${colorKey}`)
+        }
+        else {
+          atomics.push(`${key}-[${m.value}]`)
+        }
+      }
     }
   }
 
   return atomics
 }
+
+function isColorProp(prop: string): boolean {
+  return prop.includes('color') || ['fill', 'stroke'].includes(prop)
+}
+
+function analyzeColor(color: string, uno: UnoGenerator): string | undefined {
+  const hexable = (theme: object) => {
+    return Object.entries(theme).reduce((acc, [key, value]) => {
+      if (typeof value === 'string') {
+        try {
+          acc[key] = new Magicolor(value).hex()
+        }
+        catch {
+          acc[key] = value
+        }
+      }
+      else {
+        acc[key] = hexable(value)
+      }
+      return acc
+    }, {} as Colors)
+  }
+
+  if ((uno.config.theme as any).colors) {
+    const colors = hexable((uno.config.theme as any).colors)
+    let hexColor
+    try {
+      hexColor = new Magicolor(color).hex()
+    }
+    catch {
+      return
+    }
+    const paths = findColorPath(colors, hexColor)
+
+    if (paths && paths.length > 0) {
+      const last = paths[paths.length - 1]
+      if (last === 'DEFAULT') {
+        paths.pop()
+      }
+      return paths.join('-')
+    }
+
+    function findColorPath(colors: Colors, targetValue: string, path: string[] = []): string[] | undefined {
+      for (const key in colors) {
+        const value = colors[key]
+        const currentPath = [...path, key]
+
+        if (value === targetValue) {
+          return currentPath
+        }
+
+        if (typeof value === 'object' && value !== null) {
+          const result = findColorPath(value, targetValue, currentPath)
+          if (result) {
+            return result
+          }
+        }
+      }
+
+      return undefined
+    }
+  }
+}

src/types.ts

@@ -1,10 +1,16 @@
 import type { CssNode } from 'css-tree'
 
+export type Arrayable<T> = T | T[]
+export type Objectable<T> = Record<string, T>
+export interface Colors {
+  [key: string]: Colors & { DEFAULT?: string } | string
+}
+
 export type Atomic = string
 export type AtomicShort = string
 export type AtomicComposed = [Atomic, AtomicShort?]
 export type StaticPropAtomicMap = [string, Atomic | AtomicComposed]
-export type DynamicPropAtomicMap = [RegExp, (match: RegExpMatchArray) => Atomic | [Atomic, AtomicShort] | undefined]
+export type DynamicPropAtomicMap = [RegExp, (match: RegExpMatchArray) => Atomic | AtomicComposed | undefined]
 export type PropsAtomicMap = StaticPropAtomicMap | DynamicPropAtomicMap
 
 // Parser types

test/index.test.ts

@@ -1,3 +1,5 @@
+import { Magicolor } from '@magic-color/core'
+import { createGenerator } from '@unocss/core'
 import { parse } from 'css-tree'
 import { describe, expect, it } from 'vitest'
 import type { Declaration } from 'css-tree'
@@ -26,6 +28,26 @@ ul li {
 }
 `
 
+const uno = createGenerator({
+  theme: {
+    colors: {
+      white: '#fff',
+      primary: '#007bff',
+      foo: {
+        DEFAULT: '#f00',
+        100: '#f0f',
+        200: '#0ff',
+        300: 'rgb(0 0 0)',
+      },
+      bar: {
+        foo: {
+          test: '#f00',
+        },
+      },
+    },
+  },
+})
+
 describe('should', () => {
   function generateParsed(code: string) {
     const ast = parse(code, {
@@ -172,20 +194,34 @@ describe('should', () => {
   it('transfromParsed', () => {
     expect(transfromParsed(
       generateParsed('border-top: 1px solid #eee')!,
+      uno as any,
       { shortify: true },
     )).toMatchInlineSnapshot(`
       [
-        "b-t-[1px]",
+        "b-t-1px",
       ]
     `)
 
     expect(transfromParsed(
       generateParsed('margin: 12px')!,
+      uno as any,
       { shortify: true },
     )).toMatchInlineSnapshot(`
       [
         "m-3",
       ]
     `)
   })
+
+  it('color in theme', () => {
+    expect(transfromParsed(
+      generateParsed('color: foo')!,
+      uno as any,
+      { shortify: true },
+    )).toMatchInlineSnapshot(`
+      [
+        "c-[foo]",
+      ]
+    `)
+  })
 })