chore: wip

Author: glennmichael123

packages/headwind/src/parser.ts

@@ -1153,6 +1153,16 @@ function parseClassImpl(className: string): ParsedClass {
     'rounded-ee',
     'border-opacity',
     'ring-opacity',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'animate-iteration',
+    'animate-duration',
+    'animate-delay',
+    'text-emphasis',
+    'text-emphasis-color',
+    'word-spacing',
+    'column-gap',
+    'column-rule',
   ]
 
   // Special case for divide-x and divide-y (without values, they should be treated as compound)

packages/headwind/src/rules-grid.ts

@@ -18,6 +18,7 @@ export const gridTemplateColumnsRule: UtilityRule = (parsed) => {
       11: 'repeat(11, minmax(0, 1fr))',
       12: 'repeat(12, minmax(0, 1fr))',
       none: 'none',
+      subgrid: 'subgrid',
     }
     return parsed.value ? { 'grid-template-columns': cols[parsed.value] || parsed.value } : undefined
   }
@@ -84,6 +85,7 @@ export const gridTemplateRowsRule: UtilityRule = (parsed) => {
       5: 'repeat(5, minmax(0, 1fr))',
       6: 'repeat(6, minmax(0, 1fr))',
       none: 'none',
+      subgrid: 'subgrid',
     }
     return parsed.value ? { 'grid-template-rows': rows[parsed.value] || parsed.value } : undefined
   }

packages/headwind/src/rules-interactivity.ts

@@ -419,6 +419,40 @@ export const strokeWidthRule: UtilityRule = (parsed) => {
   }
 }
 
