feat(parser): new style parser * 6

Author: tenphi

src/components/layout/Prefix.tsx

@@ -55,7 +55,7 @@ export const Prefix = forwardRef(function Prefix(
       styles={styles}
       style={{
         // @ts-ignore
-        '--prefix-gap': parseStyle(outerGap).value,
+        '--prefix-gap': parseStyle(outerGap).output,
       }}
     >
       {children}

src/components/layout/Suffix.tsx

@@ -53,7 +53,7 @@ export const Suffix = forwardRef(function Suffix(
       ref={ref}
       styles={styles}
       style={{
-        '--suffix-gap': parseStyle(outerGap).value,
+        '--suffix-gap': parseStyle(outerGap).output,
       }}
     >
       {children}

src/parser/const.ts

@@ -5,6 +5,7 @@ export const VALUE_KEYWORDS = new Set([
   'min-content',
   'fit-content',
   'stretch',
+  'initial',
 ]);
 
 export const COLOR_FUNCS = new Set([

src/tasty/styles/dimension.test.ts

@@ -32,6 +32,13 @@ describe('dimensionStyle – width & height helpers', () => {
     expect(res['max-width']).toBe('calc(2 * var(--gap))');
   });
 
+  test('width three args', () => {
+    const res = widthStyle({ width: 'initial 36x max-content' }) as any;
+    expect(res.width).toBe('calc(36 * var(--gap))');
+    expect(res['min-width']).toBe('initial');
+    expect(res['max-width']).toBe('max-content');
+  });
+
   test('stretch width keyword', () => {
     const res = widthStyle({ width: 'stretch' }) as any;
     expect(res.width).toEqual([
@@ -60,7 +67,7 @@ describe('dimensionStyle – width & height helpers', () => {
     expect(res['max-height']).toBe('initial');
   });
 
-  test('min value height three args', () => {
+  test('height three args', () => {
     const res = heightStyle({ height: '1x 5x 10x' }) as any;
     expect(res.height).toBe('calc(5 * var(--gap))');
     expect(res['min-height']).toBe('var(--gap)');
@@ -71,4 +78,9 @@ describe('dimensionStyle – width & height helpers', () => {
     const res = heightStyle({ height: true }) as any;
     expect(res.height).toBe('auto');
   });
+
+  test('stretch height keyword', () => {
+    const res = heightStyle({ height: 'stretch' }) as any;
+    expect(res.height).toBe('auto');
+  });
 });

src/tasty/styles/dimension.ts

@@ -65,7 +65,11 @@ export function dimensionStyle(name) {
     }
 
     if (styles[name] === 'stretch') {
-      styles[name] = ['stretch', '-webkit-fill-available', '-moz-available'];
+      if (name === 'width') {
+        styles[name] = ['stretch', '-webkit-fill-available', '-moz-available'];
+      } else {
+        styles[name] = 'auto';
+      }
     }
 
     return styles;