feat: parser api and units option

Author: tenphi

src/tasty/parser/ast.ts

@@ -4,8 +4,11 @@ export type StyleToken = RawStyleToken & {
   children?: StyleToken[];
 };
 
-const COLOR_FUNCTIONS = ['rgb', 'rgba', 'hsl', 'hsla'];
+const COLOR_FUNCTIONS = ['rgb', 'rgba', 'hsl', 'hsla', 'lch', 'oklch'];
 
+/**
+ * Create an AST from a flat array of style tokens.
+ */
 export function createAST(
   tokens: StyleToken[],
   startIndex = 0,

src/tasty/parser/index.ts

@@ -1 +1,36 @@
-export function parseStyle(val) {}
+import { tokenize } from './tokenizer';
+import { renderStyleTokens, CustomUnitMap } from './renderer';
+import { createAST, StyleToken } from './ast';
+
+interface StyleParserProps {
+  units: CustomUnitMap;
+}
+
+export function CreateStyleParser({ units }: StyleParserProps) {
+  return {
+    parse(value) {
+      return createAST(tokenize(value));
+    },
+    render(tokens) {
+      return renderStyleTokens(tokens, { units });
+    },
+    excludeMods(tokens: StyleToken[], allMods: string[]) {
+      const mods: string[] = [];
+
+      for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+
+        if (token.type === 'text') {
+          const mod = token.value;
+
+          if (allMods.includes(mod)) {
+            mods.push(mod);
+            tokens.splice(i--, 1);
+          }
+        }
+      }
+
+      return mods;
+    },
+  };
+}

src/tasty/parser/renderer.ts

@@ -1,20 +1,11 @@
 import { StyleToken } from './ast';
 
-export const CUSTOM_UNITS: Record<string, string | ((key: string) => string)> =
-  {
-    r: 'var(--radius)',
-    bw: 'var(--border-width)',
-    ow: 'var(--outline-width)',
-    x: 'var(--gap)',
-    fs: 'var(--font-size)',
-    lh: 'var(--line-height)',
-    rp: 'var(--rem-pixel)',
-    gp: 'var(--column-gap)',
-  };
-
-export function renderCustomUnit(token: StyleToken) {
-  const converter =
-    CUSTOM_UNITS[token.unit as unknown as keyof typeof CUSTOM_UNITS];
+export type CustomUnitMap = Record<string, string | ((key: string) => string)>;
+
+export function renderCustomUnit(token: StyleToken, units?: CustomUnitMap) {
+  units = units || {};
+
+  const converter = token.unit ? units[token.unit] : undefined;
 
   if (!converter) {
     return token.value;
@@ -33,18 +24,24 @@ export function renderCustomUnit(token: StyleToken) {
 
 const INSTANT_VALUES = [')', ','];
 
-export function renderStyleTokens(tokens: StyleToken[]) {
+/**
+ * Render a style tokens to a string.
+ */
+export function renderStyleTokens(
+  tokens: StyleToken[],
+  { units }: { units?: CustomUnitMap } = {},
+) {
   let result = '';
 
   tokens.forEach((token) => {
     if (INSTANT_VALUES.includes(token.value)) {
       result += token.value;
     } else if (token.type === 'func') {
       result += token.children
-        ? `${token.value}(${renderStyleTokens(token.children)})`
+        ? `${token.value}(${renderStyleTokens(token.children, units)})`
         : '';
     } else if (token.type === 'value') {
-      result += renderCustomUnit(token);
+      result += renderCustomUnit(token, units);
     } else if (token.type === 'property') {
       result += `var(--${token.value.slice(1)})`;
     } else {

src/tasty/parser/tokenizer.ts

@@ -29,7 +29,10 @@ const TOKEN_MAP = [
   'space',
 ];
 
-export function tokenize(value: string) {
+/**
+ * Tokenize a style value into a flat array of tokens.
+ */
+export function tokenize(value: string): RawStyleToken[] {
   value = value.trim();
 
   if (!value) {
@@ -69,5 +72,7 @@ export function tokenize(value: string) {
     CACHE.set(value, tokens);
   }
 
-  return CACHE.get(value);
+  const cachedTokens = CACHE.get(value);
+
+  return cachedTokens ? cachedTokens : [];
 }