chore: wip

Author: chrisbbreuer

packages/headwind/src/config.ts

@@ -23,6 +23,19 @@ export const defaultConfig: HeadwindConfig = {
         800: '#1f2937',
         900: '#111827',
       },
+      red: {
+        500: '#ef4444',
+        700: '#b91c1c',
+      },
+      blue: {
+        500: '#3b82f6',
+      },
+      green: {
+        500: '#22c55e',
+      },
+      yellow: {
+        100: '#fef9c3',
+      },
     },
     spacing: {
       0: '0',

packages/headwind/src/parser.ts

@@ -60,8 +60,13 @@ export function parseClass(className: string): ParsedClass {
     'row-end',
     'translate-x',
     'translate-y',
+    'translate-z',
     'scale-x',
     'scale-y',
+    'scale-z',
+    'rotate-x',
+    'rotate-y',
+    'rotate-z',
     'skew-x',
     'skew-y',
     'scroll-m',
@@ -89,6 +94,7 @@ export function parseClass(className: string): ParsedClass {
     'space-x',
     'space-y',
     'ring-offset',
+    'underline-offset',
     'backdrop-blur',
     'backdrop-brightness',
     'backdrop-contrast',
@@ -172,6 +178,20 @@ export function parseClass(className: string): ParsedClass {
     }
   }
 
+  // Check for color opacity modifiers: bg-blue-500/50, text-red-500/75
+  // Must come before fractional values to avoid conflict
+  const opacityMatch = utility.match(/^([a-z-]+?)-(.+?)\/(\d+)$/)
+  if (opacityMatch && ['bg', 'text', 'border', 'ring', 'placeholder', 'divide'].includes(opacityMatch[1])) {
+    return {
+      raw: className,
+      variants,
+      utility: opacityMatch[1],
+      value: `${opacityMatch[2]}/${opacityMatch[3]}`,
+      important,
+      arbitrary: false,
+    }
+  }
+
   // Check for fractional values: w-1/2, h-3/4
   const fractionMatch = utility.match(/^([a-z-]+?)-(\d+)\/(\d+)$/)
   if (fractionMatch) {

packages/headwind/src/rules-advanced.ts

@@ -43,6 +43,11 @@ export const minMaxSizingRule: UtilityRule = (parsed) => {
 // Ring utilities
 export const ringRule: UtilityRule = (parsed, config) => {
   if (parsed.utility === 'ring') {
+    // Handle ring-inset
+    if (parsed.value === 'inset') {
+      return { '--tw-ring-inset': 'inset' }
+    }
+
     const widths: Record<string, string> = {
       0: '0',
       1: '1px',
@@ -132,8 +137,44 @@ export const spaceRule: UtilityRule = (parsed, config) => {
   }
 }
 
+// Border style utilities
+export const borderStyleRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'border' && parsed.value) {
+    const styles: Record<string, string> = {
+      solid: 'solid',
+      dashed: 'dashed',
+      dotted: 'dotted',
+      double: 'double',
+      hidden: 'hidden',
+      none: 'none',
+    }
+    if (styles[parsed.value]) {
+      return { 'border-style': styles[parsed.value] }
+    }
+  }
+}
+
 // Divide utilities (borders between children)
 export const divideRule: UtilityRule = (parsed, config) => {
+  // Handle divide styles: divide-solid, divide-dashed, divide-dotted
+  if (parsed.utility === 'divide' && parsed.value) {
+    const styles: Record<string, string> = {
+      solid: 'solid',
+      dashed: 'dashed',
+      dotted: 'dotted',
+      double: 'double',
+      none: 'none',
+    }
+    if (styles[parsed.value]) {
+      return {
+        properties: {
+          'border-style': styles[parsed.value],
+        },
+        childSelector: '> :not([hidden]) ~ :not([hidden])',
+      }
+    }
+  }
+
   if (parsed.utility === 'divide-x') {
     const widths: Record<string, string> = {
       0: '0',
@@ -332,6 +373,7 @@ export const arbitraryPropertyRule: UtilityRule = (parsed) => {
 export const advancedRules: UtilityRule[] = [
   minMaxSizingRule,
   ringRule,
+  borderStyleRule,
   spaceRule,
   divideRule,
   gradientStopsRule,

packages/headwind/src/rules-transforms.ts

@@ -25,12 +25,25 @@ export const scaleRule: UtilityRule = (parsed) => {
     const scale = parsed.value ? Number(parsed.value) / 100 : 1
     return { transform: `scaleY(${scale})` }
   }
+  if (parsed.utility === 'scale-z') {
+    const scale = parsed.value ? Number(parsed.value) / 100 : 1
+    return { transform: `scaleZ(${scale})` }
+  }
 }
 
 export const rotateRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'rotate' && parsed.value) {
     return { transform: `rotate(${parsed.value}deg)` }
   }
+  if (parsed.utility === 'rotate-x' && parsed.value) {
+    return { transform: `rotateX(${parsed.value}deg)` }
+  }
+  if (parsed.utility === 'rotate-y' && parsed.value) {
+    return { transform: `rotateY(${parsed.value}deg)` }
+  }
+  if (parsed.utility === 'rotate-z' && parsed.value) {
+    return { transform: `rotateZ(${parsed.value}deg)` }
+  }
 }
 
 export const translateRule: UtilityRule = (parsed, config) => {
@@ -58,6 +71,18 @@ export const translateRule: UtilityRule = (parsed, config) => {
     }
     return { transform: `translateY(${value})` }
   }
+  if (parsed.utility === 'translate-z' && parsed.value) {
+    let value: string
+    if (parsed.value.startsWith('-')) {
+      const positiveValue = parsed.value.slice(1)
+      const spacing = config.theme.spacing[positiveValue]
+      value = spacing ? `-${spacing}` : parsed.value
+    }
+    else {
+      value = config.theme.spacing[parsed.value] || parsed.value
+    }
+    return { transform: `translateZ(${value})` }
+  }
 }
 
 export const skewRule: UtilityRule = (parsed) => {

packages/headwind/src/rules-typography.ts

@@ -105,7 +105,7 @@ export const listStyleTypeRule: UtilityRule = (parsed) => {
   }
 }
 
-export const textDecorationRule: UtilityRule = (parsed) => {
+export const textDecorationRule: UtilityRule = (parsed, config) => {
   const decorations: Record<string, string> = {
     underline: 'underline',
     overline: 'overline',
@@ -124,12 +124,63 @@ export const textDecorationRule: UtilityRule = (parsed) => {
       dashed: 'dashed',
       wavy: 'wavy',
     }
-    return { 'text-decoration-style': styles[parsed.value] || parsed.value }
+
+    // Check if it's a style
+    if (styles[parsed.value]) {
+      return { 'text-decoration-style': styles[parsed.value] }
+    }
+
+    // Check if it's a thickness
+    const thicknesses: Record<string, string> = {
+      auto: 'auto',
+      from: 'from-font',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    }
+    if (thicknesses[parsed.value]) {
+      return { 'text-decoration-thickness': thicknesses[parsed.value] }
+    }
+
+    // Otherwise treat it as a color: decoration-blue-500
+    const parts = parsed.value.split('-')
+    if (parts.length === 2) {
+      const [colorName, shade] = parts
+      const colorValue = config.theme.colors[colorName]
+      if (typeof colorValue === 'object' && colorValue[shade]) {
+        return { 'text-decoration-color': colorValue[shade] }
+      }
+    }
+
+    // Direct color
+    const directColor = config.theme.colors[parsed.value]
+    if (typeof directColor === 'string') {
+      return { 'text-decoration-color': directColor }
+    }
+
+    // Fallback
+    return { 'text-decoration-color': parsed.value }
   }
 
   return undefined
 }
 
+export const underlineOffsetRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'underline-offset' && parsed.value) {
+    const offsets: Record<string, string> = {
+      auto: 'auto',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    }
+    return { 'text-underline-offset': offsets[parsed.value] || parsed.value }
+  }
+}
+
 export const textTransformRule: UtilityRule = (parsed) => {
   const transforms: Record<string, string> = {
     uppercase: 'uppercase',
@@ -232,18 +283,47 @@ export const contentRule: UtilityRule = (parsed) => {
   }
 }
 
+export const lineHeightRule: UtilityRule = (parsed, config) => {
+  if (parsed.utility === 'leading') {
+    if (!parsed.value) {
+      return undefined
+    }
+
+    const lineHeights: Record<string, string> = {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+      3: '.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+    }
+
+    return { 'line-height': lineHeights[parsed.value] || parsed.value }
+  }
+}
+
 export const typographyRules: UtilityRule[] = [
   fontFamilyRule,
   fontSmoothingRule,
   fontStyleRule,
   fontStretchRule,
   fontVariantNumericRule,
   letterSpacingRule,
+  lineHeightRule,
   lineClampRule,
   listStyleImageRule,
   listStylePositionRule,
   listStyleTypeRule,
   textDecorationRule,
+  underlineOffsetRule,
   textTransformRule,
   textOverflowRule,
   textWrapRule,