chore: wip

Author: glennmichael123

bun.lock

@@ -41,6 +41,12 @@ export class CSSGenerator {
       }
     }
 
+    // Merge theme.extend into theme (allows users to add custom values without replacing defaults)
+    if (config.theme.extend) {
+      const { extend, ...baseTheme } = this.config.theme
+      this.config.theme = deepMerge(baseTheme, extend) as typeof this.config.theme
+    }
+
     // Pre-compile blocklist patterns for performance
     for (const pattern of this.config.blocklist) {
       if (pattern.includes('*')) {

packages/headwind/src/generator.ts

@@ -1142,6 +1142,9 @@ function parseClassImpl(className: string): ParsedClass {
     'mix-blend',
     'bg-blend',
     'line-clamp',
+    'border-spacing',
+    'border-spacing-x',
+    'border-spacing-y',
   ]
 
   // Special case for divide-x and divide-y (without values, they should be treated as compound)

packages/headwind/src/parser.ts

@@ -378,17 +378,51 @@ export const alignSelfRule: UtilityRule = (parsed) => {
   }
 }
 
-// Container utility
-// TODO: Requires nested media query support in generator
-export const containerRule: UtilityRule = (parsed, _config) => {
-  if (parsed.utility === 'container' && !parsed.value) {
-    // Simplified version without responsive max-widths
-    return {
-      'width': '100%',
-      'margin-left': 'auto',
-      'margin-right': 'auto',
-      'padding-left': '1rem',
-      'padding-right': '1rem',
+// Container utility with responsive max-widths
+export const containerRule: UtilityRule = (parsed, config) => {
+  if (parsed.utility === 'container') {
+    // container without value - centered container with responsive max-width
+    if (!parsed.value) {
+      // Use clamp for modern responsive max-width behavior
+      // Max-width scales with breakpoints: sm=640, md=768, lg=1024, xl=1280, 2xl=1536
+      const xl = config.theme.screens['xl'] || '1280px'
+      return {
+        'width': '100%',
+        'margin-left': 'auto',
+        'margin-right': 'auto',
+        'max-width': xl,
+      }
+    }
+
+    // container-{breakpoint} for specific max-widths
+    const breakpointMap: Record<string, string> = {
+      'sm': config.theme.screens['sm'] || '640px',
+      'md': config.theme.screens['md'] || '768px',
+      'lg': config.theme.screens['lg'] || '1024px',
+      'xl': config.theme.screens['xl'] || '1280px',
+      '2xl': config.theme.screens['2xl'] || '1536px',
+      'full': '100%',
+      'prose': '65ch',
+      '3xl': '1920px',
+    }
+
+    if (breakpointMap[parsed.value]) {
+      return {
+        'width': '100%',
+        'margin-left': 'auto',
+        'margin-right': 'auto',
+        'max-width': breakpointMap[parsed.value],
+      }
+    }
+
+    // Arbitrary value support: container-[800px]
+    if (parsed.arbitrary) {
+      return {
+        'width': '100%',
+        'margin-left': 'auto',
+        'margin-right': 'auto',
+        'max-width': parsed.value,
+      }
     }
   }
 }

packages/headwind/src/rules-advanced.ts

@@ -95,7 +95,16 @@ export const borderCollapseRule: UtilityRule = (parsed) => {
 
 export const borderSpacingRule: UtilityRule = (parsed, config) => {
   if (parsed.utility === 'border-spacing' && parsed.value) {
-    return { 'border-spacing': config.theme.spacing[parsed.value] || parsed.value }
+    const value = config.theme.spacing[parsed.value] || parsed.value
+    return { 'border-spacing': `${value} ${value}` }
+  }
+  if (parsed.utility === 'border-spacing-x' && parsed.value) {
+    const value = config.theme.spacing[parsed.value] || parsed.value
+    return { 'border-spacing': `${value} 0` }
+  }
+  if (parsed.utility === 'border-spacing-y' && parsed.value) {
+    const value = config.theme.spacing[parsed.value] || parsed.value
+    return { 'border-spacing': `0 ${value}` }
   }
 }
 

packages/headwind/src/rules-interactivity.ts

@@ -14,8 +14,58 @@ export const aspectRatioRule: UtilityRule = (parsed) => {
 }
 
 export const columnsRule: UtilityRule = (parsed, config) => {
-  if (parsed.utility === 'columns') {
-    return parsed.value ? { columns: config.theme.spacing[parsed.value] || parsed.value } : undefined
+  if (parsed.utility === 'columns' && parsed.value) {
+    // Named column counts
+    const columnCounts: Record<string, string> = {
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      'auto': 'auto',
+    }
+
+    // Named column widths (like Tailwind)
+    const columnWidths: Record<string, string> = {
+      '3xs': '16rem',
+      '2xs': '18rem',
+      'xs': '20rem',
+      'sm': '24rem',
+      'md': '28rem',
+      'lg': '32rem',
+      'xl': '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+    }
+
+    // Check column counts first
+    if (columnCounts[parsed.value]) {
+      return { columns: columnCounts[parsed.value] }
+    }
+
+    // Check named widths
+    if (columnWidths[parsed.value]) {
+      return { columns: columnWidths[parsed.value] }
+    }
+
+    // Check spacing config
+    if (config.theme.spacing[parsed.value]) {
+      return { columns: config.theme.spacing[parsed.value] }
+    }
+
+    // Arbitrary value support
+    return { columns: parsed.value }
   }
 }
 

packages/headwind/src/rules-layout.ts

@@ -89,6 +89,8 @@ export interface Theme {
   screens: Record<string, string>
   borderRadius: Record<string, string>
   boxShadow: Record<string, string>
+  /** Extend theme values without replacing defaults */
+  extend?: Partial<Omit<Theme, 'extend'>>
 }
 
 export interface VariantConfig {