chore: improve arbitrary values

Author: chrisbbreuer

packages/crosswind/src/parser.ts

@@ -73,23 +73,48 @@ function needsArbitraryBrackets(value: string): boolean {
 /**
  * Convert underscores to spaces in arbitrary values (Tailwind convention).
  * e.g. grid-cols-[120px_1fr_200px] → "120px 1fr 200px"
- * Preserves underscores inside url(), var(), and other CSS functions.
+ *      max-h-[calc(100vh_-_120px)] → "calc(100vh - 120px)"
+ *
+ * Only `url(...)` preserves underscores — URLs legitimately contain them and
+ * auto-converting would corrupt paths. Every other CSS function (calc, clamp,
+ * min, max, var, linear-gradient, etc.) uses spaces around operators, so
+ * underscores there are always stand-ins for spaces.
+ *
+ * To emit a literal underscore in a non-url value, escape it as `\_`.
  */
 function convertArbitraryUnderscores(value: string): string {
   if (!value.includes('_')) return value
-  // If the value contains CSS functions, only replace underscores outside them
-  if (value.includes('(')) {
-    let result = ''
-    let depth = 0
-    for (let i = 0; i < value.length; i++) {
-      const ch = value[i]
-      if (ch === '(') depth++
-      else if (ch === ')') depth--
-      result += (ch === '_' && depth === 0) ? ' ' : ch
+
+  let result = ''
+  let i = 0
+  while (i < value.length) {
+    const ch = value[i]
+
+    // Escaped underscore → literal underscore, skip the backslash.
+    if (ch === '\\' && value[i + 1] === '_') {
+      result += '_'
+      i += 2
+      continue
     }
-    return result
+
+    // Detect url(...) and copy its contents verbatim, preserving underscores.
+    if (ch === 'u' && value.slice(i, i + 4) === 'url(') {
+      const start = i
+      let depth = 1
+      i += 4
+      while (i < value.length && depth > 0) {
+        if (value[i] === '(') depth++
+        else if (value[i] === ')') depth--
+        i++
+      }
+      result += value.slice(start, i)
+      continue
+    }
+
+    result += ch === '_' ? ' ' : ch
+    i++
   }
-  return value.replace(/_/g, ' ')
+  return result
 }
 
 /**
@@ -1006,7 +1031,10 @@ function parseClassImpl(className: string): ParsedClass {
       raw: className,
       variants: [],
       utility: arbitraryPropMatch[1],
-      value: arbitraryPropMatch[2],
+      // Arbitrary properties follow the same underscore-as-space convention
+      // as arbitrary values: `[background:center_/_cover]` needs to emit
+      // `center / cover`. url() content is preserved by the helper.
+      value: convertArbitraryUnderscores(arbitraryPropMatch[2]),
       important,
       arbitrary: true,
     }

packages/crosswind/src/rules-interactivity.ts

@@ -3,24 +3,31 @@ import { resolveColorValue } from './rules'
 
 // Filters, Tables, Interactivity, SVG, Accessibility utilities
 
+// Shared named-size map for `blur-*` and `backdrop-blur-*` (Tailwind parity).
+// Callers fall back to `<value>px` when the value isn't a named key.
+const BLUR_SIZES: Record<string, string> = {
+  'none': '0',
+  'sm': '4px',
+  'DEFAULT': '8px',
+  'md': '12px',
+  'lg': '16px',
+  'xl': '24px',
+  '2xl': '40px',
+  '3xl': '64px',
+}
+
 // Filter utilities
 export const filterRule: UtilityRule = (parsed) => {
   // Handle filter-none
   if (parsed.raw === 'filter-none') {
     return { filter: 'none' }
   }
-  if (parsed.utility === 'blur' && parsed.value) {
-    const blurMap: Record<string, string> = {
-      'none': '0',
-      'sm': '4px',
-      'DEFAULT': '8px',
-      'md': '12px',
-      'lg': '16px',
-      'xl': '24px',
-      '2xl': '40px',
-      '3xl': '64px',
-    }
-    return { filter: `blur(${blurMap[parsed.value] || parsed.value})` }
+  // `blur` (no value) → DEFAULT; `blur-sm` etc. use named sizes;
+  // `blur-12` → `blur(12px)`; `blur-[10px]` / `blur-[5em]` passes raw.
+  if (parsed.utility === 'blur') {
+    const key = parsed.value || 'DEFAULT'
+    const size = BLUR_SIZES[key] ?? (parsed.value ? (/^\d/.test(parsed.value) ? `${parsed.value}px` : parsed.value) : BLUR_SIZES.DEFAULT)
+    return { filter: `blur(${size})` }
   }
   if (parsed.utility === 'brightness' && parsed.value) {
     return { filter: `brightness(${Number(parsed.value) / 100})` }
@@ -62,8 +69,12 @@ export const backdropFilterRule: UtilityRule = (parsed): Record<string, string>
   if (parsed.raw === 'backdrop-filter-none') {
     return { 'backdrop-filter': 'none' }
   }
-  if (parsed.utility === 'backdrop-blur' && parsed.value) {
-    return { '-webkit-backdrop-filter': `blur(${parsed.value}px)`, 'backdrop-filter': `blur(${parsed.value}px)` }
+  // `backdrop-blur` (no value) → DEFAULT; `backdrop-blur-sm` etc. use named sizes;
+  // `backdrop-blur-12` or `backdrop-blur-[10px]` use raw value.
+  if (parsed.utility === 'backdrop-blur') {
+    const key = parsed.value || 'DEFAULT'
+    const size = BLUR_SIZES[key] ?? (parsed.value ? (/^\d/.test(parsed.value) ? `${parsed.value}px` : parsed.value) : BLUR_SIZES.DEFAULT)
+    return { '-webkit-backdrop-filter': `blur(${size})`, 'backdrop-filter': `blur(${size})` }
   }
   if (parsed.utility === 'backdrop-brightness' && parsed.value) {
     const v = `brightness(${Number(parsed.value) / 100})`

packages/crosswind/src/rules.ts

@@ -636,8 +636,16 @@ export const fontSizeRule: UtilityRule = (parsed, config) => {
 
 export const fontWeightRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'font' && parsed.value) {
-    // Handle arbitrary values first
+    // Handle arbitrary values. Type hints disambiguate the CSS property:
+    //   font-[family-name:Inter_Tight] → font-family
+    //   font-[string:"Press Start"]    → font-family (same vibe)
+    //   font-[600]                     → font-weight (default)
+    //   font-[number:800]              → font-weight
     if (parsed.arbitrary) {
+      const hint = parsed.typeHint
+      if (hint === 'family-name' || hint === 'string') {
+        return { 'font-family': parsed.value }
+      }
       return { 'font-weight': parsed.value }
     }
     const weights: Record<string, string> = {

packages/crosswind/test/arbitrary.test.ts

@@ -559,5 +559,143 @@ describe('Arbitrary Values and Properties', () => {
         expect(css).toContain('.\\[content\\:a\\>b\\]')
       })
     })
+
+    // =========================================================================
+    // Regression: Tailwind-style underscore → space conversion in arbitrary
+    // values. CSS class names can't contain spaces, so Tailwind's convention
+    // is to write `_` and have the engine convert it to ` ` when emitting the
+    // property value. The ONLY exception is `url(...)` — URLs legitimately
+    // contain underscores in paths, so those must be preserved verbatim.
+    //
+    // These tests were added after stx/drivly hit a `grid-cols-[300px_1fr]`
+    // bug where the value stayed as `300px_1fr` in the output (invalid CSS),
+    // and `max-h-[calc(100vh_-_120px)]` collapsed to `calc(100vh_-_120px)`
+    // (invalid operator) because the old parser preserved underscores inside
+    // ANY parentheses. See `convertArbitraryUnderscores` in parser.ts.
+    // =========================================================================
+    describe('Underscore-to-space conversion (regression)', () => {
+      it('converts underscores to spaces in multi-track grid columns', () => {
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('grid-cols-[300px_1fr]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('grid-template-columns: 300px 1fr;')
+        expect(css).not.toContain('grid-template-columns: 300px_1fr')
+      })
+
+      it('converts underscores to spaces with lg: variant', () => {
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('lg:grid-cols-[300px_1fr]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('grid-template-columns: 300px 1fr;')
+        expect(css).not.toContain('grid-template-columns: 300px_1fr')
+      })
+
+      it('converts underscores to spaces inside calc()', () => {
+        // Spaces around the `-` operator are required for valid CSS calc().
+        // Users write `_-_` in the class name; the output must have real spaces.
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('max-h-[calc(100vh_-_120px)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('max-height: calc(100vh - 120px);')
+      })
+
+      it('converts underscores to spaces inside clamp()', () => {
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('w-[clamp(200px,_50%,_800px)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('width: clamp(200px, 50%, 800px);')
+      })
+
+      it('converts underscores to spaces inside min()/max()', () => {
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('w-[min(100%,_500px)]')
+        gen.generate('h-[max(50vh,_300px)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('width: min(100%, 500px);')
+        expect(css).toContain('height: max(50vh, 300px);')
+      })
+
+      it('converts underscores to spaces in multi-value shadow (via arbitrary property)', () => {
+        // `0_4px_16px_rgba(...)` → `0 4px 16px rgba(...)` — nested parens
+        // around the color must not prevent the top-level underscores from
+        // becoming spaces. Tested via arbitrary property form since shadow-
+        // utility may not emit for complex rgba-containing values.
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('[box-shadow:0_4px_16px_rgba(0,0,0,0.06)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('box-shadow: 0 4px 16px rgba(0,0,0,0.06);')
+      })
+
+      it('converts underscores to spaces in linear-gradient argument list', () => {
+        // Tested via arbitrary property form since bg- doesn't emit
+        // background-image for gradient values.
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('[background-image:linear-gradient(135deg,_#fff,_#000)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('background-image: linear-gradient(135deg, #fff, #000);')
+      })
+
+      it('converts underscores inside nested CSS functions (repeat(auto-fit, minmax(...)))', () => {
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));')
+      })
+
+      it('PRESERVES underscores inside url() (URLs are path-bearing)', () => {
+        // The whole point of the url() exception — it's the one CSS function
+        // where underscores are meaningful rather than space stand-ins.
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('[background-image:url(https://example.com/foo_bar_baz.png)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('url(https://example.com/foo_bar_baz.png)')
+        expect(css).not.toContain('foo bar baz.png')
+      })
+
+      it('PRESERVES underscores in data-URL paths', () => {
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('[background:url(data:image/svg+xml;base64,my_encoded_data)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('url(data:image/svg+xml;base64,my_encoded_data)')
+      })
+
+      it('converts underscores outside url() while preserving them inside', () => {
+        // Mixed case — top-level underscores between shorthand parts become
+        // spaces, the underscores INSIDE the url() stay put.
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('[background:center_/_cover_url(/assets/cover_image.png)]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('background: center / cover url(/assets/cover_image.png);')
+      })
+
+      it('treats escaped underscores (\\_) as literal underscores', () => {
+        // Escape hatch: if you truly need a literal `_` in a non-url context,
+        // write `\_`. Used rarely but must work.
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('content-[my\\_literal\\_text]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('my_literal_text')
+      })
+
+      it('works with font-family type hint and underscores', () => {
+        // `font-[family-name:Inter_Tight]` → `font-family: Inter Tight`
+        const gen = new CSSGenerator(defaultConfig)
+        gen.generate('font-[family-name:Inter_Tight]')
+        const css = gen.toCSS(false)
+        expect(css).toContain('font-family: Inter Tight;')
+      })
+
+      it('parseClass exposes the space-converted value', () => {
+        // End-to-end: the parsed form should already carry the converted value.
+        const parsed = parseClass('grid-cols-[120px_1fr_200px]')
+        expect(parsed.value).toBe('120px 1fr 200px')
+
+        const parsedCalc = parseClass('max-h-[calc(100vh_-_120px)]')
+        expect(parsedCalc.value).toBe('calc(100vh - 120px)')
+
+        const parsedUrl = parseClass('bg-[url(/foo_bar.png)]')
+        expect(parsedUrl.value).toBe('url(/foo_bar.png)')
+      })
+    })
   })
 })

packages/crosswind/test/grid.test.ts

@@ -35,6 +35,50 @@ describe('Grid Utilities', () => {
       gen.generate('grid-cols-none')
       expect(gen.toCSS(false)).toContain('grid-template-columns: none;')
     })
+
+    // Regression: `grid-cols-[300px_1fr]` must emit a space-separated value.
+    // Tailwind's arbitrary-value underscore convention requires `_` → ` `,
+    // because CSS class names can't contain literal spaces. Previously
+    // crosswind preserved underscores inside any parentheses, which was fine
+    // for `grid-cols-[300px_1fr]` (no parens) but still mis-emitted because
+    // the grid-cols rule passed the value through verbatim.
+    it('should convert underscores to spaces in arbitrary multi-track columns', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('grid-cols-[300px_1fr]')
+      const css = gen.toCSS(false)
+      expect(css).toContain('grid-template-columns: 300px 1fr;')
+      expect(css).not.toMatch(/grid-template-columns:\s*300px_1fr/)
+    })
+
+    it('should convert underscores in arbitrary columns with three tracks', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('grid-cols-[200px_1fr_auto]')
+      expect(gen.toCSS(false)).toContain('grid-template-columns: 200px 1fr auto;')
+    })
+
+    it('should convert underscores in arbitrary columns under lg: variant', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('lg:grid-cols-[300px_1fr]')
+      const css = gen.toCSS(false)
+      expect(css).toContain('grid-template-columns: 300px 1fr;')
+      // The selector still contains the raw `_1fr]` in the escaped class name
+      expect(css).toContain('.lg\\:grid-cols-\\[300px_1fr\\]')
+    })
+
+    it('should convert underscores inside nested CSS functions (repeat/minmax)', () => {
+      // This exercises the inside-parens code path. Previously `_` inside
+      // parens stayed an underscore, producing `minmax(200px,_1fr)` — invalid.
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))]')
+      expect(gen.toCSS(false)).toContain('grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));')
+    })
+
+    it('should convert underscores in arbitrary rows the same way', () => {
+      // Mirror test for grid-rows so rule coverage stays symmetric.
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('grid-rows-[50px_1fr_40px]')
+      expect(gen.toCSS(false)).toContain('grid-template-rows: 50px 1fr 40px;')
+    })
   })
 
   describe('Grid Template Rows', () => {