chore: several minor improvements

Author: chrisbbreuer

packages/crosswind/src/generator.ts

@@ -1893,20 +1893,28 @@ export class CSSGenerator {
       return
     }
 
-    // Gap: gap-{spacing}
+    // Gap: gap-{spacing}. Uses the same v4-style decimal fallback as the
+    // shared spacing resolver — `gap-4.5` → `1.125rem` instead of
+    // the invalid `gap: 4.5;` the pre-fix path emitted.
+    const resolveGap = (v: string): string => {
+      const hit = this.config.theme.spacing[v]
+      if (hit !== undefined) return hit
+      if (/^\d+(?:\.\d+)?$/.test(v)) {
+        const n = Number.parseFloat(v)
+        if (Number.isFinite(n)) return `${n * 0.25}rem`
+      }
+      return v
+    }
     if (utility === 'gap' && value) {
-      const gapValue = this.config.theme.spacing[value] || value
-      this.addRule(parsed, { gap: gapValue })
+      this.addRule(parsed, { gap: resolveGap(value) })
       return
     }
     if (utility === 'gap-x' && value) {
-      const gapValue = this.config.theme.spacing[value] || value
-      this.addRule(parsed, { 'column-gap': gapValue })
+      this.addRule(parsed, { 'column-gap': resolveGap(value) })
       return
     }
     if (utility === 'gap-y' && value) {
-      const gapValue = this.config.theme.spacing[value] || value
-      this.addRule(parsed, { 'row-gap': gapValue })
+      this.addRule(parsed, { 'row-gap': resolveGap(value) })
       return
     }
 

packages/crosswind/src/parser.ts

@@ -1016,13 +1016,20 @@ export function parseClass(className: string): ParsedClass {
  * Internal implementation of parseClass
 */
 function parseClassImpl(className: string): ParsedClass {
-  // Check for important modifier
+  // Check for important modifier. Supports both Tailwind v3 prefix form
+  // (`!p-4`) and v4 suffix form (`p-4!`). Suffix form is checked BEFORE
+  // rejecting arbitrary-value brackets so `p-4!` peels the bang off cleanly
+  // while `p-[4]!` and `[color:red]!` still work.
   let important = false
   let cleanClassName = className
   if (className.startsWith('!')) {
     important = true
     cleanClassName = className.slice(1)
   }
+  else if (className.endsWith('!') && className.length > 1) {
+    important = true
+    cleanClassName = className.slice(0, -1)
+  }
 
   // Check for arbitrary properties BEFORE splitting on colons: [color:red], [mask-type:luminance]
   const arbitraryPropMatch = cleanClassName.match(/^\[([a-z-]+):(.+)\]$/)
@@ -1040,13 +1047,50 @@ function parseClassImpl(className: string): ParsedClass {
     }
   }
 
+  // Check for arbitrary-value + arbitrary-modifier shape:
+  //   text-[14px]/[1.5]       font-size with line-height
+  //   bg-[#FF3E54]/[0.33]     background color with arbitrary alpha
+  // The main preArbitraryMatch regex below ends on the last `]`, so when
+  // there are two bracket pairs it would swallow the slash into the value.
+  // Detect the shape first and split it cleanly.
+  const preArbitraryWithModifierMatch = cleanClassName.match(
+    /^((?:[a-z-]+:)*)(-?[a-z-]+?)-\[([^\]]+)\]\/\[([^\]]+)\]$/,
+  )
+  if (preArbitraryWithModifierMatch) {
+    const [, variantPart, utilityRaw, bracketValue, modifier] = preArbitraryWithModifierMatch
+    const variants = variantPart ? variantPart.split(':').filter(Boolean) : []
+    const isNegative = utilityRaw.startsWith('-')
+    const utilityName = isNegative ? utilityRaw.slice(1) : utilityRaw
+    let value = convertArbitraryUnderscores(bracketValue)
+    if (isNegative) value = value.startsWith('-') ? value : `-${value}`
+    return {
+      raw: className,
+      variants,
+      utility: utilityName,
+      // Encode the modifier as `value/modifier` — rules that care (fontSizeRule
+      // for line-height, colorRule for alpha) split on the first slash.
+      value: `${value}/${modifier}`,
+      important,
+      arbitrary: true,
+    }
+  }
+
   // Check for arbitrary values with brackets BEFORE splitting on colons
   // This handles cases like bg-[url(https://...)] where the URL contains colons
   // Also handles type hints like text-[color:var(--muted)]
