From d378b04f92adc5fc6042fce734d899037331f770 Mon Sep 17 00:00:00 2001
From: Alejandro Torrado <aletorrado@gmail.com>
Date: Mon, 22 Apr 2024 15:46:36 -0300
Subject: [PATCH] Added a feature to preserve or not the original code (#34)

* Added a feature to preserve or not the original code

* Optimization

* Renamed the inverted the preserve param logic, into a onlySelectors param.

* Renamed onlySelectors to removeMedia

* Added test to the removeMedia feature
---
 index.d.ts    |  1 +
 index.js      | 19 ++++++++++++++++---
 index.test.js | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 1936f41..c26cfba 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -5,6 +5,7 @@ declare const darkClass: PluginCreator<{
   lightSelector?: string
   rootSelector?: string | string[]
   useWhere?: boolean
+  removeMedia?: boolean
 }>
 
 export default darkClass
diff --git a/index.js b/index.js
index a3c4f95..efd0ad7 100644
--- a/index.js
+++ b/index.js
@@ -67,6 +67,8 @@ module.exports = (opts = {}) => {
 
   let useWhere = opts.useWhere ?? true
 
+  let removeMedia = opts.removeMedia ?? false
+
   let uniqueRoots = roots
   if (uniqueRoots.includes('html')) {
     uniqueRoots = uniqueRoots.filter(i => i !== ':root')
@@ -128,13 +130,17 @@ module.exports = (opts = {}) => {
             if (node.type === 'atrule') {
               fixed = node.clone()
               processNodes(fixed, fixedSelector)
-              processNodes(node, nodeSelector)
+              if (!removeMedia) {
+                processNodes(node, nodeSelector)
+              }
             } else if (node.type === 'rule') {
               if (!node.selector.includes(nodeSelector)) {
                 fixed = node.clone({
                   selectors: processSelectors(node.selectors, fixedSelector)
                 })
-                node.selectors = processSelectors(node.selectors, nodeSelector)
+                if (!removeMedia) {
+                  node.selectors = processSelectors(node.selectors, nodeSelector)
+                }
               }
             } else if (node.type === 'comment') {
               fixed = node.clone()
@@ -144,6 +150,9 @@ module.exports = (opts = {}) => {
               last = fixed
             }
           })
+          if (removeMedia) {
+            atrule.remove()
+          }
         } else if (PREFERS_COLOR.test(params) && params.includes(' and ')) {
           if (atrule.params.includes(' and ')) {
             let fixed = atrule.clone({
@@ -155,7 +164,11 @@ module.exports = (opts = {}) => {
             })
             atrule.after(fixed)
             processNodes(fixed, fixedSelector)
-            processNodes(atrule, nodeSelector)
+            if (!removeMedia) {
+              processNodes(atrule, nodeSelector)
+            } else {
+              atrule.remove()
+            }
           }
         }
       }
diff --git a/index.test.js b/index.test.js
index e9fe834..993779c 100644
--- a/index.test.js
+++ b/index.test.js
@@ -725,3 +725,42 @@ test('transforms complex nested light-dark()', () => {
 }`
   )
 })
+
+test('removes media using transforms complex nested light-dark()', () => {
+  run(
+    `.light-dark-function-mix-a {
+    color: light-dark(color-mix(in oklch, red, light-dark(cyan, rgb(0, 0, 0))), blue);
+}`,
+`:where(html.is-dark) .light-dark-function-mix-a {
+    color: blue
+}
+:where(html.is-light) .light-dark-function-mix-a {
+    color: color-mix(in oklch, red, cyan)
+}`,
+    { removeMedia: true }
+  )
+})
+
+test('removes media with  combined queries in the middle - dark scheme', () => {
+  run(
+    `@media (width > 0) and (prefers-color-scheme: dark) and (width > 0) {
+    a { color: white }
+  }`,
+    `@media (width > 0) and (width > 0) {
+    :where(html.is-dark) a { color: white }
+  }`,
+  { removeMedia: true }
+)
+})
+
+test('removes media with combined queries in the middle - light scheme', () => {
+  run(
+    `@media (width > 0) and (prefers-color-scheme: light) and (width > 0) {
+    a { color: white }
+  }`,
+    `@media (width > 0) and (width > 0) {
+    :where(html.is-light) a { color: white }
+  }`,
+    { removeMedia: true }
+  )
+})