From b520b895fd556f9583fa0b6df66698c911de7758 Mon Sep 17 00:00:00 2001
From: Adam Argyle <argyle@google.com>
Date: Mon, 16 Oct 2023 13:30:04 -0700
Subject: [PATCH] fixes #44

---
 index.js          | 11 +++++++++--
 index.test.js     | 24 ++++++++++++++++++++++++
 package-lock.json |  6 +++---
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index baa31ef..8c4f3f7 100644
--- a/index.js
+++ b/index.js
@@ -30,7 +30,13 @@ const getAdaptivePropSelector = (selector) => {
 
 /** @type { import('postcss').PluginCreator<any> }*/
 module.exports = (options) => {
-  const { files, adaptive_prop_selector, custom_selector, layer, ...props } = options
+  const { 
+    files, 
+    adaptive_prop_selector, 
+    custom_selector, 
+    custom_selector_dark, 
+    layer, ...props
+  } = options
 
   const FilePropsCache = new Map();
 
@@ -55,6 +61,7 @@ module.exports = (options) => {
       return {
         Once(node, { parse, result, Rule, AtRule }) {
           let target_selector = custom_selector || ':root'
+          let target_selector_dark = custom_selector_dark || ':root'
 
           if (!files && !Object.keys(props).length) {
             return console.warn('postcss-jit-props: Variable source(s) not passed.')
@@ -121,7 +128,7 @@ module.exports = (options) => {
           STATE.mapped_dark = new Set()
 
           STATE.target_rule = new Rule({ selector: target_selector, source: node.first.source })
-          STATE.target_rule_dark = new Rule({ selector: target_selector, source: node.first.source })
+          STATE.target_rule_dark = new Rule({ selector: target_selector_dark, source: node.first.source })
           STATE.target_media_dark = new AtRule({ name: 'media', params: '(prefers-color-scheme: dark)', source: node.first.source })
 
           if (layer) {
diff --git a/index.test.js b/index.test.js
index bc87f88..6d05325 100644
--- a/index.test.js
+++ b/index.test.js
@@ -413,6 +413,30 @@ a {
   )
 })
 
+it('Can jit light & dark props to a custom selector for use with a client side switch', async () => {
+  await run(
+`a {
+  color: var(--text);
+}`, 
+`.light {
+  --text: white;
+}
+a {
+  color: var(--text);
+}
+@media (prefers-color-scheme: dark) {
+  .dark {
+    --text: black;
+  }
+}`, 
+  {
+    ... MockProps,
+    custom_selector: '.light',
+    custom_selector_dark: '.dark',
+  }
+  )
+})
+
 it('Wont create a :root {} context unless props are found', async () => {
   await run(
 `a {
diff --git a/package-lock.json b/package-lock.json
index fd0a689..c840f68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "postcss-jit-props",
-  "version": "1.0.8",
+  "version": "1.0.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "postcss-jit-props",
-      "version": "1.0.8",
-      "license": "MIT",
+      "version": "1.0.13",
+      "license": "Apache-2.0",
       "dependencies": {
         "tiny-glob": "^0.2.9"
       },