chore: minor improvements

Author: chrisbbreuer

README.md

@@ -157,6 +157,25 @@ const ANIMATION_MAP: Record<string, Record<string, string>> = {
   'animate-bounce': { animation: 'bounce 1s infinite' },
 }
 
+// Keyframe definitions for built-in animations
+const KEYFRAMES: Record<string, string> = {
+  spin: `@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}`,
+  ping: `@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}`,
+  pulse: `@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .5; }
+}`,
+  bounce: `@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}`,
+}
+
 // Transform origin - utility="origin", value lookup
 const TRANSFORM_ORIGIN_VALUES: Record<string, string> = {
   'center': 'center',
@@ -1116,16 +1135,16 @@ const BLUR_MAP: Record<string, Record<string, string>> = {
   'blur-3xl': { filter: 'blur(64px)' },
 }
 
-// Backdrop blur - direct raw class to CSS
+// Backdrop blur - direct raw class to CSS (with -webkit- prefix for Safari)
 const BACKDROP_BLUR_MAP: Record<string, Record<string, string>> = {
-  'backdrop-blur-none': { 'backdrop-filter': 'blur(0)' },
-  'backdrop-blur-sm': { 'backdrop-filter': 'blur(4px)' },
-  'backdrop-blur': { 'backdrop-filter': 'blur(8px)' },
-  'backdrop-blur-md': { 'backdrop-filter': 'blur(12px)' },
-  'backdrop-blur-lg': { 'backdrop-filter': 'blur(16px)' },
-  'backdrop-blur-xl': { 'backdrop-filter': 'blur(24px)' },
-  'backdrop-blur-2xl': { 'backdrop-filter': 'blur(40px)' },
-  'backdrop-blur-3xl': { 'backdrop-filter': 'blur(64px)' },
+  'backdrop-blur-none': { '-webkit-backdrop-filter': 'blur(0)', 'backdrop-filter': 'blur(0)' },
+  'backdrop-blur-sm': { '-webkit-backdrop-filter': 'blur(4px)', 'backdrop-filter': 'blur(4px)' },
+  'backdrop-blur': { '-webkit-backdrop-filter': 'blur(8px)', 'backdrop-filter': 'blur(8px)' },
+  'backdrop-blur-md': { '-webkit-backdrop-filter': 'blur(12px)', 'backdrop-filter': 'blur(12px)' },
+  'backdrop-blur-lg': { '-webkit-backdrop-filter': 'blur(16px)', 'backdrop-filter': 'blur(16px)' },
+  'backdrop-blur-xl': { '-webkit-backdrop-filter': 'blur(24px)', 'backdrop-filter': 'blur(24px)' },
+  'backdrop-blur-2xl': { '-webkit-backdrop-filter': 'blur(40px)', 'backdrop-filter': 'blur(40px)' },
+  'backdrop-blur-3xl': { '-webkit-backdrop-filter': 'blur(64px)', 'backdrop-filter': 'blur(64px)' },
 }
 
 // Grayscale/invert/sepia - direct raw class to CSS
@@ -1138,14 +1157,14 @@ const FILTER_TOGGLE_MAP: Record<string, Record<string, string>> = {
   'sepia': { filter: 'sepia(100%)' },
 }
 
-// Backdrop grayscale/invert/sepia - direct raw class to CSS
+// Backdrop grayscale/invert/sepia - direct raw class to CSS (with -webkit- prefix)
 const BACKDROP_FILTER_TOGGLE_MAP: Record<string, Record<string, string>> = {
-  'backdrop-grayscale-0': { 'backdrop-filter': 'grayscale(0)' },
-  'backdrop-grayscale': { 'backdrop-filter': 'grayscale(100%)' },
-  'backdrop-invert-0': { 'backdrop-filter': 'invert(0)' },
-  'backdrop-invert': { 'backdrop-filter': 'invert(100%)' },
-  'backdrop-sepia-0': { 'backdrop-filter': 'sepia(0)' },
-  'backdrop-sepia': { 'backdrop-filter': 'sepia(100%)' },
+  'backdrop-grayscale-0': { '-webkit-backdrop-filter': 'grayscale(0)', 'backdrop-filter': 'grayscale(0)' },
+  'backdrop-grayscale': { '-webkit-backdrop-filter': 'grayscale(100%)', 'backdrop-filter': 'grayscale(100%)' },
+  'backdrop-invert-0': { '-webkit-backdrop-filter': 'invert(0)', 'backdrop-filter': 'invert(0)' },
+  'backdrop-invert': { '-webkit-backdrop-filter': 'invert(100%)', 'backdrop-filter': 'invert(100%)' },
+  'backdrop-sepia-0': { '-webkit-backdrop-filter': 'sepia(0)', 'backdrop-filter': 'sepia(0)' },
+  'backdrop-sepia': { '-webkit-backdrop-filter': 'sepia(100%)', 'backdrop-filter': 'sepia(100%)' },
 }
 
 // Drop shadow - direct raw class to CSS
@@ -1369,6 +1388,8 @@ export class CSSGenerator {
   private screenBreakpoints: Map<string, string>
   // Cache for utility+value combinations that don't match any rule (negative cache)
   private noMatchCache: Set<string> = new Set()
+  // Track which animation keyframes are used (for @keyframes injection)
+  private usedKeyframes: Set<string> = new Set()
   // Preserve extend colors for CSS variable generation (only custom colors, not defaults)
   private extendColors: Record<string, string | Record<string, string>> | null = null
 
@@ -1472,6 +1493,13 @@ export class CSSGenerator {
     const staticResult = STATIC_UTILITY_MAP[parsed.raw]
     if (staticResult) {
       this.addRule(parsed, staticResult)
+      // Track animation keyframe usage
+      if (staticResult.animation) {
+        const animName = staticResult.animation.split(' ')[0]
+        if (animName && animName !== 'none') {
+          this.usedKeyframes.add(animName)
+        }
+      }
       return
     }
 
@@ -2245,16 +2273,18 @@ export class CSSGenerator {
       // Check for special CSS selector characters:
       // : (58), . (46), / (47), @ (64), space (32), [ (91), ] (93)
       // ( (40), ) (41), % (37), # (35), , (44), > (62), + (43), ~ (126)
+      // ! (33), ' (39), " (34), * (42), = (61)
       if (c === 58 || c === 46 || c === 47 || c === 64 || c === 32 || c === 91 || c === 93 ||
-          c === 40 || c === 41 || c === 37 || c === 35 || c === 44 || c === 62 || c === 43 || c === 126) {
+          c === 40 || c === 41 || c === 37 || c === 35 || c === 44 || c === 62 || c === 43 || c === 126 ||
+          c === 33 || c === 39 || c === 34 || c === 42 || c === 61) {
         needsEscape = true
         break
       }
     }
     if (!needsEscape) {
       return className
     }
-    return className.replace(/[:./@ \[\]()%#,>+~]/g, '\\$&')
+    return className.replace(/[:./@ \[\]()%#,>+~!'"*=]/g, '\\$&')
   }
 
   /**
@@ -2295,6 +2325,16 @@ export class CSSGenerator {
       parts.push(this.rulesToCSS(baseRules, minify))
     }
 
+    // Inject @keyframes for used animations
+    if (this.usedKeyframes.size > 0) {
+      for (const name of this.usedKeyframes) {
+        const kf = KEYFRAMES[name]
+        if (kf) {
+          parts.push(minify ? kf.replace(/\s+/g, ' ').replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/;\s*/g, ';').trim() : kf)
+        }
+      }
+    }
+
     // Media query rules
     for (const [key, rules] of this.rules.entries()) {
       if (key !== 'base' && rules.length > 0) {

packages/crosswind/src/generator.ts

@@ -1321,7 +1321,7 @@ 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
   const opacityMatch = utility.match(/^([a-z]+(?:-[a-z]+)*?)-(.+?)\/(\d+|\[\d*\.?\d+\])$/)
-  if (opacityMatch && ['bg', 'text', 'border', 'ring', 'placeholder', 'divide'].includes(opacityMatch[1])) {
+  if (opacityMatch && ['bg', 'text', 'border', 'ring', 'placeholder', 'divide', 'accent', 'caret', 'fill', 'stroke', 'outline', 'decoration', 'shadow', 'ring-offset'].includes(opacityMatch[1])) {
     return {
       raw: className,
       variants,

packages/crosswind/src/parser.ts

@@ -1,4 +1,5 @@
 import type { UtilityRule } from './rules'
+import { resolveColorValue } from './rules'
 
 // Advanced utilities
 
@@ -53,20 +54,11 @@ export const ringRule: UtilityRule = (parsed, config) => {
       return { '--hw-ring-inset': 'inset' } as Record<string, string>
     }
 
-    // Check if this is a ring color (e.g., ring-sky-500)
+    // Check if this is a ring color (e.g., ring-sky-500, ring-white/50)
     if (parsed.value) {
-      const parts = parsed.value.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 { '--hw-ring-color': colorValue[shade] } as Record<string, string>
-        }
-        // Also check if it's a direct color value (like custom colors)
-        if (config.theme.colors[parsed.value]) {
-          return { '--hw-ring-color': config.theme.colors[parsed.value] } as Record<string, string>
-        }
+      const color = resolveColorValue(parsed.value, config)
+      if (color) {
+        return { '--hw-ring-color': color } as Record<string, string>
       }
     }
 
@@ -100,20 +92,10 @@ export const ringRule: UtilityRule = (parsed, config) => {
       return { '--hw-ring-offset-width': widths[parsed.value] } as Record<string, string>
     }
 
-    // Otherwise, treat as a color (e.g., ring-offset-ocean-blue)
-    const parts = parsed.value.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 { '--hw-ring-offset-color': colorValue[shade] } as Record<string, string>
-      }
-    }
-    // Check for direct color (e.g., ring-offset-black)
-    const directColor = config.theme.colors[parsed.value]
-    if (typeof directColor === 'string') {
-      return { '--hw-ring-offset-color': directColor } as Record<string, string>
+    // Otherwise, treat as a color (e.g., ring-offset-white, ring-offset-blue-500/50)
+    const color = resolveColorValue(parsed.value, config)
+    if (color) {
+      return { '--hw-ring-offset-color': color } as Record<string, string>
     }
   }
 
@@ -143,6 +125,14 @@ export const borderOpacityRule: UtilityRule = (parsed) => {
 // Space utilities (child spacing)
 export const spaceRule: UtilityRule = (parsed, config) => {
   if (parsed.utility === 'space-x' && parsed.value) {
+    // space-x-reverse toggles the CSS variable
+    if (parsed.value === 'reverse') {
+      return {
+        properties: { '--hw-space-x-reverse': '1' } as Record<string, string>,
+        childSelector: '> :not([hidden]) ~ :not([hidden])',
+      }
+    }
+
     let spacing: string
     if (parsed.value.startsWith('-')) {
       const positiveValue = parsed.value.slice(1)
@@ -164,6 +154,14 @@ export const spaceRule: UtilityRule = (parsed, config) => {
   }
 
   if (parsed.utility === 'space-y' && parsed.value) {
+    // space-y-reverse toggles the CSS variable
+    if (parsed.value === 'reverse') {
+      return {
+        properties: { '--hw-space-y-reverse': '1' } as Record<string, string>,
+        childSelector: '> :not([hidden]) ~ :not([hidden])',
+      }
+    }
+
     let spacing: string
     if (parsed.value.startsWith('-')) {
       const positiveValue = parsed.value.slice(1)
@@ -224,6 +222,14 @@ export const divideRule: UtilityRule = (parsed, config) => {
   }
 
   if (parsed.utility === 'divide-x') {
+    // divide-x-reverse toggles the CSS variable
+    if (parsed.value === 'reverse') {
+      return {
+        properties: { '--hw-divide-x-reverse': '1' } as Record<string, string>,
+        childSelector: '> :not([hidden]) ~ :not([hidden])',
+      }
+    }
+
     const widths: Record<string, string> = {
       0: '0',
       2: '2px',
@@ -244,6 +250,14 @@ export const divideRule: UtilityRule = (parsed, config) => {
   }
 
   if (parsed.utility === 'divide-y') {
+    // divide-y-reverse toggles the CSS variable
+    if (parsed.value === 'reverse') {
+      return {
+        properties: { '--hw-divide-y-reverse': '1' } as Record<string, string>,
+        childSelector: '> :not([hidden]) ~ :not([hidden])',
+      }
+    }
+
     const widths: Record<string, string> = {
       0: '0',
       2: '2px',

packages/crosswind/src/rules-advanced.ts

@@ -1,4 +1,5 @@
 import type { UtilityRule } from './rules'
+import { resolveColorValue } from './rules'
 
 // =============================================================================
 // Shadow color helpers
@@ -190,20 +191,10 @@ export const outlineRule: UtilityRule = (parsed, config) => {
       return { 'outline-width': '1px' } as Record<string, string>
     }
 
-    // Check for colors first (e.g., outline-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 { 'outline-color': colorValue[shade] } as Record<string, string>
-      }
-    }
-
-    // Direct color (e.g., outline-black)
-    const directColor = config.theme.colors[parsed.value]
-    if (typeof directColor === 'string') {
-      return { 'outline-color': directColor } as Record<string, string>
+    // Check for colors (e.g., outline-blue-500, outline-white/50)
+    const color = resolveColorValue(parsed.value, config)
+    if (color) {
+      return { 'outline-color': color } as Record<string, string>
     }
 
     // Check for width values