chore: wip

Author: glennmichael123

packages/headwind/src/parser.ts

@@ -1145,6 +1145,14 @@ function parseClassImpl(className: string): ParsedClass {
     'border-spacing',
     'border-spacing-x',
     'border-spacing-y',
+    'rounded-s',
+    'rounded-e',
+    'rounded-ss',
+    'rounded-se',
+    'rounded-es',
+    'rounded-ee',
+    'border-opacity',
+    'ring-opacity',
   ]
 
   // Special case for divide-x and divide-y (without values, they should be treated as compound)

packages/headwind/src/rules-advanced.ts

@@ -116,6 +116,28 @@ export const ringRule: UtilityRule = (parsed, config) => {
       return { '--hw-ring-offset-color': directColor } as Record<string, string>
     }
   }
+
+  // Ring opacity
+  if (parsed.utility === 'ring-opacity' && parsed.value) {
+    const opacityMap: Record<string, string> = {
+      0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25',
+      30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7',
+      75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1',
+    }
+    return { '--hw-ring-opacity': opacityMap[parsed.value] || parsed.value } as Record<string, string>
+  }
+}
+
+// Border opacity utility
+export const borderOpacityRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'border-opacity' && parsed.value) {
+    const opacityMap: Record<string, string> = {
+      0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25',
+      30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7',
+      75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1',
+    }
+    return { '--hw-border-opacity': opacityMap[parsed.value] || parsed.value } as Record<string, string>
+  }
 }
 
 // Space utilities (child spacing)
@@ -441,6 +463,7 @@ export const arbitraryPropertyRule: UtilityRule = (parsed) => {
 export const advancedRules: UtilityRule[] = [
   minMaxSizingRule,
   ringRule,
+  borderOpacityRule,
   borderStyleRule,
   spaceRule,
   divideRule,

packages/headwind/src/rules-transforms.ts

@@ -235,7 +235,19 @@ export const transitionPropertyRule: UtilityRule = (parsed) => {
 
 export const transitionDurationRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'duration' && parsed.value) {
-    return { 'transition-duration': `${parsed.value}ms` }
+    // Named duration presets (like Tailwind)
+    const durations: Record<string, string> = {
+      '0': '0s',
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    }
+    return { 'transition-duration': durations[parsed.value] || `${parsed.value}ms` }
   }
 }
 
@@ -251,7 +263,19 @@ export const transitionTimingRule: UtilityRule = (parsed) => {
 
 export const transitionDelayRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'delay' && parsed.value) {
-    return { 'transition-delay': `${parsed.value}ms` }
+    // Named delay presets (like Tailwind)
+    const delays: Record<string, string> = {
+      '0': '0s',
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    }
+    return { 'transition-delay': delays[parsed.value] || `${parsed.value}ms` }
   }
 }
 

packages/headwind/src/rules.ts

@@ -272,6 +272,28 @@ export const sizingRule: UtilityRule = (parsed, config) => {
     return { height: value } as Record<string, string>
   }
 
+  // Size utility (width + height shorthand)
+  if (parsed.utility === 'size' && parsed.value) {
+    const sizeMap: Record<string, string> = {
+      full: '100%',
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }
+    // Handle fractions: 1/2 -> 50%
+    if (parsed.value.includes('/')) {
+      const [num, denom] = parsed.value.split('/').map(Number)
+      if (Number.isNaN(num) || Number.isNaN(denom) || denom === 0) {
+        return undefined
+      }
+      const percent = `${(num / denom) * 100}%`
+      return { width: percent, height: percent } as Record<string, string>
+    }
+    const value = config.theme.spacing[parsed.value] || sizeMap[parsed.value] || parsed.value
+    return { width: value, height: value } as Record<string, string>
+  }
+
   return undefined
 }
 
@@ -631,6 +653,44 @@ export const borderRadiusRule: UtilityRule = (parsed, config) => {
     const value = parsed.value ? config.theme.borderRadius[parsed.value] : config.theme.borderRadius.DEFAULT
     return value ? { 'border-radius': value } : undefined
   }
+
+  // Logical border-radius utilities (for RTL/LTR support)
+  // rounded-s-* (start) - applies to start corners
+  if (parsed.utility === 'rounded-s' && parsed.value) {
+    const value = config.theme.borderRadius[parsed.value] || parsed.value
+    return {
+      'border-start-start-radius': value,
+      'border-end-start-radius': value,
+    } as Record<string, string>
+  }
+  // rounded-e-* (end) - applies to end corners
+  if (parsed.utility === 'rounded-e' && parsed.value) {
+    const value = config.theme.borderRadius[parsed.value] || parsed.value
+    return {
+      'border-start-end-radius': value,
+      'border-end-end-radius': value,
+    } as Record<string, string>
+  }
+  // rounded-ss-* (start-start corner)
+  if (parsed.utility === 'rounded-ss' && parsed.value) {
+    const value = config.theme.borderRadius[parsed.value] || parsed.value
+    return { 'border-start-start-radius': value } as Record<string, string>
+  }
+  // rounded-se-* (start-end corner)
+  if (parsed.utility === 'rounded-se' && parsed.value) {
+    const value = config.theme.borderRadius[parsed.value] || parsed.value
+    return { 'border-start-end-radius': value } as Record<string, string>
+  }
+  // rounded-es-* (end-start corner)
+  if (parsed.utility === 'rounded-es' && parsed.value) {
+    const value = config.theme.borderRadius[parsed.value] || parsed.value
+    return { 'border-end-start-radius': value } as Record<string, string>
+  }
+  // rounded-ee-* (end-end corner)
+  if (parsed.utility === 'rounded-ee' && parsed.value) {
+    const value = config.theme.borderRadius[parsed.value] || parsed.value
+    return { 'border-end-end-radius': value } as Record<string, string>
+  }
 }
 
 // Export all rules (order matters - more specific rules first)