From 9a9ab9459adc461d40fe9d2543f9500c75735ae7 Mon Sep 17 00:00:00 2001
From: Sascha Tandel <s.tandel@kenoxa.de>
Date: Fri, 18 Dec 2020 22:40:34 +0100
Subject: [PATCH] feat: variants are configurable

---
 src/process/decorate.ts  | 2 +-
 src/process/index.ts     | 9 ++++++---
 src/process/serialize.ts | 3 +--
 src/tailwind/variants.ts | 2 +-
 src/types/twind.ts       | 9 +++++++++
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/process/decorate.ts b/src/process/decorate.ts
index ea7d5dca5..cfa2a6fde 100644
--- a/src/process/decorate.ts
+++ b/src/process/decorate.ts
@@ -1,7 +1,6 @@
 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': {...} }
@@ -9,6 +8,7 @@ import { variants } from '../tailwind/variants'
 // => { '@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
diff --git a/src/process/index.ts b/src/process/index.ts
index 03942147f..5ce4a6e1a 100644
--- a/src/process/index.ts
+++ b/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(
diff --git a/src/process/serialize.ts b/src/process/serialize.ts
index 924fe501a..5039668ef 100644
--- a/src/process/serialize.ts
+++ b/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
diff --git a/src/tailwind/variants.ts b/src/tailwind/variants.ts
index f2f2fc1c7..5be54908a 100644
--- a/src/tailwind/variants.ts
+++ b/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)',
diff --git a/src/types/twind.ts b/src/types/twind.ts
index 9598d900c..32c6e9677 100644
--- a/src/types/twind.ts
+++ b/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.
    *