feat(parser): new style parser * 3

Author: tenphi

src/parser/classify.ts

@@ -16,6 +16,12 @@ export function classify(
   const token = raw.trim();
   if (!token) return { bucket: Bucket.Mod, processed: '' };
 
+  // 0. Direct var(--*-color) token
+  const varColorMatch = token.match(/^var\(--([a-z0-9-]+)-color\)$/);
+  if (varColorMatch) {
+    return { bucket: Bucket.Color, processed: token };
+  }
+
   // 1. URL
   if (token.startsWith('url(')) {
     return { bucket: Bucket.Value, processed: token };
@@ -34,9 +40,12 @@ export function classify(
     }
     const identMatch = token.match(/^@([a-z0-9-_]+)$/);
     if (identMatch) {
+      const name = identMatch[1];
+      const processed = `var(--${name})`;
+      const bucketType = name.endsWith('-color') ? Bucket.Color : Bucket.Value;
       return {
-        bucket: Bucket.Value,
-        processed: `var(--${identMatch[1]})`,
+        bucket: bucketType,
+        processed,
       };
     }
     // invalid custom property → modifier
@@ -60,10 +69,9 @@ export function classify(
     // hyphen variant e.g., #dark-05 → treat as base color
     const hyphenMatch = token.match(/^#([a-z0-9-]+?)-[0-9]+$/i);
     if (hyphenMatch) {
-      const base = hyphenMatch[1];
       return {
         bucket: Bucket.Color,
-        processed: `var(--${base}-color, rgb(var(--${base}-color-rgb)))`,
+        processed: `var(--${hyphenMatch[1]}-color)`,
       };
     }
 
@@ -76,10 +84,7 @@ export function classify(
       };
     }
     // simple color name token → css variable lookup with rgb fallback
-    return {
-      bucket: Bucket.Color,
-      processed: `var(--${name}-color, rgb(var(--${name}-color-rgb)))`,
-    };
+    return { bucket: Bucket.Color, processed: `var(--${name}-color)` };
   }
 
   // 4 & 5. Functions
@@ -158,6 +163,11 @@ export function classify(
     return { bucket: Bucket.Value, processed: token };
   }
 
+  // 8b. Special keyword colors
+  if (token === 'transparent' || token === 'currentcolor') {
+    return { bucket: Bucket.Color, processed: token };
+  }
+
   // 9. Fallback modifier
   return { bucket: Bucket.Mod, processed: token };
 }

src/parser/parser.test.ts

@@ -37,9 +37,9 @@ describe('StyleProcessor', () => {
     );
     expect(result.groups[0].colors).toEqual([
       'var(--dark-color)',
-      'rgb(var(--purple-color-rgb), 0)',
-      'rgb(var(--purple-color-rgb), .5)',
-      'rgb(var(--purple-color-rgb), .05)',
+      'rgb(var(--purple-color-rgb) / 0)',
+      'rgb(var(--purple-color-rgb) / .5)',
+      'rgb(var(--purple-color-rgb) / .05)',
       'rgb(10,20,30)',
       'hsl(10,20%,30%)',
     ]);
@@ -153,4 +153,18 @@ describe('StyleProcessor', () => {
       'calc(-0.5 * var(--radius))',
     ]);
   });
+
+  test('treats custom var/@ colors as colors', () => {
+    const res = parser.process('@clear-color var(--clear-color)');
+    expect(res.groups[0].colors).toEqual([
+      'var(--clear-color)',
+      'var(--clear-color)',
+    ]);
+  });
+
+  test('recognises transparent keyword as color', () => {
+    const r = parser.process('transparent 1x');
+    expect(r.groups[0].colors).toEqual(['transparent']);
+    expect(r.groups[0].values).toContain('var(--gap)');
+  });
 });

src/tasty/__snapshots__/tasty.test.tsx.snap

