From dbcee1d8e9b9ed9110c91cbe7e36599d9e39a080 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Fri, 17 Jun 2022 11:11:49 +1000
Subject: [PATCH] fix: dark mode topic in StyleSheetStore

---
 src/shared/selector.ts         | 22 +++++++-------
 src/style-sheet-store/index.ts | 55 +++++++++++++++++++---------------
 2 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/shared/selector.ts b/src/shared/selector.ts
index 81304a5..af96e5d 100644
--- a/src/shared/selector.ts
+++ b/src/shared/selector.ts
@@ -93,10 +93,7 @@ export function createNormalizedSelector(
 
   let bitLevel = 1;
 
-  const hasPlatformPrefix =
-    /(^|\b|\w:)(ios|android|native|web|windows|macos):/.test(selector);
-
-  const hasDarkPrefix = /(^|\b|\w:)dark:/.test(selector);
+  const platformPrefix = hasPlatformPrefix(selector);
 
   for (const value of [
     hover,
@@ -111,12 +108,12 @@ export function createNormalizedSelector(
     parentHover,
     parentActive,
     parentFocus,
-    hasPlatformPrefix && platform === "android",
-    hasPlatformPrefix && platform === "ios",
-    hasPlatformPrefix && platform === "web",
-    hasPlatformPrefix && platform === "windows",
-    hasPlatformPrefix && platform === "macos",
-    hasDarkPrefix && darkMode,
+    platformPrefix && platform === "android",
+    platformPrefix && platform === "ios",
+    platformPrefix && platform === "web",
+    platformPrefix && platform === "windows",
+    platformPrefix && platform === "macos",
+    hasDarkPrefix(selector) && darkMode,
   ]) {
     if (value) finalBit |= bitLevel;
     bitLevel = bitLevel * 2;
@@ -150,3 +147,8 @@ export function $(...strings: TemplateStringsArray[]) {
 export function css(...strings: TemplateStringsArray[]) {
   return normalizeCssSelector(strings[0].raw[0]);
 }
+
+export const hasDarkPrefix = RegExp.prototype.test.bind(/(^|\b|\w:)dark:/);
+export const hasPlatformPrefix = RegExp.prototype.test.bind(
+  /(^|\b|\w:)(ios|android|native|web|windows|macos):/
+);
diff --git a/src/style-sheet-store/index.ts b/src/style-sheet-store/index.ts
index d7aba76..26bc2e5 100644
--- a/src/style-sheet-store/index.ts
+++ b/src/style-sheet-store/index.ts
@@ -20,6 +20,7 @@ import {
   createAtRuleSelector,
   createNormalizedSelector,
   CreateSelectorOptions,
+  hasDarkPrefix,
 } from "../shared/selector";
 import { AtRuleTuple, MediaRecord } from "../types/common";
 import vh from "./units/vh";
@@ -214,6 +215,8 @@ export class StyleSheetStore extends ColorSchemeStore {
       return "";
     }
 
+    if (this.preprocessed) return this.preparePreprocessed(className, options);
+
     const selector = createNormalizedSelector(className, {
       ...options,
       darkMode: this.colorScheme === "dark",
@@ -221,29 +224,6 @@ export class StyleSheetStore extends ColorSchemeStore {
       composed: true,
     });
 
-    if (this.preprocessed) {
-      if (this.snapshot[className]) return className;
-
-      const classNames = [className];
-
-      if (options.scopedGroupActive) classNames.push("component-active");
-      if (options.scopedGroupFocus) classNames.push("component-focus");
-      if (options.scopedGroupHover) classNames.push("component-hover");
-
-      const styleArray: StylesArray = [
-        {
-          $$css: true,
-          [className]: classNames.join(" "),
-        } as CompiledStyle,
-      ];
-      styleArray.dynamic = false;
-      this.snapshot = {
-        ...this.snapshot,
-        [className]: styleArray,
-      };
-      return className;
-    }
-
     if (this.snapshot[selector]) return selector;
 
     const topics = new Set<string>();
@@ -307,6 +287,8 @@ export class StyleSheetStore extends ColorSchemeStore {
     reEvaluate();
     init = false;
 
+    if (hasDarkPrefix(className)) topics.add("colorScheme");
+
     this.subscribeMedia((notificationTopics: string[]) => {
       if (notificationTopics.some((topic) => topics.has(topic))) {
         reEvaluate();
@@ -316,6 +298,32 @@ export class StyleSheetStore extends ColorSchemeStore {
     return selector;
   }
 
+  preparePreprocessed(
+    className: string,
+    options: CreateSelectorOptions = {}
+  ): string {
+    if (this.snapshot[className]) return className;
+
+    const classNames = [className];
+
+    if (options.scopedGroupActive) classNames.push("component-active");
+    if (options.scopedGroupFocus) classNames.push("component-focus");
+    if (options.scopedGroupHover) classNames.push("component-hover");
+
+    const styleArray: StylesArray = [
+      {
+        $$css: true,
+        [className]: classNames.join(" "),
+      } as CompiledStyle,
+    ];
+    styleArray.dynamic = false;
+    this.snapshot = {
+      ...this.snapshot,
+      [className]: styleArray,
+    };
+    return className;
+  }
+
   /**
    * ClassNames are made of multiple atomic styles. eg "a b" are the styles [a, b]
    *
@@ -464,7 +472,6 @@ export class StyleSheetStore extends ColorSchemeStore {
         if (params.includes("height")) topics.add("height");
         if (params.includes("orientation")) topics.add("orientation");
         if (params.includes("aspect-ratio")) topics.add("window");
-        if (params.includes("prefers-color-scheme")) topics.add("colorScheme");
       }
     }