chore: wip

Author: chrisbbreuer

packages/headwind/src/parser.ts

@@ -86,6 +86,8 @@ export function parseClass(className: string): ParsedClass {
     'grid-flow',
     'auto-cols',
     'auto-rows',
+    'col-span',
+    'row-span',
     'col-start',
     'col-end',
     'row-start',

packages/headwind/src/rules-grid.ts

@@ -43,6 +43,29 @@ export const gridColumnRule: UtilityRule = (parsed) => {
     }
     return parsed.value ? { 'grid-column': spans[parsed.value] || parsed.value } : undefined
   }
+  if (parsed.utility === 'col-span' && parsed.value) {
+    const spans: Record<string, string> = {
+      auto: 'auto',
+      1: 'span 1 / span 1',
+      2: 'span 2 / span 2',
+      3: 'span 3 / span 3',
+      4: 'span 4 / span 4',
+      5: 'span 5 / span 5',
+      6: 'span 6 / span 6',
+      7: 'span 7 / span 7',
+      8: 'span 8 / span 8',
+      9: 'span 9 / span 9',
+      10: 'span 10 / span 10',
+      11: 'span 11 / span 11',
+      12: 'span 12 / span 12',
+      full: '1 / -1',
+    }
+    // Handle arbitrary values: col-span-[15] -> span 15 / span 15
+    if (parsed.arbitrary) {
+      return { 'grid-column': `span ${parsed.value} / span ${parsed.value}` }
+    }
+    return { 'grid-column': spans[parsed.value] || parsed.value }
+  }
   if (parsed.utility === 'col-start' && parsed.value) {
     return { 'grid-column-start': parsed.value }
   }
@@ -80,6 +103,23 @@ export const gridRowRule: UtilityRule = (parsed) => {
     }
     return parsed.value ? { 'grid-row': spans[parsed.value] || parsed.value } : undefined
   }
+  if (parsed.utility === 'row-span' && parsed.value) {
+    const spans: Record<string, string> = {
+      auto: 'auto',
+      1: 'span 1 / span 1',
+      2: 'span 2 / span 2',
+      3: 'span 3 / span 3',
+      4: 'span 4 / span 4',
+      5: 'span 5 / span 5',
+      6: 'span 6 / span 6',
+      full: '1 / -1',
+    }
+    // Handle arbitrary values: row-span-[15] -> span 15 / span 15
+    if (parsed.arbitrary) {
+      return { 'grid-row': `span ${parsed.value} / span ${parsed.value}` }
+    }
+    return { 'grid-row': spans[parsed.value] || parsed.value }
+  }
   if (parsed.utility === 'row-start' && parsed.value) {
     return { 'grid-row-start': parsed.value }
   }

packages/headwind/src/rules-transforms.ts

