Skip to content

Commit 4810449

Browse files
nlemoinenlemoine
committed
Use Tailwind native way to customize selector: https://tailwindcss.com/docs/dark-mode#customizing-the-class-name 
1 parent b38a44e commit 4810449

File tree

12 files changed

+25
-32
lines changed

12 files changed

+25
-32
lines changed

‎__tests__/dark-mode.test.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ test('only dark variables with default options and `media` mode', async () => {
8080
`)
8181
})
8282

83-
test('if the `darkMode` is set to `media`, the `darkSelector` and `darkToRoot` options should not work', async () => {
83+
test('if the `darkMode` is set to `media`, `darkToRoot` options should not work', async () => {
8484
expect(
8585
await utils.diffOnly({
8686
content: [utils.content()],
@@ -103,7 +103,6 @@ test('if the `darkMode` is set to `media`, the `darkSelector` and `darkToRoot` o
103103

104104
plugins: [
105105
tailwindcssVariables({
106-
darkSelector: '.custom-dark-selector',
107106
darkToRoot: true,
108107
}),
109108
],
@@ -171,7 +170,7 @@ test('only dark variables with custom options and `class` mode', async () => {
171170
expect(
172171
await utils.diffOnly({
173172
content: [utils.content('dark-mode-to-root')],
174-
darkMode: 'class',
173+
darkMode: ['class', '.custom-dark-selector'],
175174
theme: {
176175
darkVariables: {
177176
DEFAULT: {
@@ -191,7 +190,6 @@ test('only dark variables with custom options and `class` mode', async () => {
191190
plugins: [
192191
tailwindcssVariables({
193192
variablePrefix: 'my-prefix',
194-
darkSelector: '.custom-dark-selector',
195193
darkToRoot: true,
196194
}),
197195
],
@@ -373,11 +371,11 @@ test('variables and dark variables with default options and `media` mode', async
373371
`)
374372
})
375373