+// SVG stroke-dasharray
+export const strokeDasharrayRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'stroke-dasharray' && parsed.value) {
+    return { 'stroke-dasharray': parsed.value === 'none' ? 'none' : parsed.value }
+  }
+}
+
+// SVG stroke-dashoffset
+export const strokeDashoffsetRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'stroke-dashoffset' && parsed.value) {
+    return { 'stroke-dashoffset': parsed.value }
+  }
+}
+
+// SVG stroke-linecap
+export const strokeLinecapRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'stroke-linecap-butt': 'butt',
+    'stroke-linecap-round': 'round',
+    'stroke-linecap-square': 'square',
+  }
+  return values[parsed.raw] ? { 'stroke-linecap': values[parsed.raw] } : undefined
+}
+
+// SVG stroke-linejoin
+export const strokeLinejoinRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'stroke-linejoin-miter': 'miter',
+    'stroke-linejoin-round': 'round',
+    'stroke-linejoin-bevel': 'bevel',
+  }
+  return values[parsed.raw] ? { 'stroke-linejoin': values[parsed.raw] } : undefined
+}
+
 // Accessibility
 export const screenReaderRule: UtilityRule = (parsed) => {
   if (parsed.raw === 'sr-only') {
@@ -482,6 +516,10 @@ export const interactivityRules: UtilityRule[] = [
   fillRule,
   strokeRule,
   strokeWidthRule,
+  strokeDasharrayRule,
+  strokeDashoffsetRule,
+  strokeLinecapRule,
+  strokeLinejoinRule,
   screenReaderRule,
   forcedColorAdjustRule,
 ]

packages/headwind/src/rules-layout.ts

@@ -69,6 +69,78 @@ export const columnsRule: UtilityRule = (parsed, config) => {
   }
 }
 
+// Column fill
+export const columnFillRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'column-fill-auto': 'auto',
+    'column-fill-balance': 'balance',
+    'column-fill-balance-all': 'balance-all',
+  }
+  return values[parsed.raw] ? { 'column-fill': values[parsed.raw] } : undefined
+}
+
+// Column gap (different from grid gap)
+export const columnGapRule: UtilityRule = (parsed, config) => {
+  if (parsed.utility === 'column-gap' && parsed.value) {
+    return { 'column-gap': config.theme.spacing[parsed.value] || parsed.value }
+  }
+}
+
+// Column rule (border between columns)
+export const columnRuleRule: UtilityRule = (parsed, config) => {
+  // column-rule-width
+  if (parsed.utility === 'column-rule' && parsed.value) {
+    const widths: Record<string, string> = {
+      '0': '0px',
+      '1': '1px',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
+    }
+    if (widths[parsed.value]) {
+      return { 'column-rule-width': widths[parsed.value] }
+    }
+
+    // Check for colors
+    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 { 'column-rule-color': colorValue[shade] }
+      }
+    }
+
+    // Direct color
+    const directColor = config.theme.colors[parsed.value]
+    if (typeof directColor === 'string') {
+      return { 'column-rule-color': directColor }
+    }
+
+    // Style
+    const styles: Record<string, string> = {
+      solid: 'solid',
+      dashed: 'dashed',
+      dotted: 'dotted',
+      double: 'double',
+      hidden: 'hidden',
+      none: 'none',
+    }
+    if (styles[parsed.value]) {
+      return { 'column-rule-style': styles[parsed.value] }
+    }
+  }
+}
+
+// Column span
+export const columnSpanRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'column-span-all': 'all',
+    'column-span-none': 'none',
+  }
+  return values[parsed.raw] ? { 'column-span': values[parsed.raw] } : undefined
+}
+
 export const breakRule: UtilityRule = (parsed) => {
   const breaks: Record<string, Record<string, string>> = {
     'break-before-auto': { 'break-before': 'auto' },
@@ -289,6 +361,10 @@ export const zIndexRule: UtilityRule = (parsed) => {
 export const layoutRules: UtilityRule[] = [
   aspectRatioRule,
   columnsRule,
+  columnFillRule,
+  columnGapRule,
+  columnRuleRule,
+  columnSpanRule,
   breakRule,
   boxDecorationRule,
   boxSizingRule,

packages/headwind/src/rules-transforms.ts

@@ -314,6 +314,77 @@ export const animationRule: UtilityRule = (parsed) => {
   return undefined
 }
 
+// Animation play state
+export const animationPlayStateRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'animate-running': 'running',
+    'animate-paused': 'paused',
+  }
+  return values[parsed.raw] ? { 'animation-play-state': values[parsed.raw] } : undefined
+}
+
+// Animation direction
+export const animationDirectionRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'animate-normal': 'normal',
+    'animate-reverse': 'reverse',
+    'animate-alternate': 'alternate',
+    'animate-alternate-reverse': 'alternate-reverse',
+  }
+  return values[parsed.raw] ? { 'animation-direction': values[parsed.raw] } : undefined
+}
+
+// Animation fill mode
+export const animationFillModeRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'animate-fill-none': 'none',
+    'animate-fill-forwards': 'forwards',
+    'animate-fill-backwards': 'backwards',
+    'animate-fill-both': 'both',
+  }
+  return values[parsed.raw] ? { 'animation-fill-mode': values[parsed.raw] } : undefined
+}
+
+// Animation iteration count
+export const animationIterationRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'animate-iteration' && parsed.value) {
+    return { 'animation-iteration-count': parsed.value === 'infinite' ? 'infinite' : parsed.value }
+  }
+}
+
+// Animation duration
+export const animationDurationRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'animate-duration' && parsed.value) {
+    const durations: Record<string, string> = {
+      '75': '75ms', '100': '100ms', '150': '150ms', '200': '200ms',
+      '300': '300ms', '500': '500ms', '700': '700ms', '1000': '1000ms',
+    }
+    return { 'animation-duration': durations[parsed.value] || `${parsed.value}ms` }
+  }
+}
+
+// Animation delay
+export const animationDelayRule: UtilityRule = (parsed) => {
+  if (parsed.utility === 'animate-delay' && parsed.value) {
+    const delays: Record<string, string> = {
+      '75': '75ms', '100': '100ms', '150': '150ms', '200': '200ms',
+      '300': '300ms', '500': '500ms', '700': '700ms', '1000': '1000ms',
+    }
+    return { 'animation-delay': delays[parsed.value] || `${parsed.value}ms` }
+  }
+}
+
+// Animation timing function
+export const animationTimingRule: UtilityRule = (parsed) => {
+  const values: Record<string, string> = {
+    'animate-ease-linear': 'linear',
+    'animate-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'animate-ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'animate-ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+  }
+  return values[parsed.raw] ? { 'animation-timing-function': values[parsed.raw] } : undefined
+}
+
 export const transformsRules: UtilityRule[] = [
   transformRule,
   scaleRule,
@@ -331,4 +402,11 @@ export const transformsRules: UtilityRule[] = [
   transitionTimingRule,
   transitionDelayRule,
   animationRule,
+  animationPlayStateRule,
+  animationDirectionRule,
+  animationFillModeRule,
+  animationIterationRule,
+  animationDurationRule,
+  animationDelayRule,
+  animationTimingRule,
 ]