@thiagormoreira/nightwind 1.2.9 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/__tests__/index.test.js +6 -0
  2. package/package.json +2 -1
  3. package/src/index.js +187 -191
package/__tests__/index.test.js CHANGED
@@ -57,4 +57,10 @@ describe("nightwind plugin", () => {
57
57
  )
58
58
  expect(css).toContain(".nightwind-prevent")
59
59
  })
60
+
61
+ it("should handle opacity variables natively", async () => {
62
+ // Nightwind now relies on Tailwind's native rendering instead of generating static RGBA classes
63
+ const css = await generateCss('<div class="bg-red-600/50"></div>')
64
+ expect(css).toContain("background-color: rgb(220 38 38 / 0.5)") // Validates Tailwind handles the alpha naturally
65
+ })
60
66
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thiagormoreira/nightwind",
3
- "version": "1.2.9",
3
+ "version": "1.3.1",
4
4
  "description": "An automatic, overridable, customisable Tailwind dark mode plugin",
5
5
  "main": "src/index.js",
6
6
  "repository": {
@@ -32,6 +32,7 @@
32
32
  "format": "prettier --write \"**/*.{js,jsx,json,md}\""
33
33
  },
34
34
  "devDependencies": {
35
+ "@tailwindcss/postcss": "^4.2.0",
35
36
  "autoprefixer": "^10.4.24",
36
37
  "eslint": "^10.0.0",
37
38
  "eslint-plugin-jest": "^29.15.0",
package/src/index.js CHANGED
@@ -53,9 +53,8 @@ const nightwind = plugin(
53
53
 
54
54
  if (config("important")) {
55
55
  if (typeof config("important") === "string") {
56
- importantSelector = `${config("important")}${
57
- theme("nightwind.importantNode") ? "" : " "
58
- }`
56
+ importantSelector = `${config("important")}${theme("nightwind.importantNode") ? "" : " "
57
+ }`
59
58
  }
60
59
  if (config("important") === true) {
61
60
  importantProperty = " !important"
@@ -265,15 +264,13 @@ const nightwind = plugin(
265
264
  color == "black"
266
265
  ) {
267
266
  const transitionClass = {
268
- [`${
269
- config("important") ? importantSelector : ""
270
- }.nightwind .${prefix}-${color}`]: {
267
+ [`${config("important") ? importantSelector : ""
268
+ }.nightwind .${prefix}-${color}`]: {
271
269
  transitionDuration: transitionDurationValue,
272
270
  transitionProperty: theme("transitionProperty.colors"),
273
271
  },
274
- [`${
275
- config("important") ? importantSelector : ""
276
- }.nightwind .dark\\:${prefix}-${color}`]: {
272
+ [`${config("important") ? importantSelector : ""
273
+ }.nightwind .dark\\:${prefix}-${color}`]: {
277
274
  transitionDuration: transitionDurationValue,
278
275
  transitionProperty: theme("transitionProperty.colors"),
279
276
  },
@@ -282,15 +279,13 @@ const nightwind = plugin(
282
279
  } else {
283
280
  weights.forEach((weight) => {
284
281
  const transitionClass = {
285
- [`${
286
- config("important") ? importantSelector : ""
287
- }.nightwind .${prefix}-${color}-${weight}`]: {
282
+ [`${config("important") ? importantSelector : ""
283
+ }.nightwind .${prefix}-${color}-${weight}`]: {
288
284
  transitionDuration: transitionDurationValue,
289
285
  transitionProperty: theme("transitionProperty.colors"),
290
286
  },
291
- [`${
292
- config("important") ? importantSelector : ""
293
- }.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
287
+ [`${config("important") ? importantSelector : ""
288
+ }.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
294
289
  transitionDuration: transitionDurationValue,
295
290
  transitionProperty: theme("transitionProperty.colors"),
296
291
  },
@@ -369,25 +364,22 @@ const nightwind = plugin(
369
364
  const colorValue = themeValue
370
365
  ? themeValue
371
366
  : invertColor(typographyValues[modifier]["prose"][property])
372
- .colorValue
367
+ .colorValue
373
368
  const defaultColorValue = invertColor(
374
369
  typographyValues[modifier]["prose"][property]
375
370
  ).defaultColorValue
376
371
 
377
372
  const typographyClass = {
378
- [`${importantSelector}${darkSelector} .prose${
379
- modifier !== "DEFAULT" ? `-${modifier}` : ""
380
- }`]: {
373
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
374
+ }`]: {
381
375
  [`${property}`]: colorValue,
382
376
  },
383
- [`${importantSelector}${darkSelector} ${fixedElementClass}.prose${
384
- modifier !== "DEFAULT" ? `-${modifier}` : ""
385
- }`]: {
377
+ [`${importantSelector}${darkSelector} ${fixedElementClass}.prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
378
+ }`]: {
386
379
  [`${property}`]: defaultColorValue,
387
380
  },
388
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${
389
- modifier !== "DEFAULT" ? `-${modifier}` : ""
390
- }`]: {
381
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
382
+ }`]: {
391
383
  [`${property}`]: defaultColorValue,
392
384
  },
393
385
  }
@@ -395,19 +387,15 @@ const nightwind = plugin(
395
387
 
396
388
  if (transitionDurationValue) {
397
389
  const typographyTransitionClass = {
398
- [`${
399
- config("important") ? importantSelector : ""
400
- }.nightwind .prose${
401
- modifier !== "DEFAULT" ? `-${modifier}` : ""
402
- }`]: {
390
+ [`${config("important") ? importantSelector : ""
391
+ }.nightwind .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
392
+ }`]: {
403
393
  transitionDuration: transitionDurationValue,
404
394
  transitionProperty: theme("transitionProperty.colors"),
405
395
  },
406
- [`${
407
- config("important") ? importantSelector : ""
408
- }.nightwind .dark\\:prose${
409
- modifier !== "DEFAULT" ? `-${modifier}` : ""
410
- }`]: {
396
+ [`${config("important") ? importantSelector : ""
397
+ }.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
398
+ }`]: {
411
399
  transitionDuration: transitionDurationValue,
412
400
  transitionProperty: theme("transitionProperty.colors"),
413
401
  },
@@ -437,49 +425,41 @@ const nightwind = plugin(
437
425
  const colorValue = themeValue
438
426
  ? themeValue
439
427
  : invertColor(typographyValues[modifier][classname][property])
440
- .colorValue
428
+ .colorValue
441
429
  const defaultColorValue = invertColor(
442
430
  typographyValues[modifier][classname][property]
443
431
  ).defaultColorValue
444
432
 
445
433
  const typographyClass = {
446
- [`${importantSelector}${darkSelector} .prose${
447
- modifier !== "DEFAULT" ? `-${modifier}` : ""
448
- } ${classname}`]: {
434
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
435
+ } ${classname}`]: {
449
436
  [`${property}`]: colorValue,
450
437
  },
451
- [`${importantSelector}${darkSelector} .prose${
452
- modifier !== "DEFAULT" ? `-${modifier}` : ""
453
- } ${classname}${fixedElementClass}`]: {
438
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
439
+ } ${classname}${fixedElementClass}`]: {
454
440
  [`${property}`]: defaultColorValue,
455
441
  },
456
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${
457
- modifier !== "DEFAULT" ? `-${modifier}` : ""
458
- } ${classname}`]: {
442
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
443
+ } ${classname}`]: {
459
444
  [`${property}`]: defaultColorValue,
460
445
  },
461
- [`${importantSelector}${darkSelector} .prose${
462
- modifier !== "DEFAULT" ? `-${modifier}` : ""
463
- } ${fixedBlockClass} ${classname}`]: {
446
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
447
+ } ${fixedBlockClass} ${classname}`]: {
464
448
  [`${property}`]: defaultColorValue,
465
449
  },
466
450
  }
467
451
  typographyClasses.push(typographyClass)
468
452
  if (transitionDurationValue) {
469
453
  const typographyTransitionClass = {
470
- [`${
471
- config("important") ? importantSelector : ""
472
- }.nightwind .prose${
473
- modifier !== "DEFAULT" ? `-${modifier}` : ""
474
- } ${classname}`]: {
454
+ [`${config("important") ? importantSelector : ""
455
+ }.nightwind .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
456
+ } ${classname}`]: {
475
457
  transitionDuration: transitionDurationValue,
476
458
  transitionProperty: theme("transitionProperty.colors"),
477
459
  },
478
- [`${
479
- config("important") ? importantSelector : ""
480
- }.nightwind .dark\\:prose${
481
- modifier !== "DEFAULT" ? `-${modifier}` : ""
482
- } ${classname}`]: {
460
+ [`${config("important") ? importantSelector : ""
461
+ }.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
462
+ } ${classname}`]: {
483
463
  transitionDuration: transitionDurationValue,
484
464
  transitionProperty: theme("transitionProperty.colors"),
485
465
  },
@@ -520,10 +500,21 @@ const nightwind = plugin(
520
500
  color == "black"
521
501
  ) {
522
502
  return false
503
+ } else if (typeof colors[color] !== "object") {
504
+ // Flat custom colors (e.g. { "custom-hex": "#1a2b3c" })
505
+ let base = prefix + "-" + color
506
+ colorClasses.push(base)
507
+
508
+ colorVariants.forEach((variant) => {
509
+ let baseVar = variant + "\\:" + prefix + "-" + color
510
+ colorClasses.push(baseVar)
511
+ })
523
512
  } else {
513
+ // Nested colors (e.g. { "red": { "500": "#ef4444" } })
524
514
  weights.forEach((weight) => {
525
515
  let base = prefix + "-" + color + "-" + weight
526
516
  colorClasses.push(base)
517
+
527
518
  colorVariants.forEach((variant) => {
528
519
  let baseVar =
529
520
  variant + "\\:" + prefix + "-" + color + "-" + weight
@@ -559,28 +550,31 @@ const nightwind = plugin(
559
550
  let defaultColorValue = invertColor(colorClass).defaultColorValue
560
551
 
561
552
  const generateClass = (prefix, property) => {
553
+ // Here we rely on Tailwind dynamically falling back to the configured
554
+ // --tw-xxx-opacity variable, which it natively defines when an opacity modifier is used
555
+ const twOpacityVar = `var(--tw-${prefix})`
562
556
  return {
563
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
564
- {
565
- [`${property}`]: colorValue + importantProperty,
566
- [`${property}`]:
567
- hexToRGB(`${colorValue}`, `var(--tw-${prefix})`) +
568
- importantProperty,
569
- },
570
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
571
- {
572
- [`${property}`]: defaultColorValue + importantProperty,
573
- [`${property}`]:
574
- hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
575
- importantProperty,
576
- },
577
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
578
- {
579
- [`${property}`]: defaultColorValue + importantProperty,
580
- [`${property}`]:
581
- hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
582
- importantProperty,
583
- },
557
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
558
+ {
559
+ [`${property}`]: colorValue + importantProperty,
560
+ [`${property}`]:
561
+ hexToRGB(`${colorValue}`, twOpacityVar) +
562
+ importantProperty,
563
+ },
564
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
565
+ {
566
+ [`${property}`]: defaultColorValue + importantProperty,
567
+ [`${property}`]:
568
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
569
+ importantProperty,
570
+ },
571
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
572
+ {
573
+ [`${property}`]: defaultColorValue + importantProperty,
574
+ [`${property}`]:
575
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
576
+ importantProperty,
577
+ },
584
578
  }
585
579
  }
586
580
 
@@ -609,138 +603,140 @@ const nightwind = plugin(
609
603
  } else if (colorClass.includes("ring-")) {
610
604
  return generateClass("ring-opacity", "--tw-ring-color")
611
605
  } else if (colorClass.includes("divide-")) {
606
+ const twOpacityVar = `var(--tw-divide-opacity)`
612
607
  return {
613
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
614
- {
615
- borderColor: colorValue + importantProperty,
616
- borderColor:
617
- hexToRGB(`${colorValue}`, `var(--tw-divide-opacity)`) +
618
- importantProperty,
619
- },
620
- [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
621
- {
622
- borderColor: defaultColorValue + importantProperty,
623
- borderColor:
624
- hexToRGB(`${defaultColorValue}`, `var(--tw-divide-opacity)`) +
625
- importantProperty,
626
- },
627
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
628
- {
629
- borderColor: defaultColorValue + importantProperty,
630
- borderColor:
631
- hexToRGB(`${defaultColorValue}`, `var(--tw-divide-opacity)`) +
632
- importantProperty,
633
- },
608
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
609
+ {
610
+ borderColor: colorValue + importantProperty,
611
+ borderColor:
612
+ hexToRGB(`${colorValue}`, twOpacityVar) +
613
+ importantProperty,
614
+ },
615
+ [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
616
+ {
617
+ borderColor: defaultColorValue + importantProperty,
618
+ borderColor:
619
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
620
+ importantProperty,
621
+ },
622
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
623
+ {
624
+ borderColor: defaultColorValue + importantProperty,
625
+ borderColor:
626
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
627
+ importantProperty,
628
+ },
634
629
  }
635
630
  } else if (colorClass.includes("placeholder-")) {
631
+ const twOpacityVar = `var(--tw-text-opacity)`
636
632
  return {
637
- [`${importantSelector}${darkSelector} .${colorClass}::placeholder`]: {
633
+ [`${importantSelector}${darkSelector} .${colorClass}::placeholder, ${importantSelector}${darkSelector} .${colorClass}\\/\\*::placeholder`]: {
638
634
  color: colorValue + importantProperty,
639
635
  color:
640
- hexToRGB(`${colorValue}`, `var(--tw-text-opacity)`) +
636
+ hexToRGB(`${colorValue}`, twOpacityVar) +
637
+ importantProperty,
638
+ },
639
+ [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder, ${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}\\/\\*::placeholder`]:
640
+ {
641
+ color: defaultColorValue + importantProperty,
642
+ color:
643
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
644
+ importantProperty,
645
+ },
646
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*::placeholder`]:
647
+ {
648
+ color: defaultColorValue + importantProperty,
649
+ color:
650
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
641
651
  importantProperty,
642
652
  },
643
- [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder`]:
644
- {
645
- color: defaultColorValue + importantProperty,
646
- color:
647
- hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
648
- importantProperty,
649
- },
650
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder`]:
651
- {
652
- color: defaultColorValue + importantProperty,
653
- color:
654
- hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
655
- importantProperty,
656
- },
657
653
  }
658
654
  } else if (colorClass.includes("ring-offset-")) {
659
655
  return {
660
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
661
- {
662
- "--tw-ring-offset-color": colorValue + importantProperty,
663
- },
664
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
665
- {
666
- "--tw-ring-offset-color": defaultColorValue + importantProperty,
667
- },
668
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
669
- {
670
- "--tw-ring-offset-color": defaultColorValue + importantProperty,
671
- },
656
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
657
+ {
658
+ "--tw-ring-offset-color": colorValue + importantProperty,
659
+ },
660
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
661
+ {
662
+ "--tw-ring-offset-color": defaultColorValue + importantProperty,
663
+ },
664
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
665
+ {
666
+ "--tw-ring-offset-color": defaultColorValue + importantProperty,
667
+ },
672
668
  }
673
669
  } else if (colorClass.includes("from-")) {
674
670
  return {
675
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
676
- {
677
- "--tw-gradient-from": colorValue + importantProperty,
678
- "--tw-gradient-stops":
679
- `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
680
- `${colorValue}`,
681
- "0"
682
- )})` + importantProperty,
683
- },
684
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
685
- {
686
- "--tw-gradient-from": defaultColorValue + importantProperty,
687
- "--tw-gradient-stops":
688
- `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
689
- `${defaultColorValue}`,
690
- "0"
691
- )})` + importantProperty,
692
- },
693
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
694
- {
695
- "--tw-gradient-from": defaultColorValue + importantProperty,
696
- "--tw-gradient-stops":
697
- `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
698
- `${defaultColorValue}`,
699
- "0"
700
- )})` + importantProperty,
701
- },
671
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
672
+ {
673
+ "--tw-gradient-from": colorValue + importantProperty,
674
+ "--tw-gradient-stops":
675
+ `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
676
+ `${colorValue}`,
677
+ "0"
678
+ )})` + importantProperty,
679
+ },
680
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
681
+ {
682
+ "--tw-gradient-from": defaultColorValue + importantProperty,
683
+ "--tw-gradient-stops":
684
+ `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
685
+ `${defaultColorValue}`,
686
+ "0"
687
+ )})` + importantProperty,
688
+ },
689
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
690
+ {
691
+ "--tw-gradient-from": defaultColorValue + importantProperty,
692
+ "--tw-gradient-stops":
693
+ `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
694
+ `${defaultColorValue}`,
695
+ "0"
696
+ )})` + importantProperty,
697
+ },
702
698
  }
703
699
  } else if (colorClass.includes("via-")) {
704
700
  return {
705
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
706
- {
707
- "--tw-gradient-stops":
708
- `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
709
- `${colorValue}`,
710
- "0"
711
- )})` + importantProperty,
712
- },
713
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
714
- {
715
- "--tw-gradient-stops":
716
- `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
717
- `${defaultColorValue}`,
718
- "0"
719
- )})` + importantProperty,
720
- },
721
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
722
- {
723
- "--tw-gradient-stops":
724
- `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
725
- `${defaultColorValue}`,
726
- "0"
727
- )})` + importantProperty,
728
- },
701
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
702
+ {
703
+ "--tw-gradient-stops":
704
+ `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
705
+ `${colorValue}`,
706
+ "0"
707
+ )})` + importantProperty,
708
+ },
709
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
710
+ {
711
+ "--tw-gradient-stops":
712
+ `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
713
+ `${defaultColorValue}`,
714
+ "0"
715
+ )})` + importantProperty,
716
+ },
717
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
718
+ {
719
+ "--tw-gradient-stops":
720
+ `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
721
+ `${defaultColorValue}`,
722
+ "0"
723
+ )})` + importantProperty,
724
+ },
729
725
  }
730
726
  } else if (colorClass.includes("to-")) {
731
727
  return {
732
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
733
- {
734
- "--tw-gradient-to": colorValue + importantProperty,
735
- },
736
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
737
- {
738
- "--tw-gradient-to": defaultColorValue + importantProperty,
739
- },
740
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
741
- {
742
- "--tw-gradient-to": defaultColorValue + importantProperty,
743
- },
728
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
729
+ {
730
+ "--tw-gradient-to": colorValue + importantProperty,
731
+ },
732
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
733
+ {
734
+ "--tw-gradient-to": defaultColorValue + importantProperty,
735
+ },
736
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
737
+ {
738
+ "--tw-gradient-to": defaultColorValue + importantProperty,
739
+ },
744
740
  }
745
741
  }
746
742
  })