Fix to respect !important

postcss · Apr 20, 2024 · ee66b3f · ee66b3f
1 parent aaee7ba
commit ee66b3f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/index.js b/index.js
@@ -21,6 +21,7 @@ function addColorSchemeMedia(isDark, propValue, declaration, postcss) {
     postcss.rule({
       nodes: [
         postcss.decl({
+          important: declaration.important,
           prop: declaration.prop,
           value: propValue
         })

diff --git a/index.test.js b/index.test.js
@@ -407,6 +407,30 @@ html:where(.is-light) {
   )
 })
 
+test('transforms light-dark() with !important', () => {
+  run(
+    `html {
+    border: 1px solid light-dark(white, black) !important
+  }`,
+    `@media (prefers-color-scheme:dark) {
+    html:where(:not(.is-light)) {
+        border: 1px solid black !important
+    }
+}
+html:where(.is-dark) {
+    border: 1px solid black !important
+}
+@media (prefers-color-scheme:light) {
+    html:where(:not(.is-dark)) {
+        border: 1px solid white !important
+    }
+}
+html:where(.is-light) {
+    border: 1px solid white !important
+}`
+  )
+})
+
 test('transforms nested light-dark()', () => {
   run(
     `html {