376-
test('variables and dark variables with custom darkSelector and `class` mode', async () => {
374+
test('variables and dark variables with custom selector and `class` mode', async () => {
377375
expect(
378376
await utils.diffOnly({
379377
content: [utils.content()],
380-
darkMode: 'class',
378+
darkMode: ['class', '.custom-dark-selector'],
381379
theme: {
382380
variables: {
383381
DEFAULT: {
@@ -408,11 +406,7 @@ test('variables and dark variables with custom darkSelector and `class` mode', a
408406
},
409407
},
410408

411-
plugins: [
412-
tailwindcssVariables({
413-
darkSelector: '.custom-dark-selector',
414-
}),
415-
],
409+
plugins: [tailwindcssVariables()],
416410
})
417411
).toMatchInlineSnapshot(`
418412
"
@@ -501,7 +495,7 @@ test('variables and dark variables with custom options and `class` mode', async
501495
expect(
502496
await utils.diffOnly({
503497
content: [utils.content('dark-mode-to-root')],
504-
darkMode: 'class',
498+
darkMode: ['class', '.custom-dark-selector'],
505499
theme: {
506500
variables: {
507501
DEFAULT: {
@@ -535,7 +529,6 @@ test('variables and dark variables with custom options and `class` mode', async
535529
plugins: [
536530
tailwindcssVariables({
537531
variablePrefix: 'my-prefix',
538-
darkSelector: '.custom-dark-selector',
539532
darkToRoot: true,
540533
}),
541534
],

‎__tests__/issues.test.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ test('issue 25', async () => {
5959
expect(
6060
await utils.diffOnly({
6161
content: [utils.content()],
62-
darkMode: 'class',
62+
darkMode: ['class', '[data-mode="dark"]'],
6363
theme: {
6464
variables: {
6565
DEFAULT: {
@@ -77,7 +77,6 @@ test('issue 25', async () => {
7777
plugins: [
7878
tailwindcssVariables({
7979
darkToRoot: true,
80-
darkSelector: '[data-mode="dark"]',
8180
colorVariables: true,
8281
}),
8382
],

‎__tests__/readme.test.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ test('dark mode with `class` and custom options', async () => {
127127
expect(
128128
await utils.diffOnly({
129129
content: [utils.content()],
130-
darkMode: 'class',
130+
darkMode: ['class', '.custom-dark-selector'],
131131
theme: {
132132
variables: {
133133
DEFAULT: {
@@ -173,7 +173,6 @@ test('dark mode with `class` and custom options', async () => {
173173
plugins: [
174174
tailwindcssVariables({
175175
darkToRoot: false,
176-
darkSelector: '.custom-dark-selector',
177176
}),
178177
],
179178
})

‎examples/api-examples/advanced/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ module.exports = plugin.withOptions(
1515
let pluginOptions = merge(
1616
{
1717
variablePrefix: '--prefix1',
18-
darkSelector: null, // default: .dark
1918
darkToRoot: false, // default: true ( :root.dark or .dark )
2019
},
2120
theme('myPlugin.variableOptions', {}),

‎examples/api-examples/simple/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
3030
let pluginOptions = merge(
3131
{
3232
variablePrefix: '--prefix1',
33-
darkSelector: null, // default: .dark
3433
darkToRoot: false, // default: true ( :root.dark or .dark )
3534
},
3635
theme('myPlugin.variableOptions', {}),

‎examples/api-examples/with-components-null-selector/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
3030
let pluginOptions = merge(
3131
{
3232
variablePrefix: '--prefix1',
33-
darkSelector: null, // default: .dark
3433
darkToRoot: false, // default: true ( :root.dark or .dark )
3534
},
3635
theme('myPlugin.variableOptions', {}),

‎examples/api-examples/with-components/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
3030
let pluginOptions = merge(
3131
{
3232
variablePrefix: '--prefix1',
33-
darkSelector: null, // default: .dark
3433
darkToRoot: false, // default: true ( :root.dark or .dark )
3534
},
3635
theme('myPlugin.variableOptions', {}),

‎examples/api-examples/with-themes/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ module.exports = plugin.withOptions(
1414
let pluginOptions = merge(
1515
{
1616
variablePrefix: '--prefix1',
17-
darkSelector: null, // default: .dark
1817
darkToRoot: false, // default: true ( :root.dark or .dark )
1918
},
2019
theme('myPlugin.variableOptions', {}),

‎examples/dark-custom-selector/tailwind.config.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
22
content: ['./index.html'],
33
corePlugins: process.env.CLEAN ? [] : {},
4-
darkMode: 'class',
4+
darkMode: ['class', '.custom-dark-selector'],
55
theme: {
66
variables: (theme) => ({
77
DEFAULT: {
@@ -46,7 +46,6 @@ module.exports = {
4646
},
4747
plugins: [
4848
require('../../src/index')({
49-
darkSelector: '.custom-dark-selector',
5049
darkToRoot: true,
5150
}),
5251
],

‎src/index.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const plugin = require('tailwindcss/plugin')
22
const isEmpty = require('lodash/isEmpty')
3+
const isUndefined = require('lodash/isUndefined')
34
const api = require('./pluginApi')
45
const has = require('lodash/has')
56
const get = require('lodash/get')
@@ -13,7 +14,6 @@ const { convertColorVariables } = require('./helpers')
1314
module.exports = plugin.withOptions(
1415
function (options) {
1516
return function ({ addBase, addComponents, theme, config }) {
16-
let darkMode = config('darkMode')
1717
let variables = theme('variables', {})
1818
let darkVariables = theme('darkVariables', {})
1919
let toBase = get(options, 'toBase', true)
@@ -22,8 +22,15 @@ module.exports = plugin.withOptions(
2222
toBase ? addBase(getVariables) : addComponents(getVariables)
2323
}
2424

25-
if (!isEmpty(darkVariables) && (darkMode === 'class' || darkMode === 'media')) {
26-
let getDarkVariables = api.darkVariables(darkVariables, options, darkMode)
25+
if (isUndefined(options)) {
26+
options = {}
27+
}
28+
29+
let [mode, darkSelector = '.dark'] = [].concat(config('darkMode', 'media'))
30+
options.darkSelector = darkSelector
31+
32+
if (!isEmpty(darkVariables) && ['class', 'media'].includes(mode)) {
33+
let getDarkVariables = api.darkVariables(darkVariables, options, mode)
2734
toBase ? addBase(getDarkVariables) : addComponents(getDarkVariables)
2835
}
2936
}

‎src/pluginApi.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const toPairs = require('lodash/toPairs')
33
const merge = require('lodash/merge')
44
const isEmpty = require('lodash/isEmpty')
55
const _forEach = require('lodash/forEach')
6+
const has = require('lodash/has')
67
const { setVariable, setDarkMediaVariable, setComponent, build, darkBuild, flattenOptions } = require('./utils')
78

89
const variables = (variables, options) => {
@@ -14,10 +15,13 @@ const variables = (variables, options) => {
1415
return variableList
1516
}
1617

17-
const darkVariables = (variables, options, darkMode) => {
18+
const darkVariables = (variables, options, darkMode = 'media') => {
1819
let variableList = {}
1920

2021
if (darkMode === 'class' || darkMode === 'media') {
22+
if (!has(options, 'darkSelector')) {
23+
options.darkSelector = '.dark'
24+
}
2125
let data = darkBuild(options, darkMode, variables)
2226
_forEach(data, (value, key) =>
2327
merge(

‎src/utils.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,7 @@ const darkBuild = (options, darkMode, source) => {
180180
if (colorVariables) {
181181
source = setColorVariables(source, forceRGB)
182182
}
183-
let darkSelector = get(options, 'darkSelector', '.dark')
184-
if (!darkSelector) {
185-
darkSelector = '.dark'
186-
}
183+
let darkSelector = get(options, 'darkSelector')
187184
let darkToRoot = hasOwn(options, 'darkToRoot') ? options.darkToRoot : true
188185

189186
let componentOptions = {}

0 commit comments

Comments
 (0)