From 49c4aa03af8e2cdcaad0749b691027328911f4d2 Mon Sep 17 00:00:00 2001
From: VladBrok <vlad.brok99@gmail.com>
Date: Wed, 14 Feb 2024 18:18:00 +0100
Subject: [PATCH] handle nested light-dark

---
 index.js      | 21 +++++++++++++++------
 index.test.js | 24 ++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/index.js b/index.js
index 8af77eb..db716bc 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
 const PREFERS_COLOR_ONLY = /^\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)$/
 const PREFERS_COLOR = /\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/g
-const LIGHT_DARK = /light-dark\(\s*((?:[^(),]|\(.+\))+?)\s*,\s*((?:[^(),]|\(.+\))+?)\s*\)/gs
+const LIGHT_DARK =
+  /light-dark\(\s*((?:[^(),]|\(.+\))+?)\s*,\s*((?:[^(),]|\(.+\))+?)\s*\)/gs
 const STRING = /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'/dg
 
 function escapeRegExp(string) {
@@ -30,15 +31,15 @@ function addColorSchemeMedia(isDark, propValue, declaration, postcss) {
   declaration.parent.after(mediaQuery)
 }
 
-function replaceLightDark(isDark, declaration, stringBoundaries) {
-  return declaration.value.replaceAll(
+function replaceLightDark(isDark, declarationValue, stringBoundaries) {
+  return declarationValue.replaceAll(
     LIGHT_DARK,
     (match, lightColor, darkColor, offset) => {
       let isInsideString = stringBoundaries.some(
         boundary => offset > boundary[0] && offset < boundary[1]
       )
       if (isInsideString) return match
-      return isDark ? darkColor : lightColor
+      return replaceLightDark(isDark, isDark ? darkColor : lightColor, [])
     }
   )
 }
@@ -154,9 +155,17 @@ module.exports = (opts = {}) => {
         match = STRING.exec(value)
       }
 
-      let lightValue = replaceLightDark(false, declaration, stringBoundaries)
+      let lightValue = replaceLightDark(
+        false,
+        declaration.value,
+        stringBoundaries
+      )
       if (declaration.value === lightValue) return
-      let darkValue = replaceLightDark(true, declaration, stringBoundaries)
+      let darkValue = replaceLightDark(
+        true,
+        declaration.value,
+        stringBoundaries
+      )
 
       addColorSchemeMedia(false, lightValue, declaration, postcss)
       addColorSchemeMedia(true, darkValue, declaration, postcss)
diff --git a/index.test.js b/index.test.js
index b377125..90f4128 100644
--- a/index.test.js
+++ b/index.test.js
@@ -407,6 +407,30 @@ html:where(.is-light) {
   )
 })
 
+test('transforms nested light-dark()', () => {
+  run(
+    `html {
+  border: 1px solid light-dark(light-dark(white, red), light-dark(blue, light-dark(gray, rgb(255 122 127 / .2))))
+}`,
+    `@media (prefers-color-scheme:dark) {
+    html:where(:not(.is-light)) {
+        border: 1px solid rgb(255 122 127 / .2)
+    }
+}
+html:where(.is-dark) {
+    border: 1px solid rgb(255 122 127 / .2)
+}
+@media (prefers-color-scheme:light) {
+    html:where(:not(.is-dark)) {
+        border: 1px solid white
+    }
+}
+html:where(.is-light) {
+    border: 1px solid white
+}`
+  )
+})
+
 test('transforms light-dark() with various color formats', () => {
   run(
     `html {