-  const preArbitraryMatch = cleanClassName.match(/^((?:[a-z-]+:)*)([a-z-]+?)-\[(.+)\]$/)
+  const preArbitraryMatch = cleanClassName.match(/^((?:[a-z-]+:)*)(-?[a-z-]+?)-\[(.+)\]$/)
   if (preArbitraryMatch) {
     const variantPart = preArbitraryMatch[1]
     const variants = variantPart ? variantPart.split(':').filter(Boolean) : []
+
+    // Detect a leading `-` on the utility — Tailwind-style negative arbitrary
+    // values like `-mt-[20px]` or `-translate-x-[50%]`. Strip the sign from
+    // the utility name and fold it onto the value so rules that match
+    // `utility === 'mt'` still fire.
+    let utilityName = preArbitraryMatch[2]
+    const isNegative = utilityName.startsWith('-')
+    if (isNegative) utilityName = utilityName.slice(1)
+
     let value = convertArbitraryUnderscores(preArbitraryMatch[3])
     let typeHint: string | undefined
 
@@ -1059,10 +1103,12 @@ function parseClassImpl(className: string): ParsedClass {
       value = typeHintMatch[2]
     }
 
+    if (isNegative) value = value.startsWith('-') ? value : `-${value}`
+
     return {
       raw: className,
       variants,
-      utility: preArbitraryMatch[2],
+      utility: utilityName,
       value,
       important,
       arbitrary: true,
@@ -1088,9 +1134,34 @@ function parseClassImpl(className: string): ParsedClass {
   }
   parts.push(current)
 
-  const utility = parts[parts.length - 1]
+  let utility = parts[parts.length - 1]
   const variants = parts.slice(0, -1)
 
+  // Handle `!` placed between the last variant and the utility
+  // (`hover:!bg-red-500`). After splitting on `:`, the bang sits at the
+  // start of the utility token. Strip it and flag important. Mirror the
+  // trailing form too (`hover:p-4!`) for consistency with the top-of-file
+  // bang handling that covered the no-variant case.
+  if (utility.startsWith('!') && utility.length > 1) {
+    important = true
+    utility = utility.slice(1)
+  }
+  else if (utility.endsWith('!') && utility.length > 1) {
+    important = true
+    utility = utility.slice(0, -1)
+  }
+
+  // cleanClassName is used below for the subsequent arbitrary-value /
+  // negative-value branches that rebuild the parsed shape from scratch.
+  // Keep it in sync with the stripped utility so those branches see the
+  // same token.
+  if (variants.length > 0) {
+    cleanClassName = `${variants.join(':')}:${utility}`
+  }
+  else {
+    cleanClassName = utility
+  }
+
   // Check for full utility names that should not be split
   const fullUtilityNames = [
     // Display utilities
@@ -1151,6 +1222,9 @@ function parseClassImpl(className: string): ParsedClass {
   // Handle compound utilities with specific prefixes
   // grid-cols-3, grid-rows-2, translate-x-4, etc.
   const compoundPrefixes = [
+    // Position utilities
+    'inset-x',
+    'inset-y',
     // Border side utilities (border-t-0, border-r-2, etc.)
     'border-t',
     'border-r',
@@ -1250,6 +1324,18 @@ function parseClassImpl(className: string): ParsedClass {
     'rounded-se',
     'rounded-es',
     'rounded-ee',
+    // Physical rounded sides + corners (rounded-t-lg, rounded-tr-[6px], etc.).
+    // The generator has fast-path lookups for specific size keywords, but
+    // these prefixes are needed so arbitrary values and custom sizes fall
+    // through to the rule handlers that accept any value.
+    'rounded-t',
+    'rounded-r',
+    'rounded-b',
+    'rounded-l',
+    'rounded-tl',
+    'rounded-tr',
+    'rounded-bl',
+    'rounded-br',
     'border-opacity',
     'ring-opacity',
     'stroke-dasharray',
@@ -1347,9 +1433,10 @@ function parseClassImpl(className: string): ParsedClass {
   }
 
   // Check for color opacity modifiers: bg-blue-500/50, text-red-500/75, bg-white/[0.04]
-  // Must come before fractional values to avoid conflict
+  // Must come before fractional values to avoid conflict.
+  // Gradient stops (from/via/to) accept opacity too — `from-red-500/50`.
   const opacityMatch = utility.match(/^([a-z]+(?:-[a-z]+)*?)-(.+?)\/(\d+|\[\d*\.?\d+\])$/)
-  if (opacityMatch && ['bg', 'text', 'border', 'ring', 'placeholder', 'divide', 'accent', 'caret', 'fill', 'stroke', 'outline', 'decoration', 'shadow', 'ring-offset'].includes(opacityMatch[1])) {
+  if (opacityMatch && ['bg', 'text', 'border', 'ring', 'placeholder', 'divide', 'accent', 'caret', 'fill', 'stroke', 'outline', 'decoration', 'shadow', 'ring-offset', 'from', 'via', 'to'].includes(opacityMatch[1])) {
     return {
       raw: className,
       variants,

packages/crosswind/src/rules-advanced.ts

@@ -342,23 +342,78 @@ export const divideRule: UtilityRule = (parsed, config) => {
 // Gradient color stops
 export const gradientStopsRule: UtilityRule = (parsed, config) => {
   const getColor = (value: string) => {
+    // Support the opacity-modifier shorthand: `red-500/50`, `red-500/[0.33]`.
+    // The parser hands us the raw `color/alpha` string when the utility is
+    // a gradient stop; we split it back out here and feed the base color
+    // through the same lookup table used without an alpha.
+    let alpha: string | null = null
+    let lookup = value
+    const slashIdx = value.indexOf('/')
+    if (slashIdx !== -1) {
+      lookup = value.slice(0, slashIdx)
+      const rawAlpha = value.slice(slashIdx + 1)
+      if (rawAlpha.startsWith('[') && rawAlpha.endsWith(']')) {
+        alpha = rawAlpha.slice(1, -1)
+      }
+      else {
+        const pct = Number.parseInt(rawAlpha, 10)
+        if (!Number.isNaN(pct)) alpha = (pct / 100).toString()
+      }
+    }
+
+    const applyAlpha = (base: string): string => {
+      if (!alpha) return base
+      // oklch / rgb / hsl with slash syntax: inject alpha before the closing `)`.
+      const mSpace = base.match(/^(oklch|rgb|hsl|oklab|lab|lch)\(([^)]+)\)$/i)
+      if (mSpace) {
+        const fn = mSpace[1]
+        // Existing alpha (if any) is everything after `/`
+        const inner = mSpace[2].split('/')[0].trim()
+        return `${fn}(${inner} / ${alpha})`
+      }
+      // Hex or named color → use rgb() with calc-alpha via color-mix? Cheapest
+      // path: keep base and let consumers rely on rgb(r g b / a) for OKLCH.
+      // For hex, convert to rgb() fallback.
+      if (/^#[0-9a-f]{3,8}$/i.test(base)) {
+        const hex = base.replace('#', '')
+        const parse = (h: string) => Number.parseInt(h.length === 1 ? h + h : h, 16)
+        const r = parse(hex.slice(0, hex.length === 3 ? 1 : 2))
+        const g = parse(hex.slice(hex.length === 3 ? 1 : 2, hex.length === 3 ? 2 : 4))
+        const b = parse(hex.slice(hex.length === 3 ? 2 : 4, hex.length === 3 ? 3 : 6))
+        return `rgb(${r} ${g} ${b} / ${alpha})`
+      }
+      // Fallback: let color-mix carry the alpha (modern-browser-safe).
+      return `color-mix(in srgb, ${base} ${Math.round(Number.parseFloat(alpha) * 100)}%, transparent)`
+    }
+
+    // Arbitrary color like `[#FF3E54]` — strip the square brackets before
+    // alpha handling. Without this the CSS variable picks up the raw
+    // bracketed token, producing invalid `var(--hw-gradient-from: [#...]`.
+    if (lookup.startsWith('[') && lookup.endsWith(']')) {
+      lookup = lookup.slice(1, -1)
+    }
+
     // First check if it's a direct color value (e.g., ocean-blue, black, white)
-    const directColor = config.theme.colors[value]
+    const directColor = config.theme.colors[lookup]
     if (typeof directColor === 'string') {
-      return directColor
+      return applyAlpha(directColor)
     }
 
     // Then check if it's a color-shade combination (e.g., sky-500, blue-gray-200)
-    const parts = value.split('-')
+    const parts = lookup.split('-')
     if (parts.length >= 2) {
       const colorName = parts.slice(0, -1).join('-')
       const shade = parts[parts.length - 1]
       const colorValue = config.theme.colors[colorName]
       if (typeof colorValue === 'object' && colorValue[shade]) {
-        return colorValue[shade]
+        return applyAlpha(colorValue[shade])
       }
     }
-    return value
+
+    // Arbitrary color like `#FF3E54` — apply alpha via the hex path.
+    if (lookup.startsWith('#')) return applyAlpha(lookup)
+
+    return applyAlpha(lookup)
   }
 
   if (parsed.utility === 'from' && parsed.value) {

packages/crosswind/src/rules-grid.ts

@@ -168,15 +168,28 @@ export const gridAutoRowsRule: UtilityRule = (parsed) => {
   }
 }
 
+// Resolve a token against the spacing theme, falling back to Tailwind v4
+// behavior for off-scale numbers (`gap-4.5` → `1.125rem`). Keeps keywords
+// and arbitrary values (with units, functions) passing through unchanged.
+function resolveSpacing(config: any, token: string): string {
+  const hit = config.theme.spacing?.[token]
+  if (hit !== undefined) return hit
+  if (/^\d+(?:\.\d+)?$/.test(token)) {
+    const n = Number.parseFloat(token)
+    if (Number.isFinite(n)) return `${n * 0.25}rem`
+  }
+  return token
+}
+
 export const gapRule: UtilityRule = (parsed, config) => {
   if (parsed.utility === 'gap' && parsed.value) {
-    return { gap: config.theme.spacing[parsed.value] || parsed.value } as Record<string, string>
+    return { gap: resolveSpacing(config, parsed.value) } as Record<string, string>
   }
   if (parsed.utility === 'gap-x' && parsed.value) {
-    return { 'column-gap': config.theme.spacing[parsed.value] || parsed.value } as Record<string, string>
+    return { 'column-gap': resolveSpacing(config, parsed.value) } as Record<string, string>
   }
   if (parsed.utility === 'gap-y' && parsed.value) {
-    return { 'row-gap': config.theme.spacing[parsed.value] || parsed.value } as Record<string, string>
+    return { 'row-gap': resolveSpacing(config, parsed.value) } as Record<string, string>
   }
 }