chore: wip

Author: chrisbbreuer

packages/headwind/src/config.ts

@@ -93,6 +93,7 @@ export const defaultConfig: HeadwindConfig = {
     peer: true,
     before: true,
     after: true,
+    marker: true,
     first: true,
     last: true,
     odd: true,
@@ -103,6 +104,23 @@ export const defaultConfig: HeadwindConfig = {
     checked: true,
     'focus-within': true,
     'focus-visible': true,
+    placeholder: true,
+    selection: true,
+    file: true,
+    required: true,
+    valid: true,
+    invalid: true,
+    'read-only': true,
+    autofill: true,
+    open: true,
+    closed: true,
+    empty: true,
+    enabled: true,
+    only: true,
+    target: true,
+    indeterminate: true,
+    default: true,
+    optional: true,
     print: true,
     rtl: true,
     ltr: true,

packages/headwind/src/generator.ts

@@ -151,6 +151,62 @@ export class CSSGenerator {
       else if (variant === 'after' && this.config.variants.after) {
         selector += '::after'
       }
+      else if (variant === 'marker' && this.config.variants.marker) {
+        selector += '::marker'
+      }
+      else if (variant === 'placeholder' && this.config.variants.placeholder) {
+        selector += '::placeholder'
+      }
+      else if (variant === 'selection' && this.config.variants.selection) {
+        selector += '::selection'
+      }
+      else if (variant === 'file' && this.config.variants.file) {
+        selector += '::file-selector-button'
+      }
+      // Form state pseudo-classes
+      else if (variant === 'required' && this.config.variants.required) {
+        selector += ':required'
+      }
+      else if (variant === 'valid' && this.config.variants.valid) {
+        selector += ':valid'
+      }
+      else if (variant === 'invalid' && this.config.variants.invalid) {
+        selector += ':invalid'
+      }
+      else if (variant === 'read-only' && this.config.variants['read-only']) {
+        selector += ':read-only'
+      }
+      else if (variant === 'autofill' && this.config.variants.autofill) {
+        selector += ':autofill'
+      }
+      // Additional state pseudo-classes
+      else if (variant === 'open' && this.config.variants.open) {
+        selector += '[open]'
+      }
+      else if (variant === 'closed' && this.config.variants.closed) {
+        selector += ':not([open])'
+      }
+      else if (variant === 'empty' && this.config.variants.empty) {
+        selector += ':empty'
+      }
+      else if (variant === 'enabled' && this.config.variants.enabled) {
+        selector += ':enabled'
+      }
+      else if (variant === 'only' && this.config.variants.only) {
+        selector += ':only-child'
+      }
+      else if (variant === 'target' && this.config.variants.target) {
+        selector += ':target'
+      }
+      else if (variant === 'indeterminate' && this.config.variants.indeterminate) {
+        selector += ':indeterminate'
+      }
+      else if (variant === 'default' && this.config.variants.default) {
+        selector += ':default'
+      }
+      else if (variant === 'optional' && this.config.variants.optional) {
+        selector += ':optional'
+      }
       // Group/Peer variants
       else if (variant.startsWith('group-') && this.config.variants.group) {
         const groupVariant = variant.slice(6) // Remove 'group-'

packages/headwind/src/types.ts

@@ -36,7 +36,8 @@ export interface VariantConfig {
   // Pseudo-elements
   before: boolean
   after: boolean
-  // Pseudo-classes
+  marker: boolean
+  // Pseudo-classes - Basic
   first: boolean
   last: boolean
   odd: boolean
@@ -47,6 +48,25 @@ export interface VariantConfig {
   checked: boolean
   'focus-within': boolean
   'focus-visible': boolean
+  // Pseudo-classes - Form states
+  placeholder: boolean
+  selection: boolean
+  file: boolean
+  required: boolean
+  valid: boolean
+  invalid: boolean
+  'read-only': boolean
+  autofill: boolean
+  // Pseudo-classes - Additional states
+  open: boolean
+  closed: boolean
+  empty: boolean
+  enabled: boolean
+  only: boolean
+  target: boolean
+  indeterminate: boolean
+  default: boolean
+  optional: boolean
   // Media
   print: boolean
   // Direction