refactor: move hashing of vars (--tw-<...>) from preset-tailwind in…

…to core
tw-in-js · Feb 12, 2022 · ae979d1 · ae979d1
1 parent 80ce410
commit ae979d1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git a/.changeset/nervous-clocks-drive.md b/.changeset/nervous-clocks-drive.md
@@ -0,0 +1,6 @@
+---
+'@twind/preset-tailwind': patch
+'twind': patch
+---
+
+refactor: move hashing of vars (`--tw-<...>`) from preset-tailwind into core — this allows var hashing without the tailwind preset
diff --git a/packages/preset-tailwind/src/index.ts b/packages/preset-tailwind/src/index.ts
@@ -5,7 +5,7 @@
  * @module
  */
 
-import type { Context, Preset } from 'twind'
+import type { Preset } from 'twind'
 import type { TailwindTheme } from './types'
 
 import theme from './defaultTheme'
@@ -23,27 +23,11 @@ export interface TailwindPresetOptions {
 export default function presetTailwind({
   disablePreflight,
 }: TailwindPresetOptions = {}): Preset<TailwindTheme> {
-  return ({ stringify }) => ({
+  return {
     // allow other preflight to run
     preflight: disablePreflight ? undefined : preflight,
     theme,
     variants,
     rules,
-    // Hash/Tag tailwind custom properties during serialization
-    stringify(property, value, context) {
-      return stringify(hashVars(property, context), hashVars(value, context), context)
-    },
-  })
-}
-
-function hashVars(value: string, { h }: Context<TailwindTheme>): string {
-  // PERF: check for --tw before running the regexp
-  // if (value.includes('--tw')) {
-  return value.replace(
-    /--(tw-[\w-]+)\b/g,
-    (_, property: string) => '--' + h(property).replace('#', ''),
-  )
-  // }
-
-  // return value
+  }
 }
diff --git a/packages/twind/src/internal/context.ts b/packages/twind/src/internal/context.ts
@@ -32,6 +32,7 @@ type VariantFunction<Theme extends BaseTheme = BaseTheme> = (
 export function createContext<Theme extends BaseTheme = BaseTheme>({
   theme,
   darkMode,
+  darkColor,
   variants,
   rules,
   hash,
@@ -63,20 +64,27 @@ export function createContext<Theme extends BaseTheme = BaseTheme>({
       : '@media (prefers-color-scheme:dark)',
   ])
 
+  const h =
+    typeof hash == 'function'
+      ? (value: string) => hash(value, defaultHash)
+      : hash
+      ? defaultHash
+      : identity
+
   return {
     theme: makeThemeFunction(theme),
 
     e: escape,
 
-    h:
-      typeof hash == 'function'
-        ? (value) => hash(value, defaultHash)
-        : hash
-        ? defaultHash
-        : identity,
+    h,
 
     s(property, value) {
-      return stringify(property, value, this)
+      // Hash/Tag tailwind custom properties during serialization
+      return stringify(hashVars(property, h), hashVars(value, h), this)
+    },
+
+    d(section, key, color) {
+      return darkColor?.(section, key, this, color)
     },
 
     v(value) {
@@ -220,3 +228,15 @@ function toCondition(value: string | RegExp): RegExp {
     ? new RegExp('^' + value + (value.includes('$') || value.slice(-1) == '-' ? '' : '$'))
     : value
 }
+
+function hashVars(value: string, h: Context['h']): string {
+  // PERF: check for --tw before running the regexp
+  // if (value.includes('--tw')) {
+  return value.replace(
+    /--(tw-[\w-]+)\b/g,
+    (_, property: string) => '--' + h(property).replace('#', ''),
+  )
+  // }
+
+  // return value
+}