chore: wip

Author: chrisbbreuer

packages/headwind/src/parser.ts

@@ -33,6 +33,23 @@ export function parseClass(className: string): ParsedClass {
   const utility = parts[parts.length - 1]
   const variants = parts.slice(0, -1)
 
+  // Check for full utility names that should not be split (display utilities)
+  const fullUtilityNames = [
+    'inline-block',
+    'inline-flex',
+    'inline-grid',
+  ]
+  if (fullUtilityNames.includes(utility)) {
+    return {
+      raw: className,
+      variants,
+      utility,
+      value: undefined,
+      important,
+      arbitrary: false,
+    }
+  }
+
   // Check for arbitrary values: w-[100px] or bg-[#ff0000]
   const arbitraryMatch = utility.match(/^([a-z-]+?)-\[(.+?)\]$/)
   if (arbitraryMatch) {

packages/headwind/src/rules-effects.ts

@@ -99,22 +99,36 @@ export const borderStyleRule: UtilityRule = (parsed) => {
 }
 
 export const outlineRule: UtilityRule = (parsed, config) => {
-  if (parsed.utility === 'outline') {
-    if (!parsed.value) {
-      return { 'outline-width': '1px' }
-    }
-    const widths: Record<string, string> = {
+  // Outline offset
+  if (parsed.utility === 'outline-offset' && parsed.value) {
+    const offsets: Record<string, string> = {
       0: '0px',
       1: '1px',
       2: '2px',
       4: '4px',
       8: '8px',
     }
-    return { 'outline-width': widths[parsed.value] || parsed.value }
+    return { 'outline-offset': offsets[parsed.value] || parsed.value }
+  }
+
+  // Outline styles
+  const outlineStyles: Record<string, string> = {
+    'outline-none': 'none',
+    'outline-solid': 'solid',
+    'outline-dashed': 'dashed',
+    'outline-dotted': 'dotted',
+    'outline-double': 'double',
+  }
+  if (parsed.raw.startsWith('outline-') && outlineStyles[parsed.raw]) {
+    return { 'outline-style': outlineStyles[parsed.raw] }
   }
 
-  // Outline colors
-  if (parsed.utility === 'outline' && parsed.value) {
+  if (parsed.utility === 'outline') {
+    if (!parsed.value) {
+      return { 'outline-width': '1px' }
+    }
+
+    // Check for colors first (e.g., outline-blue-500)
     const parts = parsed.value.split('-')
     if (parts.length === 2) {
       const [colorName, shade] = parts
@@ -123,34 +137,27 @@ export const outlineRule: UtilityRule = (parsed, config) => {
         return { 'outline-color': colorValue[shade] }
       }
     }
-    // Direct color
+
+    // Direct color (e.g., outline-black)
     const directColor = config.theme.colors[parsed.value]
     if (typeof directColor === 'string') {
       return { 'outline-color': directColor }
     }
-  }
 
-  // Outline offset
-  if (parsed.utility === 'outline-offset' && parsed.value) {
-    const offsets: Record<string, string> = {
+    // Check for width values
+    const widths: Record<string, string> = {
       0: '0px',
       1: '1px',
       2: '2px',
       4: '4px',
       8: '8px',
     }
-    return { 'outline-offset': offsets[parsed.value] || parsed.value }
-  }
+    if (widths[parsed.value]) {
+      return { 'outline-width': widths[parsed.value] }
+    }
 
-  const outlineStyles: Record<string, string> = {
-    'outline-none': 'none',
-    'outline-solid': 'solid',
-    'outline-dashed': 'dashed',
-    'outline-dotted': 'dotted',
-    'outline-double': 'double',
-  }
-  if (parsed.raw.startsWith('outline-') && outlineStyles[parsed.raw]) {
-    return { 'outline-style': outlineStyles[parsed.raw] }
+    // Fallback to raw value as width
+    return { 'outline-width': parsed.value }
   }
 }
 

packages/headwind/src/rules-layout.ts

@@ -169,7 +169,17 @@ export const insetRule: UtilityRule = (parsed, config) => {
   if (!props || !parsed.value)
     return undefined
 
-  const value = config.theme.spacing[parsed.value] || parsed.value
+  // Handle negative values
+  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
+  }
+
   const result: Record<string, string> = {}
   for (const prop of props) {
     result[prop] = value