feat: parse & transform

package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@types/css-tree": "^2.3.8",
+    "@unocss/core": "^0.63.6",
     "css-tree": "^3.0.0",
     "magic-string": "^0.30.12"
   },

src/index.ts

@@ -1,10 +1,8 @@
 import { parse } from 'css-tree'
 import MagicString from 'magic-string'
-import type { Declaration, Rule, StyleSheet } from 'css-tree'
+import type { Rule, StyleSheet } from 'css-tree'
 
-export function toArray<T>(value: T | T[] = []): T[] {
-  return Array.isArray(value) ? value : [value]
-}
+export * from './parser/declaration'
 
 function blockSource(source: string) {
   if (source.includes('{') && source.includes('}')) {
@@ -28,51 +26,3 @@ function handleRuleNode(source: MagicString, node: Rule) {
 //   console.dir(node)
 //   const selector = node.prelude.children
 }
-
-interface CssValueParsedMeta {
-  value: number | string
-  unit?: string
-}
-
-interface CssValueParsed {
-  prop: string
-  meta: CssValueParsedMeta[]
-}
-
-export function handleDeclarationNode(node: Declaration): CssValueParsed | undefined {
-  if (node.type !== 'Declaration') {
-    return
-  }
-
-  const prop = node.property
-  let meta: CssValueParsedMeta[]
-  if (node.value.type === 'Raw') {
-    meta = toArray<CssValueParsedMeta>({ value: node.value.value })
-  }
-  else {
-    meta = node.value.children.map((child) => {
-      switch (child.type) {
-        case 'Dimension':
-          return {
-            value: child.value,
-            unit: child.unit,
-          }
-
-        case 'Hash':
-          return {
-            value: child.value,
-          }
-
-        case 'Identifier':
-          return {
-            value: child.name,
-          }
-      }
-    }) as unknown as CssValueParsedMeta[]
-  }
-
-  return {
-    prop,
-    meta,
-  }
-}

src/maps/border.ts

@@ -1,6 +1,10 @@
-import { positions, positionShort } from './position'
+import { position, positionShort } from './position'
+import type { PropsAtomicMap } from '../types'
 
-export const border = [
-  ['border', 'border'],
-  ['b', 'b'],
+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]}`]
+  }],
 ]

src/maps/index.ts

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

src/maps/margin.ts

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

src/maps/position.ts

@@ -1,2 +1,9 @@
-export const positions = ['top', 'bottom', 'left', 'right']
+import type { PropsAtomicMap } 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]],
+])

src/parser/declaration.ts

@@ -0,0 +1,71 @@
+import type { CssNode, Declaration, Dimension, List, Url } from 'css-tree'
+import { toArray } from '../utils'
+import type { CssValueParsed, CssValueParsedMeta } from '../types'
+
+export function parseDeclarationNode(node: Declaration): CssValueParsed | undefined {
+  if (node.type !== 'Declaration') {
+    return
+  }
+
+  const prop = node.property
+  let meta: CssValueParsedMeta[]
+
+  if (node.value.type === 'Raw') {
+    meta = toArray<CssValueParsedMeta>({ value: node.value.value })
+  }
+  else {
+    meta = node.value.children.map(child => parseChildNode(child)) as unknown as CssValueParsedMeta[]
+  }
+
+  return {
+    prop,
+    meta,
+  }
+}
+
+function parseChildNode(child: CssNode): CssValueParsedMeta | undefined {
+  switch (child.type) {
+    case 'Dimension':
+    case 'Number':
+    case 'String':
+    case 'Percentage':
+    case 'Hash':
+    case 'Url':
+    case 'Raw':
+    case 'Operator': {
+      let _v: any = child.value
+      if (child.type === 'Hash') {
+        _v = `#${child.value}`
+      }
+      else if (child.type === 'Percentage') {
+        _v = `${child.value}%`
+      }
+
+      const meta: CssValueParsedMeta = { value: _v, type: child.type }
+
+      if ((child as Dimension).unit)
+        meta.unit = (child as Dimension).unit
+
+      if ((child as Url).type === 'Url')
+        meta.fname = 'url'
+
+      return meta
+    }
+
+    case 'Identifier':
+      return {
+        value: child.name,
+        type: child.type,
+      }
+
+    case 'Function':
+      return {
+        value: child.children.map(child => parseChildNode(child)!).toArray(),
+        fname: child.name,
+        type: child.type,
+      }
+
+    default:
+      return undefined
+  }
+}

src/transfromer/index.ts

@@ -0,0 +1,93 @@
+import { maps } from '../maps'
+import { toArray } from '../utils'
+import type { AtomicComposed, CssValueParsed, CssValueParsedMeta, DynamicPropAtomicMap, StaticPropAtomicMap, TransfromOptions } from '../types'
+
+const atomicCache: Record<string, string[]> = {}
+
+const nonTransfromPxProps = [
+  'border',
+]
+
+/**
+ * 将 CssValueParsedMeta[] 转换为 atomic css
+ * @param meta CssValueParsedMeta[]
+ * @returns
+ */
+export function transfrom(metas: CssValueParsedMeta[], options: TransfromOptions = {}): string[] {
+  const atomics: string[] = []
+}
+
+export function transfromParsed(parsed: CssValueParsed, options: TransfromOptions = {}) {
+  let key: string | undefined
+
+  const {
+    shortify = false,
+  } = options
+  const { prop, meta } = parsed
+
+  for (const map of maps) {
+    let atomics: AtomicComposed | undefined
+
+    if (typeof map[0] === 'string') {
+      if (prop === map[0]) {
+        atomics = toArray((map as StaticPropAtomicMap)[1]) as AtomicComposed
+      }
+    }
+    else {
+      const match = prop.match(map[0])
+      if (match) {
+        const matched = (map as DynamicPropAtomicMap)[1](match)
+        if (matched) {
+          atomics = toArray(matched) as AtomicComposed
+        }
+      }
+    }
+
+    if (atomics) {
+      if (shortify) {
+        key = atomics[1] || atomics[0]
+      }
+      else {
+        key = atomics[0]
+      }
+      break
+    }
+  }
+
+  if (!key) {
+    return
+  }
+
+  return analyzeMeta({
+    prop,
+    meta,
+    key,
+  })
+}
+
+function analyzeMeta(bundle: {
+  meta: CssValueParsed['meta']
+  key: string
+  prop: string
+}): string[] {
+  const { meta, key, prop } = bundle
+  const atomics: string[] = []
+
+  for (const m of meta) {
+    if (Array.isArray(m)) {
+
+    }
+    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}]`)
+        }
+        else {
+          atomics.push(`${key}-${Number(m.value) / 4}`)
+        }
+      }
+    }
+  }
+
+  return atomics
+}