Check this please~

src/runtime/helpers.ts

@@ -0,0 +1,71 @@
+// prettier-ignore
+import Duomo from "./runtime"
+
+export function localStoragePreference() {
+	if (!(Duomo.localStorageKey in window.localStorage)) {
+		return null
+	}
+	const value = window.localStorage[Duomo.localStorageKey]
+	if (value !== "light" && value !== "dark") {
+		return null
+	}
+	return value
+}
+
+// prettier-ignore
+export function matchMediaPreference() {
+	if (!("matchMedia" in window)) {
+		return null
+	}
+	const matches = window.matchMedia("(prefers-color-scheme: dark)").matches
+	const value = ({
+		false: "light",
+		true: "dark",
+	} as { [key: string]: string })["" + matches]
+	return value
+}
+
+// prettier-ignore
+export function isKeyDownDarkMode(e: KeyboardEvent) {
+	const ok = (
+		!e.ctrlKey &&
+		!e.altKey &&
+		(e.key.toLowerCase() === "`" || e.keyCode === 192)
+	)
+	return ok
+}
+
+// prettier-ignore
+export function isKeyDownDebugMode(e: KeyboardEvent) {
+	const ok = (
+		e.ctrlKey &&
+		!e.altKey &&
+		(e.key.toLowerCase() === "`" || e.keyCode === 192)
+	)
+	return ok
+}
+
+// prettier-ignore
+export function parseDurationMs(durStr : string){
+	let [numStr, unit] = durStr.trim().split(/(ms|s|m)$/);
+	if(!numStr){
+		throw new Error(`parseDurationMs: expected \`ms\`, \`s\`, or \`m\`; durStr=${durStr}`)
+	}
+
+	let n = +numStr;
+  switch (unit) {
+    case 'ms':
+      // No-op
+      break;
+    case 's':
+      n *= 1000;
+      break;
+    case 'm':
+      n *= 1000 * 60;
+      break;
+    default:
+      // No-op
+      break;
+  }
+  return n;
+}

src/runtime/runtime.ts

