Merge pull request #66 from nlemoine/tailwind-dark-selector

mertasan · web-flow · commit 2e72ecb1a2c0 · 2023-03-07T21:35:30.000+03:00
Use Tailwind native way to customize selector: https://tailwindcss.co…
diff --git a/__tests__/dark-mode.test.js b/__tests__/dark-mode.test.js
@@ -80,7 +80,7 @@ test('only dark variables with default options and `media` mode', async () => {
   `)
 })
 
-test('if the `darkMode` is set to `media`, the `darkSelector` and `darkToRoot` options should not work', async () => {
+test('if the `darkMode` is set to `media`, `darkToRoot` options should not work', async () => {
   expect(
     await utils.diffOnly({
       content: [utils.content()],
@@ -103,7 +103,6 @@ test('if the `darkMode` is set to `media`, the `darkSelector` and `darkToRoot` o
 
       plugins: [
         tailwindcssVariables({
-          darkSelector: '.custom-dark-selector',
           darkToRoot: true,
         }),
       ],
@@ -171,7 +170,7 @@ test('only dark variables with custom options and `class` mode', async () => {
   expect(
     await utils.diffOnly({
       content: [utils.content('dark-mode-to-root')],
-      darkMode: 'class',
+      darkMode: ['class', '.custom-dark-selector'],
       theme: {
         darkVariables: {
           DEFAULT: {
@@ -191,7 +190,6 @@ test('only dark variables with custom options and `class` mode', async () => {
       plugins: [
         tailwindcssVariables({
           variablePrefix: 'my-prefix',
-          darkSelector: '.custom-dark-selector',
           darkToRoot: true,
         }),
       ],
@@ -373,11 +371,11 @@ test('variables and dark variables with default options and `media` mode', async
   `)
 })
 