@@ -14,109 +14,170 @@ export const transformRule: UtilityRule = (parsed) => {
 
 export const scaleRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'scale') {
-    const scale = parsed.value ? Number(parsed.value) / 100 : 1
+    if (!parsed.value) return { transform: 'scale(1)' }
+    // If arbitrary, use value as-is
+    if (parsed.arbitrary) {
+      return { transform: `scale(${parsed.value})` }
+    }
+    const scale = Number(parsed.value) / 100
     return { transform: `scale(${scale})` }
   }
   if (parsed.utility === 'scale-x') {
-    const scale = parsed.value ? Number(parsed.value) / 100 : 1
+    if (!parsed.value) return { transform: 'scaleX(1)' }
+    if (parsed.arbitrary) {
+      return { transform: `scaleX(${parsed.value})` }
+    }
+    const scale = Number(parsed.value) / 100
     return { transform: `scaleX(${scale})` }
   }
   if (parsed.utility === 'scale-y') {
-    const scale = parsed.value ? Number(parsed.value) / 100 : 1
+    if (!parsed.value) return { transform: 'scaleY(1)' }
+    if (parsed.arbitrary) {
+      return { transform: `scaleY(${parsed.value})` }
+    }
+    const scale = Number(parsed.value) / 100
     return { transform: `scaleY(${scale})` }
   }
   if (parsed.utility === 'scale-z') {
-    const scale = parsed.value ? Number(parsed.value) / 100 : 1
+    if (!parsed.value) return { transform: 'scaleZ(1)' }
+    if (parsed.arbitrary) {
+      return { transform: `scaleZ(${parsed.value})` }
+    }
+    const scale = Number(parsed.value) / 100
     return { transform: `scaleZ(${scale})` }
   }
 }
 
 export const rotateRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'rotate' && parsed.value) {
-    return { transform: `rotate(${parsed.value}deg)` }
+    // If arbitrary or already has unit, use as-is, otherwise add deg
+    const value = parsed.arbitrary || parsed.value.includes('deg') || parsed.value.includes('rad') || parsed.value.includes('turn')
+      ? parsed.value
+      : `${parsed.value}deg`
+    return { transform: `rotate(${value})` }
   }
   if (parsed.utility === 'rotate-x' && parsed.value) {
-    return { transform: `rotateX(${parsed.value}deg)` }
+    const value = parsed.arbitrary || parsed.value.includes('deg') || parsed.value.includes('rad') || parsed.value.includes('turn')
+      ? parsed.value
+      : `${parsed.value}deg`
+    return { transform: `rotateX(${value})` }
   }
   if (parsed.utility === 'rotate-y' && parsed.value) {
-    return { transform: `rotateY(${parsed.value}deg)` }
+    const value = parsed.arbitrary || parsed.value.includes('deg') || parsed.value.includes('rad') || parsed.value.includes('turn')
+      ? parsed.value
+      : `${parsed.value}deg`
+    return { transform: `rotateY(${value})` }
   }
   if (parsed.utility === 'rotate-z' && parsed.value) {
-    return { transform: `rotateZ(${parsed.value}deg)` }
+    const value = parsed.arbitrary || parsed.value.includes('deg') || parsed.value.includes('rad') || parsed.value.includes('turn')
+      ? parsed.value
+      : `${parsed.value}deg`
+    return { transform: `rotateZ(${value})` }
   }
 }
 
 export const translateRule: UtilityRule = (parsed, config) => {
+  const getTranslateValue = (val: string): string => {
+    // Handle fractions: 1/2 -> 50%, 1/3 -> 33.333333%, etc.
+    if (val.includes('/')) {
+      const [num, denom] = val.split('/')
+      const percentage = (Number(num) / Number(denom)) * 100
+      return `${percentage}%`
+    }
+    // Handle special keywords
+    if (val === 'full') return '100%'
+    if (val === 'half') return '50%'
+    // Check spacing config
+    return config.theme.spacing[val] || val
+  }
+
   if (parsed.utility === 'translate-x' && 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
+      value = `-${getTranslateValue(positiveValue)}`
     }
     else {
-      value = config.theme.spacing[parsed.value] || parsed.value
+      value = getTranslateValue(parsed.value)
     }
     return { transform: `translateX(${value})` }
   }
   if (parsed.utility === 'translate-y' && 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
+      value = `-${getTranslateValue(positiveValue)}`
     }
     else {
-      value = config.theme.spacing[parsed.value] || parsed.value
+      value = getTranslateValue(parsed.value)
     }
     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
