Fix dark/lightMode with array value

ben-rogerson · Jul 2, 2022 · b59e93e · b59e93e
1 parent 8969ea0
commit b59e93e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/__fixtures__/darkLightModeArray/darkLightMode.js b/__fixtures__/darkLightModeArray/darkLightMode.js
@@ -0,0 +1,4 @@
+import tw from './macro' // twinImport
+
+tw`dark:block`
+tw`light:block`
diff --git a/__fixtures__/darkLightModeArray/tailwind.config.js b/__fixtures__/darkLightModeArray/tailwind.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  darkMode: ['class', '.test-dark'],
+  lightMode: ['class', '.test-light'],
+}
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -20998,6 +20998,30 @@ tw\`cursor-[url(hand.cur), pointer]\`
 })
 
 
+`;
+
+exports[`twin.macro darkLightMode.js: darkLightMode.js 1`] = `
+
+import tw from './macro' // twinImport
+
+tw\`dark:block\`
+tw\`light:block\`
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+// twinImport
+;({
+  '.test-dark &': {
+    display: 'block',
+  },
+})
+;({
+  '.test-light &': {
+    display: 'block',
+  },
+})
+
+
 `;
 
 exports[`twin.macro directionalBorders.js: directionalBorders.js 1`] = `

diff --git a/src/config/corePlugins.js b/src/config/corePlugins.js
@@ -159,12 +159,13 @@ const variantPlugins = {
   },
 
   darkVariants({ config, addVariant }) {
-    let [mode, className = '.dark'] = [config('darkMode', 'media')]
+    // eslint-disable-next-line unicorn/prefer-spread
+    let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'))
 
     if (mode === false) {
       mode = 'media'
       console.warn('darkmode-false', [
-        'The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
+        'The `darkMode` option in your tailwind config is set to `false`, which now behaves the same as `media`.',
         'Change `darkMode` to `media` or remove it entirely.',
         'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
       ])
@@ -177,19 +178,10 @@ const variantPlugins = {
     }
   },
 
+  // Twin feature
   lightVariants({ config, addVariant }) {
-    let [mode, className = '.light'] = [
-      config('lightMode') || config('darkMode') || 'media',
-    ]
-
-    if (mode === false) {
-      mode = 'media'
-      console.warn('lightmode-false', [
-        'The `lightMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
-        'Change `lightMode` to `media` or remove it entirely.',
-        'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
-      ])
-    }
+    // eslint-disable-next-line unicorn/prefer-spread
+    const [mode, className = '.light'] = [].concat(config('lightMode', 'media'))
 
     if (mode === 'class') {
       addVariant('light', `${className} &`)