chore: wip

Author: chrisbbreuer

packages/headwind/src/generator.ts

@@ -389,7 +389,17 @@ export class CSSGenerator {
     // Add preflight CSS first (if requested)
     if (includePreflight) {
       for (const preflight of this.config.preflights) {
-        const preflightCSS = preflight.getCSS()
+        let preflightCSS = preflight.getCSS()
+        // Replace hardcoded font-family in preflight with theme's sans font
+        const sansFonts = this.config.theme?.fontFamily?.sans
+        if (sansFonts && Array.isArray(sansFonts)) {
+          const fontFamilyValue = sansFonts.join(', ')
+          // Replace the default ui-sans-serif stack in html/:host selector
+          preflightCSS = preflightCSS.replace(
+            /font-family:\s*ui-sans-serif[^;]+;/g,
+            `font-family: ${fontFamilyValue};`,
+          )
+        }
         parts.push(minify ? preflightCSS.replace(/\s+/g, ' ').trim() : preflightCSS)
       }
     }

packages/headwind/src/rules-layout.ts

@@ -169,15 +169,40 @@ export const insetRule: UtilityRule = (parsed, config) => {
   if (!props || !parsed.value)
     return undefined
 
+  // Helper to resolve inset value (handles fractions, spacing, keywords)
+  const resolveInsetValue = (val: string): string => {
+    // Handle fractions: 1/2 -> 50%, 1/3 -> 33.333333%, etc.
+    if (val.includes('/')) {
+      const [num, denom] = val.split('/').map(Number)
+      if (!Number.isNaN(num) && !Number.isNaN(denom) && denom !== 0) {
+        return `${(num / denom) * 100}%`
+      }
+    }
+    // Handle special keywords
+    if (val === 'full')
+      return '100%'
+    if (val === 'auto')
+      return 'auto'
+    // Check spacing config, then fall back to raw value
+    return config.theme.spacing[val] || val
+  }
+
   // Handle negative values
   let value: string
   if (parsed.value.startsWith('-')) {
     const positiveValue = parsed.value.slice(1)
-    const spacing = config.theme.spacing[positiveValue]
-    value = spacing ? `-${spacing}` : parsed.value
+    const resolved = resolveInsetValue(positiveValue)
+    // For percentage values, negate properly
+    if (resolved.endsWith('%')) {
+      const numericPart = Number.parseFloat(resolved)
+      value = `${-numericPart}%`
+    }
+    else {
+      value = resolved.startsWith('-') ? resolved : `-${resolved}`
+    }
   }
   else {
-    value = config.theme.spacing[parsed.value] || parsed.value
+    value = resolveInsetValue(parsed.value)
   }
 
   const result: Record<string, string> = {}

packages/headwind/test/layout.test.ts

@@ -89,6 +89,42 @@ describe('Layout Utilities', () => {
       gen.generate('-top-4')
       expect(gen.toCSS(false)).toContain('top: -1rem;')
     })
+
+    it('should generate left-1/2 as 50%', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('left-1/2')
+      expect(gen.toCSS(false)).toContain('left: 50%;')
+    })
+
+    it('should generate top-1/3 as 33.333333%', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('top-1/3')
+      expect(gen.toCSS(false)).toContain('top: 33.33333333333333%;')
+    })
+
+    it('should generate right-3/4 as 75%', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('right-3/4')
+      expect(gen.toCSS(false)).toContain('right: 75%;')
+    })
+
+    it('should generate negative -left-1/2 as -50%', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('-left-1/2')
+      expect(gen.toCSS(false)).toContain('left: -50%;')
+    })
+
+    it('should generate left-full as 100%', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('left-full')
+      expect(gen.toCSS(false)).toContain('left: 100%;')
+    })
+
+    it('should generate top-auto', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('top-auto')
+      expect(gen.toCSS(false)).toContain('top: auto;')
+    })
   })
 
   describe('Z-index', () => {