diff --git a/__tests__/tailwindcss/runner/index.tsx b/__tests__/tailwindcss/runner/index.tsx index e4686a5..3a714e1 100644 --- a/__tests__/tailwindcss/runner/index.tsx +++ b/__tests__/tailwindcss/runner/index.tsx @@ -14,10 +14,8 @@ import { TestStyleSheetRuntime, TestStyleSheetStoreConstructor, } from "../../style-sheet/tests"; -import { - isRuntimeFunction, - parseString, -} from "../../../src/style-sheet/style-functions"; +import { parseString } from "../../../src/style-sheet/style-functions"; +import { isRuntimeFunction } from "../../../src/style-sheet/style-function-helpers"; export type Test = [string, TestValues] | [string, StyleRecord, true]; diff --git a/src/postcss/serialize.ts b/src/postcss/serialize.ts index 1a1f659..873cbfe 100644 --- a/src/postcss/serialize.ts +++ b/src/postcss/serialize.ts @@ -17,7 +17,7 @@ import { import { isRuntimeFunction, matchRuntimeFunction, -} from "../style-sheet/style-functions"; +} from "../style-sheet/style-function-helpers"; import { ExtractedValues } from "./plugin"; export function serializer({ diff --git a/src/style-sheet/color-scheme.ts b/src/style-sheet/color-scheme.ts index 05c8030..eb9f17b 100644 --- a/src/style-sheet/color-scheme.ts +++ b/src/style-sheet/color-scheme.ts @@ -5,35 +5,28 @@ export type ColorSchemeSystem = "light" | "dark" | "system"; export abstract class ColorSchemeStore { colorSchemeListeners = new Set<() => void>(); - colorScheme: ColorSchemeName; - colorSchemeSystem: ColorSchemeSystem; - - constructor(colorSchemeSystem?: ColorSchemeSystem) { - if (colorSchemeSystem === "system" || colorSchemeSystem === undefined) { - this.colorScheme = Appearance.getColorScheme() || "light"; - this.colorSchemeSystem = "system"; - } else { - this.colorScheme = colorSchemeSystem; - this.colorSchemeSystem = colorSchemeSystem; - } + colorScheme: ColorSchemeName = Appearance.getColorScheme() || "light"; + colorSchemeSystem: ColorSchemeSystem = "system"; + constructor() { if (typeof localStorage !== "undefined") { + const isDarkMode = window.matchMedia( + "(prefers-color-scheme: dark)" + ).matches; + if ( localStorage.theme === "dark" || - (!("theme" in localStorage) && - window.matchMedia("(prefers-color-scheme: dark)").matches) + (!("theme" in localStorage) && isDarkMode) ) { document.documentElement.classList.add("dark"); + this.colorScheme = "dark"; } else { document.documentElement.classList.remove("dark"); + this.colorScheme = "light"; } this.subscribeColorScheme(() => { - if (this.colorSchemeSystem === "system") { - localStorage.removeItem("theme"); - } else { - localStorage.theme = this.colorSchemeSystem; - } + localStorage.theme = this.colorScheme; }); } } diff --git a/src/style-sheet/style-function-helpers.ts b/src/style-sheet/style-function-helpers.ts new file mode 100644 index 0000000..1a7a8b7 --- /dev/null +++ b/src/style-sheet/style-function-helpers.ts @@ -0,0 +1,26 @@ +/** + * These need to be in a separate file as they are also used by Babel + * + * The main file imports 'react-native' which needs to be compiled + */ +export function isRuntimeFunction(input: string | number) { + if (typeof input !== "string") return false; + + return ( + input === "hairlineWidth()" || + input.startsWith("roundToNearestPixel(") || + input.startsWith("getPixelSizeForLayoutSize(") || + input.startsWith("getFontSizeForLayoutSize(") || + input.startsWith("roundToNearestFontScale(") || + input.startsWith("platformColor(") || + input.startsWith("platform(") + ); +} + +export function matchRuntimeFunction( + input: string +): [string, string] | [undefined, undefined] { + const matches = input.match(/(.+?)\((.*)\)/); + if (!matches) return [undefined, undefined]; + return [matches[1], matches[2]]; +} diff --git a/src/style-sheet/style-functions.ts b/src/style-sheet/style-functions.ts index 21070f9..f99a98d 100644 --- a/src/style-sheet/style-functions.ts +++ b/src/style-sheet/style-functions.ts @@ -1,4 +1,8 @@ import { PixelRatio, Platform, PlatformColor, StyleSheet } from "react-native"; +import { + isRuntimeFunction, + matchRuntimeFunction, +} from "./style-function-helpers"; export function parseStyleFunction( functionString?: string, @@ -33,28 +37,6 @@ export function parseStyleFunction( throw new Error(`Unknown functionString: ${functionString}`); } -export function isRuntimeFunction(input: string | number) { - if (typeof input !== "string") return false; - - return ( - input === "hairlineWidth()" || - input.startsWith("roundToNearestPixel(") || - input.startsWith("getPixelSizeForLayoutSize(") || - input.startsWith("getFontSizeForLayoutSize(") || - input.startsWith("roundToNearestFontScale(") || - input.startsWith("platformColor(") || - input.startsWith("platform(") - ); -} - -export function matchRuntimeFunction( - input: string -): [string, string] | [undefined, undefined] { - const matches = input.match(/(.+?)\((.*)\)/); - if (!matches) return [undefined, undefined]; - return [matches[1], matches[2]]; -} - export function parseString S, S>( input: string, callback: T