feat: variants are configurable

src/process/decorate.ts

@@ -1,14 +1,14 @@
 import type { Context, CSSRules, Rule, DarkMode } from '../types'
 
 import { tail, escape } from '../internal/util'
-import { variants } from '../tailwind/variants'
 
 // Wraps a CSS rule object with variant at-rules and pseudo classes
 // { '.selector': {...} }
 // => { '&:hover': { '.selector': {...} } }
 // => { '@media (mind-width: ...)': { '&:hover': { '.selector': {...} } } }
 export const decorate = (
   darkMode: DarkMode,
+  variants: Record<string, string>,
   { theme, tag }: Context,
 ): ((translation: CSSRules, rule: Rule) => CSSRules) => {
   // Select the wrapper for a variant

src/process/index.ts

@@ -11,6 +11,7 @@ import type {
 
 import { corePlugins } from '../tailwind/plugins'
 import { createPreflight } from '../tailwind/preflight'
+import { coreVariants } from '../tailwind/variants'
 
 import { cssomInjector, noOpInjector } from '../injectors'
 import { warn } from '../modes'
@@ -45,7 +46,7 @@ const toString = (rule: Rule, directive = rule.d): string => {
 
 export const configure = (
   config: Configuration = {},
-): { init: () => void; process: (tokens: unknown[]) => string, theme: ThemeResolver } => {
+): { init: () => void; process: (tokens: unknown[]) => string; theme: ThemeResolver } => {
   const theme = makeThemeResolver(config.theme)
 
   const mode = config.mode || warn
@@ -107,11 +108,13 @@ export const configure = (
     }
   }
 
+  const variants = { ...coreVariants, ...config.variants }
+
   // Apply variants to a translation
-  const decorate = makeDecorate(config.darkMode || 'media', context)
+  const decorate = makeDecorate(config.darkMode || 'media', variants, context)
 
   // Serialize a translation to css
-  const serialize = makeSerialize(sanitize(config.prefix, autoprefix, noprefix), context)
+  const serialize = makeSerialize(sanitize(config.prefix, autoprefix, noprefix), variants, context)
 
   // Inject css into the target enviroment
   const inject = makeInject(

src/process/serialize.ts

@@ -8,8 +8,6 @@ import {
   atRulePresedence,
 } from '../internal/presedence'
 
-import { variants } from '../tailwind/variants'
-
 export interface RuleWithPresedence {
   r: string
   p: number
@@ -19,6 +17,7 @@ const stringifyBlock = (body: string, selector: string): string => selector + '{
 
 export const serialize = (
   prefix: Prefixer,
+  variants: Record<string, string>,
   { theme, tag }: Context,
 ): ((css: CSSRules, className?: string, rule?: Rule) => RuleWithPresedence[]) => {
   // Hash/Tag tailwind custom properties during serialization

src/tailwind/variants.ts

@@ -1,4 +1,4 @@
-export const variants: Record<string, string> = {
+export const coreVariants: Record<string, string> = {
   ':dark': '@media (prefers-color-scheme:dark)',
   ':sticky': '@supports ((position: -webkit-sticky) or (position:sticky))',
   ':motion-reduce': '@media (prefers-reduced-motion:reduce)',

src/types/twind.ts

@@ -73,6 +73,15 @@ export interface Configuration {
 
   plugins?: Plugins
 
+  /**
+   * ```js
+   * {
+   *   ':new-variant': '& .selector',
+   * }
+   * ```
+   */
+  variants?: Record<string, string>
+
   /**
    * Sets a cryptographic nonce (number used once) on the enclosing `<style>` tag when generating a page on demand.
    *