feat: update

src/maps/index.ts

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

src/maps/position.ts

@@ -5,8 +5,6 @@ export const positionShort = ['t', 'b', 'l', 'r']
 
 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 {

src/maps/size.ts

@@ -0,0 +1,59 @@
+import type { StaticPropAtomicMap } from '../types'
+
+export const sizes: StaticPropAtomicMap[] = [
+  ['width', 'w'],
+  ['height', 'h'],
+  ['min-width', 'min-w'],
+  ['min-height', 'min-h'],
+  ['max-width', 'max-w'],
+  ['max-height', 'max-h'],
+  ['font-size', 'text'],
+  ['line-height', ['leading', 'lh']],
+  ['border-radius', ['rounded', 'rd']],
+  ['border-top-left-radius', ['rounded-tl', 'rd-tl']],
+  ['border-top-right-radius', ['rounded-tr', 'rd-tr']],
+  ['border-bottom-right-radius', ['rounded-br', 'rd-br']],
+  ['border-bottom-left-radius', ['rounded-bl', 'rd-bl']],
+  ['border-width', ['border', 'b']],
+
+  ['border-top-width', 'btw'],
+  ['border-right-width', 'brw'],
+  ['border-bottom-width', 'bbw'],
+  ['border-left-width', 'blw'],
+  ['border-style', 'bs'],
+  ['border-top-style', 'bts'],
+  ['border-right-style', 'brs'],
+  ['border-bottom-style', 'bbs'],
+  ['border-left-style', 'bls'],
+  ['border-color', 'bc'],
+  ['border-top-color', 'btc'],
+  ['border-right-color', 'brc'],
+  ['border-bottom-color', 'bbc'],
+  ['border-left-color', 'blc'],
+  ['border', 'b'],
+  ['outline', 'o'],
+  ['outline-width', 'ow'],
+  ['outline-style', 'os'],
+  ['outline-color', 'oc'],
+  ['box-shadow', 'shadow'],
+  ['text-shadow', 'tshadow'],
+  ['letter-spacing', 'ls'],
+  ['word-spacing', 'ws'],
+  ['background-size', 'bg-size'],
+  ['background-position', 'bg-pos'],
+  ['background-repeat', 'bg-repeat'],
+  ['background-attachment', 'bg-attach'],
+  ['background-origin', 'bg-origin'],
+  ['background-clip', 'bg-clip'],
+  ['background-color', 'bgc'],
+  ['background-image', 'bgi'],
+  ['background-blend-mode', 'bg-blend'],
+  ['background-attachment', 'bg-attach'],
+  ['background-origin', 'bg-origin'],
+  ['background-clip', 'bg-clip'],
+  ['background-color', 'bgc'],
+  ['background-image', 'bgi'],
+  ['background-blend-mode', 'bg-blend'],
+  ['background-attachment', 'bg-attach'],
+  ['background-origin', ' bg-origin'],
+]

src/maps/spacing.ts

@@ -0,0 +1,9 @@
+import { createPos4Props } from './position'
+import type { PropsAtomicMap } from '../types'
+
+export const spacing: PropsAtomicMap[] = [
+  ['margin', 'm'],
+  ['padding', 'p'],
+  createPos4Props('margin', 'm'),
+  createPos4Props('padding', 'p'),
+]

src/parser/declaration.ts

@@ -1,8 +1,9 @@
-import type { CssNode, Declaration, Dimension, List, Url } from 'css-tree'
+import type { CssLocation, CssNode, Declaration, Dimension, List, Url } from 'css-tree'
+import type MagicString from 'magic-string'
 import { toArray } from '../utils'
 import type { CssValueParsed, CssValueParsedMeta } from '../types'
 
-export function parseDeclarationNode(node: Declaration): CssValueParsed | undefined {
+export function parseDeclarationNode(node: Declaration, source: MagicString): CssValueParsed | undefined {
   if (node.type !== 'Declaration') {
     return
   }
@@ -11,10 +12,14 @@ export function parseDeclarationNode(node: Declaration): CssValueParsed | undefi
   let meta: CssValueParsedMeta[]
 
   if (node.value.type === 'Raw') {
-    meta = toArray<CssValueParsedMeta>({ value: node.value.value })
+    meta = toArray<CssValueParsedMeta>({
+      value: node.value.value,
+      type: 'Raw',
+      raw: getRawString(node.value.loc!, source),
+    })
   }
   else {
-    meta = node.value.children.map(child => parseChildNode(child)) as unknown as CssValueParsedMeta[]
+    meta = node.value.children.toArray().map(child => parseChildNode(child, source)) as unknown as CssValueParsedMeta[]
   }
 
   return {
@@ -23,7 +28,12 @@ export function parseDeclarationNode(node: Declaration): CssValueParsed | undefi
   }
 }
 
-function parseChildNode(child: CssNode): CssValueParsedMeta | undefined {
+function parseChildNode(child: CssNode, source: MagicString): CssValueParsedMeta | undefined {
+  const meta: Partial<CssValueParsedMeta> = {
+    type: child.type as any,
+    raw: getRawString(child.loc!, source),
+  }
+
   switch (child.type) {
     case 'Dimension':
     case 'Number':
@@ -38,34 +48,45 @@ function parseChildNode(child: CssNode): CssValueParsedMeta | undefined {
         _v = `#${child.value}`
       }
       else if (child.type === 'Percentage') {
-        _v = `${child.value}%`
-      }
+        console.log(child.value)
 
-      const meta: CssValueParsedMeta = { value: _v, type: child.type }
+        if (child.value === '100') {
+          _v = 'full'
+        }
+        else {
+          _v = `${child.value}%`
+        }
+        console.log(_v)
+      }
+      meta.value = _v
 
       if ((child as Dimension).unit)
         meta.unit = (child as Dimension).unit
 
       if ((child as Url).type === 'Url')
         meta.fname = 'url'
 
-      return meta
+      break
     }
 
-    case 'Identifier':
-      return {
-        value: child.name,
-        type: child.type,
-      }
+    case 'Identifier': {
+      meta.value = child.name
+      break
+    }
 
-    case 'Function':
-      return {
-        value: child.children.map(child => parseChildNode(child)!).toArray(),
-        fname: child.name,
-        type: child.type,
-      }
+    case 'Function':{
+      meta.fname = child.name
+      meta.value = child.children.toArray().map(c => parseChildNode(c, source)) as any
+      break
+    }
 
     default:
       return undefined
   }
+
+  return meta as CssValueParsedMeta
+}
+
+function getRawString(loc: CssLocation, source: MagicString): string {
+  return source.original.slice(loc.start.offset, loc.end.offset)
 }

src/transfromer/index.ts

@@ -1,4 +1,4 @@
-import { Magicolor } from '@magic-color/core'
+import { guessType as guessColorType, Magicolor } from '@magic-color/core'
 import type { UnoGenerator } from '@unocss/core'
 import { maps } from '../maps'
 import { toArray } from '../utils'
@@ -10,6 +10,8 @@ const nonTransfromPxProps = [
   'border',
 ]
 
+const HexUnoColorMap = new WeakMap<UnoGenerator, Colors>()
+
 /**
  * 将 CssValueParsedMeta[] 转换为 atomic css
  * @param meta CssValueParsedMeta[]
@@ -79,8 +81,17 @@ function analyzeMeta(bundle: {
   const atomics: string[] = []
 
   for (const m of meta) {
-    if (Array.isArray(m)) {
-
+    if (Array.isArray(m.value)) {
+      if (m.type === 'Function') {
+        if (m.fname === 'var') {
+          const token = m.value.map(v => (v.value as string).trim()).join('').replace(/^--/, '$')
+          atomics.push(`${key}-${token}`)
+        }
+        else {
+          const token = m.raw.replace(/\s/g, '_')
+          atomics.push(`${key}-[${token}]`)
+        }
+      }
     }
     else {
       if (m.unit === 'px' && /^\d+$/.test(m.value as string)) {
@@ -91,15 +102,24 @@ function analyzeMeta(bundle: {
           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 if (isColorProp(prop) || m.type === 'Hash' || guessColorType(m.raw) != null) {
+        const themeKey = analyzeColor(m.value as string, uno)
+        if (themeKey) {
+          atomics.push(`${key}-${themeKey}`)
         }
         else {
-          atomics.push(`${key}-[${m.value}]`)
+          atomics.push(`${key}-${m.value}`)
         }
       }
+
+      else if (m.type === 'Identifier') {
+        atomics.push(`${key}-${m.value}`)
+      }
+
+      else {
+        atomics.push(`${key}-${m.raw}`)
+      }
     }
   }
 
@@ -129,14 +149,24 @@ function analyzeColor(color: string, uno: UnoGenerator): string | undefined {
   }
 
   if ((uno.config.theme as any).colors) {
-    const colors = hexable((uno.config.theme as any).colors)
+    let colors: Colors
     let hexColor
+
+    if (HexUnoColorMap.has(uno)) {
+      colors = HexUnoColorMap.get(uno)!
+    }
+    else {
+      colors = hexable((uno.config.theme as any).colors)
+      HexUnoColorMap.set(uno, colors)
+    }
+
     try {
       hexColor = new Magicolor(color).hex()
     }
     catch {
       return
     }
+
     const paths = findColorPath(colors, hexColor)
 
     if (paths && paths.length > 0) {

src/types.ts

@@ -32,6 +32,10 @@ export interface CssValueParsedMeta {
    * Type of the value
    */
   type: CssNode['type']
+  /**
+   * Raw string of the value
+   */
+  raw: string
 }
 
 export interface CssValueParsed {