-test('variables and dark variables with custom darkSelector and `class` mode', async () => {
+test('variables and dark variables with custom selector and `class` mode', async () => {
   expect(
     await utils.diffOnly({
       content: [utils.content()],
-      darkMode: 'class',
+      darkMode: ['class', '.custom-dark-selector'],
       theme: {
         variables: {
           DEFAULT: {
@@ -408,11 +406,7 @@ test('variables and dark variables with custom darkSelector and `class` mode', a
         },
       },
 
-      plugins: [
-        tailwindcssVariables({
-          darkSelector: '.custom-dark-selector',
-        }),
-      ],
+      plugins: [tailwindcssVariables()],
     })
   ).toMatchInlineSnapshot(`
     "
@@ -501,7 +495,7 @@ test('variables and dark variables with custom options and `class` mode', async
   expect(
     await utils.diffOnly({
       content: [utils.content('dark-mode-to-root')],
-      darkMode: 'class',
+      darkMode: ['class', '.custom-dark-selector'],
       theme: {
         variables: {
           DEFAULT: {
@@ -535,7 +529,6 @@ test('variables and dark variables with custom options and `class` mode', async
       plugins: [
         tailwindcssVariables({
           variablePrefix: 'my-prefix',
-          darkSelector: '.custom-dark-selector',
           darkToRoot: true,
         }),
       ],
diff --git a/__tests__/issues.test.js b/__tests__/issues.test.js
@@ -59,7 +59,7 @@ test('issue 25', async () => {
   expect(
     await utils.diffOnly({
       content: [utils.content()],
-      darkMode: 'class',
+      darkMode: ['class', '[data-mode="dark"]'],
       theme: {
         variables: {
           DEFAULT: {
@@ -77,7 +77,6 @@ test('issue 25', async () => {
       plugins: [
         tailwindcssVariables({
           darkToRoot: true,
-          darkSelector: '[data-mode="dark"]',
           colorVariables: true,
         }),
       ],
diff --git a/__tests__/readme.test.js b/__tests__/readme.test.js
@@ -127,7 +127,7 @@ test('dark mode with `class` and custom options', async () => {
   expect(
     await utils.diffOnly({
       content: [utils.content()],
-      darkMode: 'class',
+      darkMode: ['class', '.custom-dark-selector'],
       theme: {
         variables: {
           DEFAULT: {
@@ -173,7 +173,6 @@ test('dark mode with `class` and custom options', async () => {
       plugins: [
         tailwindcssVariables({
           darkToRoot: false,
-          darkSelector: '.custom-dark-selector',
         }),
       ],
     })
diff --git a/examples/api-examples/advanced/index.js b/examples/api-examples/advanced/index.js
@@ -15,7 +15,6 @@ module.exports = plugin.withOptions(
       let pluginOptions = merge(
         {
           variablePrefix: '--prefix1',
-          darkSelector: null, // default: .dark
           darkToRoot: false, // default: true ( :root.dark or .dark )
         },
         theme('myPlugin.variableOptions', {}),
diff --git a/examples/api-examples/simple/index.js b/examples/api-examples/simple/index.js
@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
       let pluginOptions = merge(
         {
           variablePrefix: '--prefix1',
-          darkSelector: null, // default: .dark
           darkToRoot: false, // default: true ( :root.dark or .dark )
         },
         theme('myPlugin.variableOptions', {}),
diff --git a/examples/api-examples/with-components-null-selector/index.js b/examples/api-examples/with-components-null-selector/index.js
@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
       let pluginOptions = merge(
         {
           variablePrefix: '--prefix1',
-          darkSelector: null, // default: .dark
           darkToRoot: false, // default: true ( :root.dark or .dark )
         },
         theme('myPlugin.variableOptions', {}),
diff --git a/examples/api-examples/with-components/index.js b/examples/api-examples/with-components/index.js
@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
       let pluginOptions = merge(
         {
           variablePrefix: '--prefix1',
-          darkSelector: null, // default: .dark
           darkToRoot: false, // default: true ( :root.dark or .dark )
         },
         theme('myPlugin.variableOptions', {}),
diff --git a/examples/api-examples/with-themes/index.js b/examples/api-examples/with-themes/index.js
@@ -14,7 +14,6 @@ module.exports = plugin.withOptions(
       let pluginOptions = merge(
         {
           variablePrefix: '--prefix1',
-          darkSelector: null, // default: .dark
           darkToRoot: false, // default: true ( :root.dark or .dark )
         },
         theme('myPlugin.variableOptions', {}),
diff --git a/examples/dark-custom-selector/tailwind.config.js b/examples/dark-custom-selector/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   content: ['./index.html'],
   corePlugins: process.env.CLEAN ? [] : {},
-  darkMode: 'class',
+  darkMode: ['class', '.custom-dark-selector'],
   theme: {
     variables: (theme) => ({
       DEFAULT: {
@@ -46,7 +46,6 @@ module.exports = {
   },
   plugins: [
     require('../../src/index')({
-      darkSelector: '.custom-dark-selector',
       darkToRoot: true,
     }),
   ],
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 const plugin = require('tailwindcss/plugin')
 const isEmpty = require('lodash/isEmpty')
+const isUndefined = require('lodash/isUndefined')
 const api = require('./pluginApi')
 const has = require('lodash/has')
 const get = require('lodash/get')
@@ -13,7 +14,6 @@ const { convertColorVariables } = require('./helpers')
 module.exports = plugin.withOptions(
   function (options) {
     return function ({ addBase, addComponents, theme, config }) {
-      let darkMode = config('darkMode')
       let variables = theme('variables', {})
       let darkVariables = theme('darkVariables', {})
       let toBase = get(options, 'toBase', true)
@@ -22,8 +22,15 @@ module.exports = plugin.withOptions(
         toBase ? addBase(getVariables) : addComponents(getVariables)
       }
 
-      if (!isEmpty(darkVariables) && (darkMode === 'class' || darkMode === 'media')) {
-        let getDarkVariables = api.darkVariables(darkVariables, options, darkMode)
+      if (isUndefined(options)) {
+        options = {}
+      }
+
+      let [mode, darkSelector = '.dark'] = [].concat(config('darkMode', 'media'))
+      options.darkSelector = darkSelector
+
+      if (!isEmpty(darkVariables) && ['class', 'media'].includes(mode)) {
+        let getDarkVariables = api.darkVariables(darkVariables, options, mode)
         toBase ? addBase(getDarkVariables) : addComponents(getDarkVariables)
       }
     }
diff --git a/src/pluginApi.js b/src/pluginApi.js
@@ -3,6 +3,7 @@ const toPairs = require('lodash/toPairs')
 const merge = require('lodash/merge')
 const isEmpty = require('lodash/isEmpty')
 const _forEach = require('lodash/forEach')
+const has = require('lodash/has')
 const { setVariable, setDarkMediaVariable, setComponent, build, darkBuild, flattenOptions } = require('./utils')
 
 const variables = (variables, options) => {
@@ -14,10 +15,13 @@ const variables = (variables, options) => {
   return variableList
 }
 
-const darkVariables = (variables, options, darkMode) => {
+const darkVariables = (variables, options, darkMode = 'media') => {
   let variableList = {}
 
   if (darkMode === 'class' || darkMode === 'media') {
+    if (!has(options, 'darkSelector')) {
+      options.darkSelector = '.dark'
+    }
     let data = darkBuild(options, darkMode, variables)
     _forEach(data, (value, key) =>
       merge(
diff --git a/src/utils.js b/src/utils.js
@@ -180,10 +180,7 @@ const darkBuild = (options, darkMode, source) => {
   if (colorVariables) {
     source = setColorVariables(source, forceRGB)
   }
-  let darkSelector = get(options, 'darkSelector', '.dark')
-  if (!darkSelector) {
-    darkSelector = '.dark'
-  }
+  let darkSelector = get(options, 'darkSelector')
   let darkToRoot = hasOwn(options, 'darkToRoot') ? options.darkToRoot : true
 
   let componentOptions = {}

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,6 @@ module.exports = plugin.withOptions(`
`15`	`15`	`let pluginOptions = merge(`
`16`	`16`	`{`
`17`	`17`	`variablePrefix: '--prefix1',`
`18`		`- darkSelector: null, // default: .dark`
`19`	`18`	`darkToRoot: false, // default: true ( :root.dark or .dark )`
`20`	`19`	`},`
`21`	`20`	`theme('myPlugin.variableOptions', {}),`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(`
`30`	`30`	`let pluginOptions = merge(`
`31`	`31`	`{`
`32`	`32`	`variablePrefix: '--prefix1',`
`33`		`- darkSelector: null, // default: .dark`
`34`	`33`	`darkToRoot: false, // default: true ( :root.dark or .dark )`
`35`	`34`	`},`
`36`	`35`	`theme('myPlugin.variableOptions', {}),`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,6 @@ module.exports = plugin.withOptions(`
`14`	`14`	`let pluginOptions = merge(`
`15`	`15`	`{`
`16`	`16`	`variablePrefix: '--prefix1',`
`17`		`- darkSelector: null, // default: .dark`
`18`	`17`	`darkToRoot: false, // default: true ( :root.dark or .dark )`
`19`	`18`	`},`
`20`	`19`	`theme('myPlugin.variableOptions', {}),`