Skip to content

Commit 2fb55ee

Browse files
mertasanmertasan
committed
Support the darkSelector setting again until the next major release
1 parent 52bf52b commit 2fb55ee

File tree

3 files changed

+261
-1
lines changed

3 files changed

+261
-1
lines changed

‎__tests__/dark-mode.test.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
<div class="dark custom-dark-selector">
22
<div class="container"></div>
33
</div>
4+
<div class="dark foo">
5+
<div class="container"></div>
6+
</div>

‎__tests__/dark-mode.test.js

+240
Original file line numberDiff line numberDiff line change
@@ -429,6 +429,246 @@ test('variables and dark variables with custom selector and `class` mode', async
429429
`)
430430
})
431431

432+
test('deprecated custom darkSelector', async () => {
433+
expect(
434+
await utils.diffOnly({
435+
content: [utils.content()],
436+
darkMode: ['class', '.custom-dark-selector'],
437+
theme: {
438+
variables: {
439+
DEFAULT: {
440+
colors: {
441+
primary: '#ffffff',
442+
},
443+
},
444+
445+
'.container': {
446+
colors: {
447+
secondary: '#000000',
448+
},
449+
},
450+
},
451+
452+
darkVariables: {
453+
DEFAULT: {
454+
colors: {
455+
primary: '#ffffff',
456+
},
457+
},
458+
459+
'.container': {
460+
colors: {
461+
secondary: '#000000',
462+
},
463+
},
464+
},
465+
},
466+
467+
plugins: [tailwindcssVariables({
468+
darkSelector: '.foo',
469+
})],
470+
})
471+
).toMatchInlineSnapshot(`
472+
"
473+
474+
475+
+ :root {
476+
+ --colors-primary: #ffffff
477+
+ }
478+
+ .container {
479+
+ --colors-secondary: #000000
480+
+ }
481+
+ :root.custom-dark-selector {
482+
+ --colors-primary: #ffffff
483+
+ }
484+
+ :root.custom-dark-selector .container {
485+
+ --colors-secondary: #000000
486+
+ }
487+
488+
"
489+
`)
490+
})
491+
492+
test('deprecated custom darkSelector [2]', async () => {
493+
expect(
494+
await utils.diffOnly({
495+
content: [utils.content()],
496+
darkMode: ['class', '.custom-dark-selector'],
497+
theme: {
498+
variables: {
499+
DEFAULT: {
500+
colors: {
501+
primary: '#ffffff',
502+
},
503+
},
504+
505+
'.container': {
506+
colors: {
507+
secondary: '#000000',
508+
},
509+
},
510+
},
511+
512+
darkVariables: {
513+
DEFAULT: {
514+
colors: {
515+
primary: '#ffffff',
516+
},
517+
},
518+
519+
'.container': {
520+
colors: {
521+
secondary: '#000000',
522+
},
523+
},
524+
},
525+
},
526+
527+
plugins: [tailwindcssVariables({
528+
darkSelector: null,
529+
})],
530+
})
531+
).toMatchInlineSnapshot(`
532+
"
533+
534+
535+
+ :root {
536+
+ --colors-primary: #ffffff
537+
+ }
538+
+ .container {
539+
+ --colors-secondary: #000000
540+
+ }
541+
+ :root.custom-dark-selector {
542+
+ --colors-primary: #ffffff
543+
+ }
544+
+ :root.custom-dark-selector .container {
545+
+ --colors-secondary: #000000
546+
+ }
547+
548+
"
549+
`)
550+
})
551+
552+
test('deprecated custom darkSelector [3]', async () => {
553+
expect(
554+
await utils.diffOnly({
555+
content: [utils.content()],
556+
darkMode: ['class'],
557+
theme: {
558+
variables: {
559+
DEFAULT: {
560+
colors: {
561+
primary: '#ffffff',
562+
},
563+
},
564+
565+
'.container': {
566+
colors: {
567+
secondary: '#000000',
568+
},
569+
},
570+
},
571+
572+
darkVariables: {
573+
DEFAULT: {
574+
colors: {
575+
primary: '#ffffff',
576+
},
577+
},
578+
579+
'.container': {
580+
colors: {
581+
secondary: '#000000',
582+
},
583+
},
584+
},
585+
},
586+
587+
plugins: [tailwindcssVariables({
588+
darkSelector: null,
589+
})],
590+
})
591+
).toMatchInlineSnapshot(`
592+
"
593+
594+
595+
+ :root {
596+
+ --colors-primary: #ffffff
597+
+ }
598+
+ .container {
599+
+ --colors-secondary: #000000
600+
+ }
601+
+ :root.dark {
602+
+ --colors-primary: #ffffff
603+
+ }
604+
+ :root.dark .container {
605+
+ --colors-secondary: #000000
606+
+ }
607+
608+
"
609+
`)
610+
})
611+
612+
test('deprecated custom darkSelector [4]', async () => {
613+
expect(
614+
await utils.diffOnly({
615+
content: [utils.content()],
616+
darkMode: ['class'],
617+
theme: {
618+
variables: {
619+
DEFAULT: {
620+
colors: {
621+
primary: '#ffffff',
622+
},
623+
},
624+
625+
'.container': {
626+
colors: {
627+
secondary: '#000000',
628+
},
629+
},
630+
},
631+
632+
darkVariables: {
633+
DEFAULT: {
634+
colors: {
635+
primary: '#ffffff',
636+
},
637+
},
638+
639+
'.container': {
640+
colors: {
641+
secondary: '#000000',
642+
},
643+
},
644+
},
645+
},
646+
647+
plugins: [tailwindcssVariables({
648+
darkSelector: '.foo',
649+
})],
650+
})
651+
).toMatchInlineSnapshot(`
652+
"
653+
654+
655+
+ :root {
656+
+ --colors-primary: #ffffff
657+
+ }
658+
+ .container {
659+
+ --colors-secondary: #000000
660+
+ }
661+
+ :root.foo {
662+
+ --colors-primary: #ffffff
663+
+ }
664+
+ :root.foo .container {
665+
+ --colors-secondary: #000000
666+
+ }
667+
668+
"
669+
`)
670+
})
671+
432672
test('variables and dark variables with darkToRoot option and `class` mode', async () => {
433673
expect(
434674
await utils.diffOnly({

‎src/index.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,26 @@ const has = require('lodash/has')
66
const get = require('lodash/get')
77
const { convertColorVariables } = require('./helpers')
88

9+
/**
10+
* @typedef pluginOptions
11+
* @property {Boolean} darkToRoot
12+
* @property {Object} extendColors
13+
* @property {Boolean} forceRGB
14+
* @property {Boolean} toBase
15+
* @property {Boolean} colorVariables
16+
* @property {String} variablePrefix
17+
* @property {String} darkSelector - @deprecated
18+
*/
19+
920
/**
1021
* @typedef {Object} plugin
1122
* @property {function} withOptions
1223
*/
1324

1425
module.exports = plugin.withOptions(
26+
/**
27+
* @param {pluginOptions} options
28+
*/
1529
function (options) {
1630
return function ({ addBase, addComponents, theme, config }) {
1731
let variables = theme('variables', {})
@@ -26,7 +40,10 @@ module.exports = plugin.withOptions(
2640
options = {}
2741
}
2842

29-
let [mode, darkSelector = '.dark'] = [].concat(config('darkMode', 'media'))
43+
let [mode, darkSelector = get(options, 'darkSelector', '.dark') ?? '.dark'] = [].concat(
44+
config('darkMode', 'media')
45+
)
46+
3047
options.darkSelector = darkSelector
3148

3249
if (!isEmpty(darkVariables) && ['class', 'media'].includes(mode)) {

0 commit comments

Comments
 (0)