@@ -1,3 +1,5 @@
+import * as helper from './helpers'
+
 declare global {
 	interface Window {
 		Duomo: Runtime
@@ -20,51 +22,6 @@ interface Runtime {
 	init(env?: Env, options?: RuntimeOptions): () => void
 }
 
-// prettier-ignore
-function localStoragePreference() {
-	if (!(Duomo.localStorageKey in window.localStorage)) {
-		return null
-	}
-	const value = window.localStorage[Duomo.localStorageKey]
-	if (value !== "light" && value !== "dark") {
-		return null
-	}
-	return value
-}
-
-// prettier-ignore
-function matchMediaPreference() {
-	if (!("matchMedia" in window)) {
-		return null
-	}
-	const matches = window.matchMedia("(prefers-color-scheme: dark)").matches
-	const value = ({
-		false: "light",
-		true: "dark",
-	} as { [key: string]: string })["" + matches]
-	return value
-}
-
-// prettier-ignore
-function isKeyDownDarkMode(e: KeyboardEvent) {
-	const ok = (
-		!e.ctrlKey &&
-		!e.altKey &&
-		(e.key.toLowerCase() === "`" || e.keyCode === 192)
-	)
-	return ok
-}
-
-// prettier-ignore
-function isKeyDownDebugMode(e: KeyboardEvent) {
-	const ok = (
-		e.ctrlKey &&
-		!e.altKey &&
-		(e.key.toLowerCase() === "`" || e.keyCode === 192)
-	)
-	return ok
-}
-
 class Duomo implements Runtime {
 	static localStorageKey = "duomo-theme-preference"
 
@@ -77,6 +34,7 @@ class Duomo implements Runtime {
 	// Tracks whether dark mode was set once; for FOUC.
 	// FOUC: Flash Of Unstyled Content.
 	#didInitDarkMode: boolean = false
+	#shouldNoOpDarkMode: boolean = false
 
 	#deferrers: (() => void)[] = []
 
@@ -95,8 +53,8 @@ class Duomo implements Runtime {
 
 		this.#html = document.documentElement
 
-		const lsPref = localStoragePreference()
-		const mmPref = matchMediaPreference()
+		const lsPref = helper.localStoragePreference()
+		const mmPref = helper.matchMediaPreference()
 		if (lsPref || mmPref) {
 			this.setDarkMode((lsPref || mmPref) === "dark")
 		}
@@ -115,14 +73,14 @@ class Duomo implements Runtime {
 		// `keydown` handlers.
 		if (env === "development") {
 			const handleDarkMode = (e: KeyboardEvent) => {
-				if (isKeyDownDarkMode(e)) {
+				if (helper.isKeyDownDarkMode(e)) {
 					this.toggleDarkMode()
 				}
 			}
 			document.addEventListener("keydown", handleDarkMode)
 			this.#deferrers.push(() => document.removeEventListener("keydown", handleDarkMode))
 			const handleDebugMode = (e: KeyboardEvent) => {
-				if (isKeyDownDebugMode(e)) {
+				if (helper.isKeyDownDebugMode(e)) {
 					this.toggleDebugMode()
 				}
 			}
@@ -144,7 +102,10 @@ class Duomo implements Runtime {
 		return this.#darkMode
 	}
 	setDarkMode(mode: boolean) {
+		if (this.#shouldNoOpDarkMode) return;
 		this.#darkMode = mode
+
+		const durValue = getComputedStyle(document.documentElement).getPropertyValue('--default-theme-transition-duration');
 
 		const toggle = (mode: boolean) => {
 			const action = !mode
@@ -160,12 +121,14 @@ class Duomo implements Runtime {
 			this.#didInitDarkMode = true
 			return
 		} else {
+			this.#shouldNoOpDarkMode = true
 			this.#html!.setAttribute("data-theme-effect", "true")
 			setTimeout(() => {
 				toggle(mode)
 				setTimeout(() => {
 					this.#html!.removeAttribute("data-theme-effect")
-				}, 300)
+					this.#shouldNoOpDarkMode = false
+				}, helper.parseDurationMs(durValue))
 			}, 25)
 		}
 	}

src/sass/getters/ranges.scss

@@ -1,5 +1,6 @@
 @use "../configuration" as conf;
 @use "../utils";
+@use 'sass:list';
 
 // TODO: Add support for `bar`?
 // Then we can have `bar` and `cap`.
@@ -52,3 +53,15 @@
 @function percent-range() {
 	@return conf.$percent-range;
 }
+
+@function decimal-range($begin, $end) {
+	$list: ();
+	@each $range in conf.$percent-range {
+		$list: list.append($list, $range * $end);
+	}
+	@return $list;
+}
+// decimal-range(0, 0.1); // -> (0, 0.01, 0.02, 0.025, 0.03, ...)
+// decimal-range(0, 1);   // -> (0, 0.1, 0.2, 0.25, 0.3, ...)
+// decimal-range(0, 10);  // -> (0, 1, 2, 2.5, 3, ...)
+// decimal-range(0, 100); // -> (0, 10, 20, 25, 30, ...)

tests/getters/ranges.test.ts

@@ -2,6 +2,7 @@
  * @jest-environment node
  */
 declare function sass(data: string): string
+declare function errSass(testStr: string): Function
 
 test("integration", () => {
 	const css = sass(`
@@ -49,3 +50,11 @@ $end: -1;
 }
 `.trim())
 })
+
+//test decimal-range
+test("integration", () => {
+	expect(errSass(`decimal-range(0, 0.1)`)).toThrowError("0 0.01 0.02 0.025 0.03 0.04 0.05 0.06 0.07 0.075 0.08 0.09 0.1")
+	expect(errSass(`decimal-range(0, 1)`)).toThrowError("0 0.1 0.2 0.25 0.3 0.4 0.5 0.6 0.7 0.75 0.8 0.9 1")
+	expect(errSass(`decimal-range(0, 10)`)).toThrowError("0 1 2 2.5 3 4 5 6 7 7.5 8 9 10")
+	expect(errSass(`decimal-range(0, 100)`)).toThrowError("0 10 20 25 30 40 50 60 70 75 80 90 100")
+})