feat(parser): new style parser * 5

Author: tenphi

src/parser/classify.ts

@@ -6,7 +6,7 @@ import {
   VALUE_KEYWORDS,
 } from './const';
 import { StyleParser } from './parser';
-import { Bucket, ParserOptions, ProcessedStyle, StyleDetails } from './types';
+import { Bucket, ParserOptions, ProcessedStyle } from './types';
 
 export function classify(
   raw: string,

src/parser/const.ts

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

src/parser/parser.test.ts

@@ -55,16 +55,17 @@ describe('StyleProcessor', () => {
 
   test('parses value modifiers', () => {
     const result = parser.process(
-      'none auto max-content min-content fit-content stretch',
+      'none auto max-content min-content fit-content stretch space-between',
     );
     expect(result.groups[0].values).toEqual([
       'none',
       'auto',
       'max-content',
       'min-content',
       'fit-content',
+      'stretch',
     ]);
-    expect(result.groups[0].mods).toEqual(['stretch']);
+    expect(result.groups[0].mods).toEqual(['space-between']);
   });
 
   test('parses modifiers', () => {

src/tasty/styles/dimension.test.ts

@@ -0,0 +1,74 @@
+import { heightStyle } from './height';
+import { widthStyle } from './width';
+
+const { parseStyle } = require('../utils/styles');
+
+describe('dimensionStyle – width & height helpers', () => {
+  test('single value width', () => {
+    const res = widthStyle({ width: '10x' }) as any;
+    expect(res.width).toBe('calc(10 * var(--gap))');
+    expect(res['min-width']).toBe('initial');
+    expect(res['max-width']).toBe('initial');
+  });
+
+  test('min & max width (two values)', () => {
+    const res = widthStyle({ width: '1x 10x' }) as any;
+    expect(res.width).toBe('auto');
+    expect(res['min-width']).toBe('var(--gap)');
+    expect(res['max-width']).toBe('calc(10 * var(--gap))');
+  });
+
+  test('min modifier width', () => {
+    const res = widthStyle({ width: 'min 2x' }) as any;
+    expect(res.width).toBe('auto');
+    expect(res['min-width']).toBe('calc(2 * var(--gap))');
+    expect(res['max-width']).toBe('initial');
+  });
+
+  test('max modifier width', () => {
+    const res = widthStyle({ width: 'max 2x' }) as any;
+    expect(res.width).toBe('auto');
+    expect(res['min-width']).toBe('initial');
+    expect(res['max-width']).toBe('calc(2 * var(--gap))');
+  });
+
+  test('stretch width keyword', () => {
+    const res = widthStyle({ width: 'stretch' }) as any;
+    expect(res.width).toEqual([
+      'stretch',
+      '-webkit-fill-available',
+      '-moz-available',
+    ]);
+  });
+
+  test('boolean true width (auto)', () => {
+    const res = widthStyle({ width: true }) as any;
+    expect(res.width).toBe('auto');
+  });
+
+  test('responsive array width', () => {
+    const res = widthStyle({ width: '1x 2x' }) as any;
+    expect(res.width).toBe('auto');
+    expect(res['min-width']).toBe('var(--gap)');
+    expect(res['max-width']).toBe('calc(2 * var(--gap))');
+  });
+
+  test('single value height', () => {
+    const res = heightStyle({ height: '100px' }) as any;
+    expect(res.height).toBe('100px');
+    expect(res['min-height']).toBe('initial');
+    expect(res['max-height']).toBe('initial');
+  });
+
+  test('min value 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)');
+    expect(res['max-height']).toBe('calc(10 * var(--gap))');
+  });
+
+  test('boolean true height (auto)', () => {
+    const res = heightStyle({ height: true }) as any;
+    expect(res.height).toBe('auto');
+  });
+});

src/tasty/styles/dimension.ts

@@ -1,34 +1,21 @@
-import { parseStyle, transferMods } from '../utils/styles';
+import { parseStyle } from '../utils/styles';
 
 const DEFAULT_MIN_SIZE = 'var(--gap)';
 const DEFAULT_MAX_SIZE = '100%';
 
-function isSizingSupport(val) {
-  return typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
-    ? CSS.supports('height', val)
-    : false;
-}
-
-const STRETCH = 'stretch';
-const FILL_AVAILABLE = 'fill-available';
-const WEBKIT_FILL_AVAILABLE = '-webkit-fill-available';
-const MOZ_FILL_AVAILABLE = '-moz-fill-available';
-const STRETCH_SIZE = isSizingSupport(STRETCH)
-  ? STRETCH
-  : isSizingSupport(FILL_AVAILABLE)
-    ? FILL_AVAILABLE
-    : isSizingSupport(WEBKIT_FILL_AVAILABLE)
-      ? WEBKIT_FILL_AVAILABLE
-      : isSizingSupport(MOZ_FILL_AVAILABLE)
-        ? MOZ_FILL_AVAILABLE
-        : null;
-const INTRINSIC_MODS = ['max-content', 'min-content', 'fit-content', 'stretch'];
-
 export function dimensionStyle(name) {
   const minStyle = `min-${name}`;
   const maxStyle = `max-${name}`;
 
   return (val) => {
+    if (val === true) {
+      return {
+        [name]: 'auto',
+        [minStyle]: 'initial',
+        [maxStyle]: 'initial',
+      };
+    }
+
     if (!val) return '';
 
     if (typeof val === 'number') {
@@ -37,7 +24,7 @@ export function dimensionStyle(name) {
 
     val = String(val);
 
-    const styles = {
+    const styles: Record<string, string | string[]> = {
       [name]: 'auto',
       [minStyle]: 'initial',
       [maxStyle]: 'initial',
@@ -47,14 +34,6 @@ export function dimensionStyle(name) {
     const { mods, values } =
       processed.groups[0] ?? ({ mods: [], values: [] } as any);
 
-    transferMods(INTRINSIC_MODS, mods, values);
-
-    values.forEach((v, i) => {
-      if (v === 'stretch') {
-        values[i] = STRETCH_SIZE || (name === 'height' ? '100vh' : '100vw');
-      }
-    });
-
     let flag = false;
 
     for (let mod of mods) {
@@ -85,6 +64,10 @@ export function dimensionStyle(name) {
       }
     }
 
+    if (styles[name] === 'stretch') {
+      styles[name] = ['stretch', '-webkit-fill-available', '-moz-available'];
+    }
+
     return styles;
   };
 }