@@ -84,7 +84,7 @@ exports[`tasty() API should be able to override styles 1`] = `
 }
 
 .c0.c0 {
-  color: rgb(var(--black-color-rgb) / 0.1);
+  color: rgb(var(--black-color-rgb) / .1);
   --current-color: var(--black-color, black);
   --current-color-rgb: var(--black-color-rgb);
 }
@@ -335,7 +335,7 @@ exports[`tasty() API should pass styles from tasty 1`] = `
 }
 
 .c0.c0 {
-  color: rgb(var(--clear-color-rgb) / 0.1);
+  color: rgb(var(--clear-color-rgb) / .1);
   --current-color: var(--clear-color, clear);
   --current-color-rgb: var(--clear-color-rgb);
 }

src/tasty/styles.test.ts

@@ -11,13 +11,13 @@ import { radiusStyle } from './styles/radius';
 describe('Tasty style tests', () => {
   it('should handle border styles', () => {
     expect(borderStyle({ border: '1px solid #000' })).toEqual({
-      border: '1px solid var(--000-color, rgb(var(--000-color-rgb)))',
+      border: '1px solid var(--000-color, #000)',
     });
   });
 
   it('should handle outline styles', () => {
     expect(outlineStyle({ outline: '2px dashed #f00' })).toEqual({
-      outline: '2px dashed var(--f00-color, rgb(var(--f00-color-rgb)))',
+      outline: '2px dashed var(--f00-color, #f00)',
     });
   });
 

src/tasty/styles/scrollbar.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { scrollbarStyle } from './scrollbar';
 
 describe('scrollbarStyle', () => {
@@ -6,7 +7,7 @@ describe('scrollbarStyle', () => {
   });
 
   it('handles boolean true value as thin', () => {
-    const result = scrollbarStyle({ scrollbar: true });
+    const result: any = scrollbarStyle({ scrollbar: true })!;
     expect(result['scrollbar-width']).toBe('thin');
   });
 
@@ -19,7 +20,7 @@ describe('scrollbarStyle', () => {
   it('handles "none" modifier', () => {
     const result = scrollbarStyle({ scrollbar: 'none' });
     expect(result['scrollbar-width']).toBe('none');
-    expect(result['scrollbar-color']).toBe('transparent transparent');
+    expect((result as any)['scrollbar-color']).toBe('transparent transparent');
     expect(result['&::-webkit-scrollbar']['width']).toBe('0px');
   });
 
@@ -33,10 +34,10 @@ describe('scrollbarStyle', () => {
 
   it('handles custom colors', () => {
     const result = scrollbarStyle({ scrollbar: '#red #blue #green' });
-    expect(result['scrollbar-color']).toBe(
+    expect((result as any)['scrollbar-color']).toBe(
       'var(--red-color) var(--blue-color)',
     );
-    expect(result['&::-webkit-scrollbar-track']['background']).toBe(
+    expect((result as any)['&::-webkit-scrollbar-track']['background']).toBe(
       'var(--blue-color)',
     );
     expect(result['&::-webkit-scrollbar-thumb']['background']).toBe(
@@ -69,13 +70,13 @@ describe('scrollbarStyle', () => {
     const result = scrollbarStyle({
       scrollbar: 'styled #purple #dark #light-grey',
     });
-    expect(result['scrollbar-color']).toBe(
+    expect((result as any)['scrollbar-color']).toBe(
       'var(--purple-color) var(--dark-color)',
     );
-    expect(result['&::-webkit-scrollbar']['background']).toBe(
+    expect((result as any)['&::-webkit-scrollbar']['background']).toBe(
       'var(--dark-color)',
     );
-    expect(result['&::-webkit-scrollbar-track']['background']).toBe(
+    expect((result as any)['&::-webkit-scrollbar-track']['background']).toBe(
       'var(--dark-color)',
     );
     expect(result['&::-webkit-scrollbar-thumb']['background']).toBe(
@@ -89,13 +90,13 @@ describe('scrollbarStyle', () => {
   it('applies partial custom colors with defaults', () => {
     const result = scrollbarStyle({ scrollbar: 'styled #danger' });
     // Only thumb color specified, track should use default
-    expect(result['scrollbar-color']).toBe(
+    expect((result as any)['scrollbar-color']).toBe(
       'var(--danger-color) var(--scrollbar-track-color, transparent)',
     );
     expect(result['&::-webkit-scrollbar-thumb']['background']).toBe(
       'var(--danger-color)',
     );
-    expect(result['&::-webkit-scrollbar-track']['background']).toBe(
+    expect((result as any)['&::-webkit-scrollbar-track']['background']).toBe(
       'var(--scrollbar-track-color, transparent)',
     );
   });

src/tasty/utils/styles.ts

@@ -259,112 +259,38 @@ export function flattenStyleDetails(processed: ProcessedStyle) {
  * Parse color. Find it value, name and opacity.
  */
 export function parseColor(val: string, ignoreError = false): ParsedColor {
-  val = val.trim();
-
+  val = (val ?? '').trim();
   if (!val) return {};
 
-  if (val.startsWith('#')) {
-    val = val.slice(1);
-
-    const tmp = val.split('.');
-
-    let opacity = 100;
-
-    if (tmp.length > 1) {
-      if (tmp[1].length === 1) {
-        opacity = Number(tmp[1]) * 10;
-      } else {
-        opacity = Number(tmp[1]);
-      }
-
-      if (Number.isNaN(opacity)) {
-        opacity = 100;
-      }
-    }
-
-    const name = tmp[0];
+  // Utilize the new parser to extract the first color token.
+  const processed = parseStyle(val as any);
+  const firstColor = processed.groups.find((g) => g.colors.length)?.colors[0];
 
-    let color;
-
-    if (name === 'current') {
-      color = 'currentColor';
-    } else {
-      if (opacity > 100) {
-        opacity = 100;
-      } else if (opacity < 0) {
-        opacity = 0;
-      }
-    }
-
-    if (!color) {
-      color =
-        opacity !== 100
-          ? rgbColorProp(name, Math.round(opacity) / 100)
-          : colorProp(name, null, strToRgb(`#${name}`));
-    }
-
-    return {
-      color,
-      name,
-      opacity: opacity != null ? opacity : 100,
-    };
-  }
-
-  const flat = flattenStyleDetails(parseStyle(val));
-  let { values, mods, color } = flat;
-
-  let name, opacity;
-
-  if (color) {
-    return {
-      color: (!color.startsWith('var(') ? strToRgb(color) : color) || color,
-    };
-  }
-
-  values.forEach((token) => {
-    if (token.match(/^((var|rgb|rgba|hsl|hsla)\(|#[0-9a-f]{3,6})/)) {
-      color = !token.startsWith('var') ? strToRgb(token) : token;
-    } else if (token.endsWith('%')) {
-      opacity = parseInt(token);
-    }
-  });
-
-  if (color) {
-    return { color };
-  }
-
-  name = name || mods[0];
-
-  if (!name) {
+  if (!firstColor) {
     if (!ignoreError && devMode) {
-      console.warn('CubeUIKit: incorrect color value:', val);
+      console.warn('CubeUIKit: unable to parse color:', val);
     }
-
     return {};
   }
 
-  if (!opacity) {
-    let color;
+  // Extract color name (if present) from variable pattern.
+  let nameMatch = firstColor.match(/var\(--([a-z0-9-]+)-color/);
+  if (!nameMatch) {
+    nameMatch = firstColor.match(/var\(--([a-z0-9-]+)-color-rgb/);
+  }
 
-    if (name === 'current') {
-      color = 'currentColor';
-    } else if (name === 'inherit') {
-      color = 'inherit';
-    } else if (name !== 'transparent' && name !== 'currentColor') {
-      color = `var(--${name}-color, ${name})`;
-    } else {
-      color = name;
+  let opacity: number | undefined;
+  if (firstColor.startsWith('rgb')) {
+    const alphaMatch = firstColor.match(/\/\s*([0-9.]+)\)/);
+    if (alphaMatch) {
+      const v = parseFloat(alphaMatch[1]);
+      if (!isNaN(v)) opacity = v * 100;
     }
-
-    return {
-      name,
-      color,
-    };
   }
 
   return {
-    color: rgbColorProp(name, Math.round(opacity) / 100),
-    name,
+    color: firstColor,
+    name: nameMatch ? nameMatch[1] : undefined,
     opacity,
   };
 }