chore: wip

Author: glennmichael123

bunpress.config.ts

@@ -1,9 +1,7 @@
 import type { BunPressOptions } from '@stacksjs/bunpress'
 
-export default {
+const config: BunPressOptions = {
   verbose: false,
-  docsDir: './docs',
-  outDir: './dist',
 
   nav: [
     { text: 'Home', link: '/' },
@@ -133,9 +131,6 @@ export default {
     ],
   },
 
-  fathom: {
-    enabled: true,
-    siteId: 'HEADWIND',
-    honorDNT: true,
-  },
-} satisfies BunPressOptions
+}
+
+export default config

packages/crosswind/bin/crosswind

@@ -509,6 +509,7 @@ export const defaultConfig: CrosswindConfig = {
   blocklist: [],
   preflights: [tailwindPreflight],
   presets: [],
+  cssVariables: false,
 }
 
 // Lazy-loaded config to avoid top-level await (enables bun --compile)

packages/crosswind/src/config.ts

@@ -1770,9 +1770,9 @@ export class CSSGenerator {
     for (let i = 0; i < rulesLength; i++) {
       const result = builtInRules[i](parsed, this.config)
       if (result) {
-        // Handle both old format (just properties) and new format (object with properties and childSelector)
+        // Handle both old format (just properties) and new format (object with properties and childSelector/pseudoElement)
         if ('properties' in result && typeof result.properties === 'object') {
-          this.addRule(parsed, result.properties, result.childSelector)
+          this.addRule(parsed, result.properties, result.childSelector, result.pseudoElement)
         }
         else {
           this.addRule(parsed, result as Record<string, string>)
@@ -1788,12 +1788,16 @@ export class CSSGenerator {
   /**
    * Add a CSS rule with variants applied
    */
-  private addRule(parsed: ParsedClass, properties: Record<string, string>, childSelector?: string): void {
+  private addRule(parsed: ParsedClass, properties: Record<string, string>, childSelector?: string, pseudoElement?: string): void {
     // Use cached selector if available
-    const cacheKey = `${parsed.raw}${childSelector || ''}`
+    const cacheKey = `${parsed.raw}${childSelector || ''}${pseudoElement || ''}`
     let selector = this.selectorCache.get(cacheKey)
     if (!selector) {
       selector = this.buildSelector(parsed)
+      // Append pseudo-element directly (no space)
+      if (pseudoElement) {
+        selector += pseudoElement
+      }
       // Append child selector if provided
       if (childSelector) {
         selector += ` ${childSelector}`
@@ -2020,6 +2024,14 @@ export class CSSGenerator {
       }
     }
 
+    // Generate CSS variables from theme colors if enabled
+    if (this.config.cssVariables) {
+      const vars = this.generateCSSVariables()
+      if (vars) {
+        parts.push(minify ? vars.replace(/\s+/g, ' ').trim() : vars)
+      }
+    }
+
     // Base rules (no media query)
     const baseRules = this.rules.get('base') || []
     if (baseRules.length > 0) {
@@ -2080,6 +2092,32 @@ export class CSSGenerator {
     return grouped
   }
 
+  /**
+   * Generate :root CSS variables from theme colors
+   * Flattens nested color objects: { monokai: { bg: '#2d2a2e' } } -> --monokai-bg: #2d2a2e
+   */
+  private generateCSSVariables(): string | null {
+    const colors = this.config.theme.colors
+    if (!colors || Object.keys(colors).length === 0) return null
+
+    const vars: string[] = []
+    for (const [name, value] of Object.entries(colors)) {
+      if (typeof value === 'string') {
+        vars.push(`  --${name}: ${value};`)
+      }
+      else if (typeof value === 'object' && value !== null) {
+        for (const [shade, shadeValue] of Object.entries(value)) {
+          if (typeof shadeValue === 'string') {
+            vars.push(`  --${name}-${shade}: ${shadeValue};`)
+          }
+        }
+      }
+    }
+
+    if (vars.length === 0) return null
+    return `:root {\n${vars.join('\n')}\n}`
+  }
+
   /**
    * Reset the generator state
    */

packages/crosswind/src/generator.ts

@@ -1,6 +1,52 @@
 import type { UtilityRule } from './rules'
 
+// =============================================================================
+// Shadow color helpers
+// =============================================================================
+
+// Flat color cache for shadow color lookups
+let shadowColorCache: Map<string, string> | null = null
+let shadowColorCacheConfig: any = null
+
+function buildShadowColorCache(colors: Record<string, any>): Map<string, string> {
+  const cache = new Map<string, string>()
+  for (const [name, value] of Object.entries(colors)) {
+    if (typeof value === 'string') {
+      cache.set(name, value)
+    }
+    else if (typeof value === 'object' && value !== null) {
+      for (const [shade, shadeValue] of Object.entries(value)) {
+        if (typeof shadeValue === 'string') {
+          cache.set(`${name}-${shade}`, shadeValue)
+        }
+      }
+    }
+  }
+  return cache
+}
+
+function applyShadowOpacity(color: string, opacity: number): string {
+  if (color.charCodeAt(0) === 35) { // '#'
+    const hex = color.slice(1)
+    const r = Number.parseInt(hex.slice(0, 2), 16)
+    const g = Number.parseInt(hex.slice(2, 4), 16)
+    const b = Number.parseInt(hex.slice(4, 6), 16)
+    return `rgb(${r} ${g} ${b} / ${opacity})`
+  }
+  return color
+}
+
+/**
+ * Replace color values in a shadow string with var(--hw-shadow-color)
+ * e.g., '0 10px 15px -3px rgb(0 0 0 / 0.1)' -> '0 10px 15px -3px var(--hw-shadow-color)'
+ */
+function createColoredShadow(shadow: string): string {
+  return shadow.replace(/rgba?\([^)]+\)/g, 'var(--hw-shadow-color)')
+}
+
+// =============================================================================
 // Backgrounds, Borders, Effects utilities
+// =============================================================================
 
 // Background utilities
 export const backgroundAttachmentRule: UtilityRule = (parsed) => {
@@ -175,13 +221,73 @@ export const outlineRule: UtilityRule = (parsed, config) => {
 
 // Effect utilities
 export const boxShadowThemeRule: UtilityRule = (parsed, config) => {
-  if (parsed.utility === 'shadow' && parsed.value) {
-    const shadow = config.theme.boxShadow[parsed.value]
-    return shadow ? { 'box-shadow': shadow } : undefined
+  if (parsed.utility === 'shadow') {
+    const shadow = parsed.value
+      ? config.theme.boxShadow[parsed.value]
+      : config.theme.boxShadow.DEFAULT
+    if (!shadow) return undefined
+
+    // shadow-none is a simple reset — no CSS variables needed
+    if (shadow === 'none') {
+      return {
+        '--hw-shadow': '0 0 #0000',
+        'box-shadow': 'var(--hw-ring-offset-shadow, 0 0 #0000), var(--hw-ring-shadow, 0 0 #0000), var(--hw-shadow)',
+      } as Record<string, string>
+    }
+
+    // Generate CSS variable-based shadow for color support
+    const colored = createColoredShadow(shadow)
+    return {
+      '--hw-shadow': shadow,
+      '--hw-shadow-colored': colored,
+      'box-shadow': 'var(--hw-ring-offset-shadow, 0 0 #0000), var(--hw-ring-shadow, 0 0 #0000), var(--hw-shadow)',
+    } as Record<string, string>
+  }
+}
+
+// Shadow color utilities (shadow-{color}, shadow-{color}/{opacity})
+export const shadowColorRule: UtilityRule = (parsed, config) => {
+  if (parsed.utility !== 'shadow' || !parsed.value)
+    return undefined
+
+  // Skip if it matches a theme shadow size (sm, md, lg, xl, none, DEFAULT)
+  if (config.theme.boxShadow[parsed.value])
+    return undefined
+
+  // Build/update color cache if needed
+  if (shadowColorCache === null || shadowColorCacheConfig !== config.theme.colors) {
+    shadowColorCache = buildShadowColorCache(config.theme.colors)
+    shadowColorCacheConfig = config.theme.colors
   }
-  if (parsed.utility === 'shadow' && !parsed.value) {
-    return { 'box-shadow': config.theme.boxShadow.DEFAULT }
+
+  const value = parsed.value
+  const slashIdx = value.indexOf('/')
+
+  let colorName: string
+  let opacity: number | undefined
+
+  if (slashIdx !== -1) {
+    colorName = value.slice(0, slashIdx)
+    const opacityValue = Number.parseInt(value.slice(slashIdx + 1), 10)
+    if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100)
+      return undefined
+    opacity = opacityValue / 100
+  }
+  else {
+    colorName = value
   }
+
+  const resolvedColor = shadowColorCache.get(colorName)
+  if (!resolvedColor) return undefined
+
+  const finalColor = opacity !== undefined
+    ? applyShadowOpacity(resolvedColor, opacity)
+    : resolvedColor
+
+  return {
+    '--hw-shadow-color': finalColor,
+    '--hw-shadow': 'var(--hw-shadow-colored)',
+  } as Record<string, string>
 }
 
 export const textShadowRule: UtilityRule = (parsed) => {
@@ -342,6 +448,7 @@ export const effectsRules: UtilityRule[] = [
   borderStyleRule,
   outlineRule,
   boxShadowThemeRule,
+  shadowColorRule,
   textShadowRule,
   opacityRule,
   mixBlendModeRule,

packages/crosswind/src/rules-effects.ts

@@ -454,6 +454,58 @@ function applyOpacity(color: string, opacity: number): string {
   return cleanColor
 }
 
+// Placeholder color utilities (placeholder-{color})
+export const placeholderColorRule: UtilityRule = (parsed, config) => {
+  if (parsed.utility !== 'placeholder' || !parsed.value)
+    return undefined
+
+  // Build/update flat color cache if needed
+  if (flatColorCache === null || flatColorCacheConfig !== config.theme.colors) {
+    flatColorCache = buildFlatColorCache(config.theme.colors)
+    flatColorCacheConfig = config.theme.colors
+  }
+
+  const value = parsed.value
+  const slashIdx = value.indexOf('/')
+
+  if (slashIdx === -1) {
+    // No opacity
+    const colorVal = flatColorCache.get(value)
+    if (colorVal) {
+      return {
+        properties: { color: colorVal },
+        pseudoElement: '::placeholder',
+      }
+    }
+  }
+  else {
+    // With opacity modifier
+    const colorValue = value.slice(0, slashIdx)
+    const opacityValue = Number.parseInt(value.slice(slashIdx + 1), 10)
+    if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100)
+      return undefined
+    const opacity = opacityValue / 100
+    const baseColor = flatColorCache.get(colorValue)
+    if (baseColor) {
+      return {
+        properties: { color: applyOpacity(baseColor, opacity) },
+        pseudoElement: '::placeholder',
+      }
+    }
+  }
+
+  // Special colors
+  const specialColor = SPECIAL_COLORS[parsed.value]
+  if (specialColor) {
+    return {
+      properties: { color: specialColor },
+      pseudoElement: '::placeholder',
+    }
+  }
+
+  return undefined
+}
+
 // Typography utilities
 export const fontSizeRule: UtilityRule = (parsed, config) => {
   if (parsed.utility === 'text' && parsed.value) {
@@ -701,6 +753,9 @@ export const builtInRules: UtilityRule[] = [
   // Effects rules that use 'bg' utility (bg-gradient-*, bg-fixed, bg-clip-*, etc.)
   ...effectsRules,
 
+  // Placeholder color rule (placeholder-{color} -> ::placeholder { color })
+  placeholderColorRule,
+
   // Color rule (bg, text, border are very common)
   // IMPORTANT: This must come AFTER all specific text-*, bg-*, border-* rules
   // because it will match ANY text-*, bg-*, border-* class

packages/crosswind/src/rules.ts

@@ -79,6 +79,8 @@ export interface CrosswindConfig {
   compileClass?: CompileClassConfig
   attributify?: AttributifyConfig
   bracketSyntax?: BracketSyntaxConfig
+  /** Generate :root CSS variables from theme colors (e.g., --monokai-bg: #2d2a2e) */
+  cssVariables?: boolean
 }
 
 export interface Theme {
@@ -170,6 +172,7 @@ export interface CSSRule {
 export interface UtilityRuleResult {
   properties: Record<string, string>
   childSelector?: string
+  pseudoElement?: string // e.g., '::placeholder' — appended to selector without space
 }
 
 export type CustomRule = [RegExp, (match: RegExpMatchArray) => Record<string, string> | undefined]