chore: update

README.md

@@ -7,3 +7,5 @@
 [![License][license-src]][license-href]
 
 CSS transform to UnoCSS.
+
+https://astexplorer.net/

eslint.config.js

@@ -1,8 +1,4 @@
 // @ts-check
 import antfu from '@antfu/eslint-config'
 
-export default antfu(
-  {
-    type: 'lib',
-  },
-)
+export default antfu()

package.json

@@ -46,6 +46,11 @@
     "typecheck": "tsc --noEmit",
     "prepare": "simple-git-hooks"
   },
+  "dependencies": {
+    "@types/css-tree": "^2.3.8",
+    "css-tree": "^3.0.0",
+    "magic-string": "^0.30.12"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^3.3.2",
     "@antfu/ni": "^0.23.0",

src/index.ts

@@ -1,2 +1,78 @@
-export const one = 1
-export const two = 2
+import { parse } from 'css-tree'
+import MagicString from 'magic-string'
+import type { Declaration, Rule, StyleSheet } from 'css-tree'
+
+export function toArray<T>(value: T | T[] = []): T[] {
+  return Array.isArray(value) ? value : [value]
+}
+
+function blockSource(source: string) {
+  if (source.includes('{') && source.includes('}')) {
+    return source
+  }
+  return `{ ${source} }`
+}
+
+export function parseCSS(css: string) {
+  const source = new MagicString(css)
+  const ast = parse(blockSource(source.original)) as StyleSheet
+
+  for (const node of ast.children) {
+    if (node.type === 'Rule') {
+      handleRuleNode(source, node)
+    }
+  }
+}
+
+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

@@ -0,0 +1,6 @@
+import { positions, positionShort } from './position'
+
+export const border = [
+  ['border', 'border'],
+  ['b', 'b'],
+]

src/maps/position.ts

@@ -0,0 +1,2 @@
+export const positions = ['top', 'bottom', 'left', 'right']
+export const positionShort = ['t', 'b', 'l', 'r']

src/types.ts

@@ -0,0 +1,8 @@
+/**
+ * [match property, uno rule starter]
+ *
+ * @example
+ * ['color', 'c']
+ * ['background-color', 'bg']
+ */
+export type KeyToUno = [string, string]

test/index.test.ts

@@ -1,7 +1,56 @@
+import { parse } from 'css-tree'
 import { describe, expect, it } from 'vitest'
+import type { Declaration } from 'css-tree'
+import { handleDeclarationNode, parseCSS } from '../src'
+
+const source = `/**
+ * Paste or drop some CSS here and explore
+ * the syntax tree created by chosen parser.
+ * Enjoy!
+ */
+
+@media screen and (min-width: 480px) {
+    body {
+        background-color: lightgreen;
+    }
+}
+
+#main {
+    border: 1px solid black;
+}
+
+ul li {
+	padding: 5px;
+  color: #fff;
+}
+`
 
 describe('should', () => {
   it('exported', () => {
-    expect(1).toEqual(1)
+    // const css = 'color: red'
+    const css = 'border: 1px solid #eee'
+    const ast = parse(css, {
+      context: 'declaration',
+      positions: true,
+    }) as Declaration
+    const result = handleDeclarationNode(ast)
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "meta": [
+          {
+            "unit": "px",
+            "value": "1",
+          },
+          {
+            "value": "solid",
+          },
+          {
+            "value": "eee",
+          },
+        ],
+        "prop": "border",
+      }
+    `)
   })
 })