chore: several minor improvements

Author: chrisbbreuer

packages/crosswind/src/config.ts

@@ -465,6 +465,7 @@ export const defaultConfig: CrosswindConfig = {
     'active': true,
     'disabled': true,
     'dark': true,
+    'light': true,
     'group': true,
     'peer': true,
     'before': true,
@@ -497,7 +498,15 @@ export const defaultConfig: CrosswindConfig = {
     'indeterminate': true,
     'default': true,
     'optional': true,
+    'aria': true,
+    'data': true,
+    'has': true,
+    'not': true,
+    'supports': true,
     'print': true,
+    'landscape': true,
+    'portrait': true,
+    'forced-colors': true,
     'rtl': true,
     'ltr': true,
     'motion-safe': true,

packages/crosswind/src/generator.ts

@@ -856,6 +856,40 @@ const GRADIENT_MAP: Record<string, Record<string, string>> = {
   'bg-gradient-to-bl': { 'background-image': 'linear-gradient(to bottom left, var(--hw-gradient-stops))' },
   'bg-gradient-to-l': { 'background-image': 'linear-gradient(to left, var(--hw-gradient-stops))' },
   'bg-gradient-to-tl': { 'background-image': 'linear-gradient(to top left, var(--hw-gradient-stops))' },
+  // Radial gradients
+  'bg-radial': { 'background-image': 'radial-gradient(var(--hw-gradient-stops))' },
+  'bg-radial-at-t': { 'background-image': 'radial-gradient(at top, var(--hw-gradient-stops))' },
+  'bg-radial-at-tr': { 'background-image': 'radial-gradient(at top right, var(--hw-gradient-stops))' },
+  'bg-radial-at-r': { 'background-image': 'radial-gradient(at right, var(--hw-gradient-stops))' },
+  'bg-radial-at-br': { 'background-image': 'radial-gradient(at bottom right, var(--hw-gradient-stops))' },
+  'bg-radial-at-b': { 'background-image': 'radial-gradient(at bottom, var(--hw-gradient-stops))' },
+  'bg-radial-at-bl': { 'background-image': 'radial-gradient(at bottom left, var(--hw-gradient-stops))' },
+  'bg-radial-at-l': { 'background-image': 'radial-gradient(at left, var(--hw-gradient-stops))' },
+  'bg-radial-at-tl': { 'background-image': 'radial-gradient(at top left, var(--hw-gradient-stops))' },
+  'bg-radial-at-c': { 'background-image': 'radial-gradient(at center, var(--hw-gradient-stops))' },
+  // Conic gradients
+  'bg-conic': { 'background-image': 'conic-gradient(var(--hw-gradient-stops))' },
+  'bg-conic-from-t': { 'background-image': 'conic-gradient(from 0deg at center, var(--hw-gradient-stops))' },
+  'bg-conic-from-tr': { 'background-image': 'conic-gradient(from 45deg at center, var(--hw-gradient-stops))' },
+  'bg-conic-from-r': { 'background-image': 'conic-gradient(from 90deg at center, var(--hw-gradient-stops))' },
+  'bg-conic-from-br': { 'background-image': 'conic-gradient(from 135deg at center, var(--hw-gradient-stops))' },
+  'bg-conic-from-b': { 'background-image': 'conic-gradient(from 180deg at center, var(--hw-gradient-stops))' },
+  'bg-conic-from-bl': { 'background-image': 'conic-gradient(from 225deg at center, var(--hw-gradient-stops))' },
+  'bg-conic-from-l': { 'background-image': 'conic-gradient(from 270deg at center, var(--hw-gradient-stops))' },
+  'bg-conic-from-tl': { 'background-image': 'conic-gradient(from 315deg at center, var(--hw-gradient-stops))' },
+}
+
+// Content utility - direct raw class to CSS
+const CONTENT_MAP: Record<string, Record<string, string>> = {
+  'content-none': { content: 'none' },
+  'content-empty': { content: '""' },
+}
+
+// Scrollbar utilities - direct raw class to CSS
+const SCROLLBAR_MAP: Record<string, Record<string, string>> = {
+  'scrollbar-auto': { 'scrollbar-width': 'auto' },
+  'scrollbar-thin': { 'scrollbar-width': 'thin' },
+  'scrollbar-none': { 'scrollbar-width': 'none' },
 }
 
 // =============================================================================
@@ -1251,6 +1285,10 @@ const STATIC_UTILITY_MAP: Record<string, Record<string, string>> = {
   ...DROP_SHADOW_MAP,
   ...MIX_BLEND_MAP,
   ...BG_BLEND_MAP,
+  // Content
+  ...CONTENT_MAP,
+  // Scrollbar
+  ...SCROLLBAR_MAP,
 }
 
 // Pre-computed variant selector map for O(1) lookup (shared across all instances)
@@ -1296,9 +1334,22 @@ const VARIANT_SELECTORS: Record<string, string> = {
   'optional': ':optional',
 }
 
+// Not-* variants (negated pseudo-classes)
+const NOT_VARIANT_SELECTORS: Record<string, string> = {
+  'not-first': ':not(:first-child)',
+  'not-last': ':not(:last-child)',
+  'not-only': ':not(:only-child)',
+  'not-empty': ':not(:empty)',
+  'not-disabled': ':not(:disabled)',
+  'not-checked': ':not(:checked)',
+  'not-first-of-type': ':not(:first-of-type)',
+  'not-last-of-type': ':not(:last-of-type)',
+}
+
 // Pre-computed prefix variants (these modify the selector prefix, not suffix)
 const PREFIX_VARIANTS: Record<string, string> = {
   'dark': '.dark ',
+  'light': '.light ',
   'rtl': '[dir="rtl"] ',
   'ltr': '[dir="ltr"] ',
 }
@@ -1640,12 +1691,18 @@ export class CSSGenerator {
     }
 
     // Align content: content-{normal|center|start|end|between|around|evenly|baseline|stretch}
+    // Also handles CSS content property for arbitrary values: content-['hello'], content-[attr(data-label)]
     if (utility === 'content' && value) {
       const contentValue = ALIGN_CONTENT_VALUES[value]
       if (contentValue) {
         this.addRule(parsed, { 'align-content': contentValue })
         return
       }
+      // Arbitrary content property: content-['hello'], content-[attr(data-label)]
+      if (parsed.arbitrary) {
+        this.addRule(parsed, { content: value })
+        return
+      }
     }
 
     // Align self: self-{auto|start|end|center|stretch|baseline}
@@ -1938,21 +1995,100 @@ export class CSSGenerator {
         continue
       }
 
-      // Handle group-* variants
+      // Handle not-* variants: not-first, not-last, etc.
+      if (variant.charCodeAt(0) === 110 && variant.startsWith('not-')) { // 'n' = 110
+        if (this.variantEnabled.not) {
+          const notSelector = NOT_VARIANT_SELECTORS[variant]
+          if (notSelector) {
+            selector += notSelector
+          }
+        }
+        continue
+      }
+
+      // Handle group-* variants (with optional named group: group/name-hover)
       if (variant.charCodeAt(0) === 103 && variant.startsWith('group-')) { // 'g' = 103
         if (this.variantEnabled.group) {
           const groupVariant = variant.slice(6)
           prefix = `.group:${groupVariant} `
         }
         continue
       }
+      // Named group: group/name (for nested groups)
+      if (variant.charCodeAt(0) === 103 && variant.startsWith('group/')) { // 'g' = 103
+        if (this.variantEnabled.group) {
+          const groupName = variant.slice(6)
+          prefix = `.group\\/${groupName} `
+        }
+        continue
+      }
 
-      // Handle peer-* variants
+      // Handle peer-* variants (with optional named peer)
       if (variant.charCodeAt(0) === 112 && variant.startsWith('peer-')) { // 'p' = 112
         if (this.variantEnabled.peer) {
           const peerVariant = variant.slice(5)
           prefix = `.peer:${peerVariant} ~ `
         }
+        continue
+      }
+      // Named peer: peer/name
+      if (variant.charCodeAt(0) === 112 && variant.startsWith('peer/')) { // 'p' = 112
+        if (this.variantEnabled.peer) {
+          const peerName = variant.slice(5)
+          prefix = `.peer\\/${peerName} ~ `
+        }
+        continue
+      }
+
+      // Handle has-* variants: has-[input:checked], has-[:focus]
+      if (variant.charCodeAt(0) === 104 && variant.startsWith('has-')) { // 'h' = 104
+        if (this.variantEnabled.has) {
+          const hasValue = variant.slice(4)
+          // Arbitrary value: has-[selector]
+          if (hasValue.charCodeAt(0) === 91 && hasValue.charCodeAt(hasValue.length - 1) === 93) {
+            const inner = hasValue.slice(1, -1)
+            selector += `:has(${inner})`
+          }
+          else {
+            // Named pseudo: has-checked -> :has(:checked)
+            selector += `:has(:${hasValue})`
+          }
+        }
+        continue
+      }
+
+      // Handle aria-* variants: aria-disabled, aria-[sort=ascending]
+      if (variant.charCodeAt(0) === 97 && variant.startsWith('aria-')) { // 'a' = 97
+        if (this.variantEnabled.aria) {
+          const ariaValue = variant.slice(5)
+          // Arbitrary value: aria-[sort=ascending]
+          if (ariaValue.charCodeAt(0) === 91 && ariaValue.charCodeAt(ariaValue.length - 1) === 93) {
+            const inner = ariaValue.slice(1, -1)
+            selector += `[aria-${inner}]`
+          }
+          else {
+            // Boolean attribute: aria-disabled -> [aria-disabled="true"]
+            selector += `[aria-${ariaValue}="true"]`
+          }
+        }
+        continue
+      }
+
+      // Handle data-* variants: data-[state=active], data-loading
+      if (variant.charCodeAt(0) === 100 && variant.startsWith('data-')) { // 'd' = 100
+        if (this.variantEnabled.data) {
+          const dataValue = variant.slice(5)
+          // Arbitrary value: data-[state=active]
+          if (dataValue.charCodeAt(0) === 91 && dataValue.charCodeAt(dataValue.length - 1) === 93) {
+            const inner = dataValue.slice(1, -1)
+            selector += `[data-${inner}]`
+          }
+          else {
+            // Boolean attribute: data-loading -> [data-loading]
+            selector += `[data-${dataValue}]`
+          }
+        }
+        continue
       }
     }
 
@@ -1979,7 +2115,8 @@ export class CSSGenerator {
       return cached || undefined // Convert empty string to undefined
     }
 
-    let result: string | undefined
+    // Collect all media conditions — multiple media variants can stack
+    const mediaConditions: string[] = []
 
     for (let i = 0; i < variantsLen; i++) {
       const variant = variants[i]
@@ -1990,7 +2127,7 @@ export class CSSGenerator {
         const breakpointKey = variant.slice(1)
         const breakpoint = this.screenBreakpoints.get(breakpointKey)
         if (breakpoint) {
-          result = `@container (min-width: ${breakpoint})`
+          const result = `@container (min-width: ${breakpoint})`
           this.mediaQueryCache.set(cacheKey, result)
           return result
         }
@@ -2001,50 +2138,71 @@ export class CSSGenerator {
       if (this.variantEnabled.responsive) {
         const breakpoint = this.screenBreakpoints.get(variant)
         if (breakpoint) {
-          result = `@media (min-width: ${breakpoint})`
-          this.mediaQueryCache.set(cacheKey, result)
-          return result
+          mediaConditions.push(`(min-width: ${breakpoint})`)
+          continue
         }
       }
 
-      // Media preference variants - use switch for common cases
+      // Media preference variants
       switch (variant) {
         case 'print':
-          if (this.variantEnabled.print) {
-            result = '@media print'
-            this.mediaQueryCache.set(cacheKey, result)
-            return result
-          }
+          if (this.variantEnabled.print) mediaConditions.push('print')
           break
         case 'motion-safe':
-          if (this.variantEnabled['motion-safe']) {
-            result = '@media (prefers-reduced-motion: no-preference)'
-            this.mediaQueryCache.set(cacheKey, result)
-            return result
-          }
+          if (this.variantEnabled['motion-safe']) mediaConditions.push('(prefers-reduced-motion: no-preference)')
           break
         case 'motion-reduce':
-          if (this.variantEnabled['motion-reduce']) {
-            result = '@media (prefers-reduced-motion: reduce)'
-            this.mediaQueryCache.set(cacheKey, result)
-            return result
-          }
+          if (this.variantEnabled['motion-reduce']) mediaConditions.push('(prefers-reduced-motion: reduce)')
           break
         case 'contrast-more':
-          if (this.variantEnabled['contrast-more']) {
-            result = '@media (prefers-contrast: more)'
-            this.mediaQueryCache.set(cacheKey, result)
-            return result
-          }
+          if (this.variantEnabled['contrast-more']) mediaConditions.push('(prefers-contrast: more)')
           break
         case 'contrast-less':
-          if (this.variantEnabled['contrast-less']) {
-            result = '@media (prefers-contrast: less)'
-            this.mediaQueryCache.set(cacheKey, result)
-            return result
-          }
+          if (this.variantEnabled['contrast-less']) mediaConditions.push('(prefers-contrast: less)')
+          break
+        case 'landscape':
+          if (this.variantEnabled.landscape) mediaConditions.push('(orientation: landscape)')
+          break
+        case 'portrait':
+          if (this.variantEnabled.portrait) mediaConditions.push('(orientation: portrait)')
+          break
+        case 'forced-colors':
+          if (this.variantEnabled['forced-colors']) mediaConditions.push('(forced-colors: active)')
           break
       }
+
+      // Handle supports-* variant: supports-[display:grid] -> @supports (display: grid)
+      if (variant.charCodeAt(0) === 115 && variant.startsWith('supports-')) { // 's' = 115
+        if (this.variantEnabled.supports) {
+          const supportsValue = variant.slice(9)
+          let supportsQuery: string
+          if (supportsValue.charCodeAt(0) === 91 && supportsValue.charCodeAt(supportsValue.length - 1) === 93) {
+            const inner = supportsValue.slice(1, -1).replace(/_/g, ' ')
+            const colonIdx = inner.indexOf(':')
+            if (colonIdx !== -1) {
+              const prop = inner.slice(0, colonIdx).trim()
+              const val = inner.slice(colonIdx + 1).trim()
+              supportsQuery = `@supports (${prop}: ${val})`
+            }
+            else {
+              supportsQuery = `@supports (${inner})`
+            }
+          }
+          else {
+            supportsQuery = `@supports (${supportsValue})`
+          }
+          // Supports queries don't combine with @media — return directly
+          this.mediaQueryCache.set(cacheKey, supportsQuery)
+          return supportsQuery
+        }
+      }
+    }
+
+    if (mediaConditions.length > 0) {
+      // Combine conditions: @media (min-width: 1024px) and (orientation: landscape)
+      const result = `@media ${mediaConditions.join(' and ')}`
+      this.mediaQueryCache.set(cacheKey, result)
+      return result
     }
 
     this.mediaQueryCache.set(cacheKey, '')  // Use empty string as "no result" marker

packages/crosswind/src/parser.ts

@@ -1042,7 +1042,24 @@ function parseClassImpl(className: string): ParsedClass {
     }
   }
 
-  const parts = cleanClassName.split(':')
+  // Split on colons, but preserve colons inside brackets [...]
+  const parts: string[] = []
+  let current = ''
+  let bracketDepth = 0
+  for (let i = 0; i < cleanClassName.length; i++) {
+    const ch = cleanClassName[i]
+    if (ch === '[') bracketDepth++
+    else if (ch === ']') bracketDepth--
+    if (ch === ':' && bracketDepth === 0) {
+      parts.push(current)
+      current = ''
+    }
+    else {
+      current += ch
+    }
+  }
+  parts.push(current)
+
   const utility = parts[parts.length - 1]
   const variants = parts.slice(0, -1)