+      value = `-${getTranslateValue(positiveValue)}`
     }
     else {
-      value = config.theme.spacing[parsed.value] || parsed.value
+      value = getTranslateValue(parsed.value)
     }
     return { transform: `translateZ(${value})` }
   }
 }
 
 export const skewRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'skew-x' && parsed.value) {
-    return { transform: `skewX(${parsed.value}deg)` }
+    const value = parsed.arbitrary || parsed.value.includes('deg') || parsed.value.includes('rad') || parsed.value.includes('turn')
+      ? parsed.value
+      : `${parsed.value}deg`
+    return { transform: `skewX(${value})` }
   }
   if (parsed.utility === 'skew-y' && parsed.value) {
-    return { transform: `skewY(${parsed.value}deg)` }
+    const value = parsed.arbitrary || parsed.value.includes('deg') || parsed.value.includes('rad') || parsed.value.includes('turn')
+      ? parsed.value
+      : `${parsed.value}deg`
+    return { transform: `skewY(${value})` }
   }
 }
 
 export const transformOriginRule: UtilityRule = (parsed) => {
-  const origins: Record<string, string> = {
-    'origin-center': 'center',
-    'origin-top': 'top',
-    'origin-top-right': 'top right',
-    'origin-right': 'right',
-    'origin-bottom-right': 'bottom right',
-    'origin-bottom': 'bottom',
-    'origin-bottom-left': 'bottom left',
-    'origin-left': 'left',
-    'origin-top-left': 'top left',
+  if (parsed.utility === 'origin' && parsed.value) {
+    // Handle arbitrary values with underscores as spaces
+    if (parsed.arbitrary) {
+      return { 'transform-origin': parsed.value.replace(/_/g, ' ') }
+    }
+    // Handle predefined values
+    const origins: Record<string, string> = {
+      'center': 'center',
+      'top': 'top',
+      'top-right': 'top right',
+      'right': 'right',
+      'bottom-right': 'bottom right',
+      'bottom': 'bottom',
+      'bottom-left': 'bottom left',
+      'left': 'left',
+      'top-left': 'top left',
+    }
+    return origins[parsed.value] ? { 'transform-origin': origins[parsed.value] } : undefined
   }
-  return origins[parsed.raw] ? { 'transform-origin': origins[parsed.raw] } : undefined
+  return undefined
 }
 
 export const perspectiveRule: UtilityRule = (parsed) => {
   if (parsed.utility === 'perspective' && parsed.value) {
+    // If value is 'none', use as-is
+    if (parsed.value === 'none') {
+      return { perspective: 'none' }
+    }
+    // If arbitrary or already has unit, use as-is
+    if (parsed.arbitrary || parsed.value.includes('px') || parsed.value.includes('rem') || parsed.value.includes('em')) {
+      return { perspective: parsed.value }
+    }
+    // Otherwise add px
     return { perspective: `${parsed.value}px` }
   }
-  const values: Record<string, string> = {
-    'perspective-none': 'none',
-  }
-  return values[parsed.raw] ? { perspective: values[parsed.raw] } : undefined
+  return undefined
 }
 
 export const perspectiveOriginRule: UtilityRule = (parsed) => {

packages/headwind/src/rules-typography.ts

@@ -65,7 +65,15 @@ export const letterSpacingRule: UtilityRule = (parsed) => {
       wider: '0.05em',
       widest: '0.1em',
     }
-    return parsed.value ? { 'letter-spacing': values[parsed.value] || parsed.value } : undefined
+    if (!parsed.value) {
+      return undefined
+    }
+    // Handle negative values
+    if (parsed.value.startsWith('-')) {
+      const positiveValue = parsed.value.slice(1)
+      return { 'letter-spacing': `-${values[positiveValue] || positiveValue}` }
+    }
+    return { 'letter-spacing': values[parsed.value] || parsed.value }
   }
 }
 
@@ -133,7 +141,7 @@ export const textDecorationRule: UtilityRule = (parsed, config) => {
     // Check if it's a thickness
     const thicknesses: Record<string, string> = {
       auto: 'auto',
-      from: 'from-font',
+      'from-font': 'from-font',
       0: '0px',
       1: '1px',
       2: '2px',
@@ -144,6 +152,11 @@ export const textDecorationRule: UtilityRule = (parsed, config) => {
       return { 'text-decoration-thickness': thicknesses[parsed.value] }
     }
 
+    // Handle arbitrary thickness
+    if (parsed.arbitrary) {
+      return { 'text-decoration-thickness': parsed.value }
+    }
+
     // Otherwise treat it as a color: decoration-blue-500
     const parts = parsed.value.split('-')
     if (parts.length === 2) {
@@ -216,6 +229,12 @@ export const textWrapRule: UtilityRule = (parsed) => {
 
 export const textIndentRule: UtilityRule = (parsed, config) => {
   if (parsed.utility === 'indent' && parsed.value) {
+    // Handle negative values
+    if (parsed.value.startsWith('-')) {
+      const positiveValue = parsed.value.slice(1)
+      const spacing = config.theme.spacing[positiveValue] || positiveValue
+      return { 'text-indent': `-${spacing}` }
+    }
     return { 'text-indent': config.theme.spacing[parsed.value] || parsed.value }
   }
 }
@@ -247,9 +266,16 @@ export const whiteSpaceRule: UtilityRule = (parsed) => {
 }
 
 export const wordBreakRule: UtilityRule = (parsed) => {
+  if (parsed.raw === 'break-normal') {
+    return {
+      'overflow-wrap': 'normal',
+      'word-break': 'normal',
+    }
+  }
+  if (parsed.raw === 'break-words') {
+    return { 'overflow-wrap': 'break-word' }
+  }
   const breaks: Record<string, string> = {
-    'break-normal': 'normal',
-    'break-words': 'break-word',
     'break-all': 'break-all',
     'break-keep': 'keep-all',
   }
@@ -279,7 +305,12 @@ export const contentRule: UtilityRule = (parsed) => {
     const values: Record<string, string> = {
       none: 'none',
     }
-    return { content: values[parsed.value] || `"${parsed.value}"` }
+    // If value is already quoted or is a special value, use as-is
+    if (values[parsed.value] || parsed.value.startsWith('"') || parsed.value.startsWith("'")) {
+      return { content: values[parsed.value] || parsed.value }
+    }
+    // Otherwise wrap in quotes
+    return { content: `"${parsed.value}"` }
   }
 }