diff --git a/index.js b/index.js
index db716bc..81455ca 100644
--- 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
index 90f4128..5024592 100644
--- 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 {