kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-13 17:35:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: dark mode topic in StyleSheetStore

Browse Source
This commit is contained in:
Mark Lawlor
2022-06-17 11:11:49 +10:00
parent ed0aa32b60
commit dbcee1d8e9
2 changed files with 43 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/shared/selector.ts
View File

@@ -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):/
);

55
src/style-sheet-store/index.ts
View File

@@ -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");
}
}