@thiagormoreira/nightwind 1.3.0 → 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 +4 -25
  2. package/package.json +1 -1
  3. package/src/index.js +59 -87
package/__tests__/index.test.js CHANGED
@@ -58,30 +58,9 @@ describe("nightwind plugin", () => {
58
58
  expect(css).toContain(".nightwind-prevent")
59
59
  })
60
60
 
61
- it("should handle opacity modifiers appropriately", async () => {
62
- const css = await generateCss('<div class="bg-red-600/50 border-blue-500/10"></div>')
63
- expect(css).toContain(".dark .bg-red-600\\/50")
64
- expect(css).toContain("rgba(252, 165, 165, 0.5)")
65
- expect(css).toContain(".dark .border-blue-500\\/10")
66
- expect(css).toContain("rgba(96, 165, 250, 0.1)")
67
- })
68
-
69
- it("should handle custom flat colors", async () => {
70
- const css = await generateCss(`
71
- <div class="bg-custom-hex/40 text-custom-var/60 border-custom-rgb/80"></div>
72
- `, {
73
- theme: {
74
- extend: {
75
- colors: {
76
- "custom-hex": "#1a2b3c",
77
- "custom-var": "var(--my-color)",
78
- "custom-rgb": "rgb(10 20 30)",
79
- },
80
- }
81
- }
82
- })
83
- expect(css).toContain(".dark .bg-custom-hex\\/40")
84
- expect(css).toContain(".dark .text-custom-var\\/60")
85
- expect(css).toContain(".dark .border-custom-rgb\\/80")
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
86
65
  })
87
66
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thiagormoreira/nightwind",
3
- "version": "1.3.0",
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": {
package/src/index.js CHANGED
@@ -20,7 +20,6 @@ const nightwind = plugin(
20
20
  const colorVariants = ["hover"]
21
21
  const prefixes = ["text", "bg", "border"]
22
22
  const weights = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
23
- const opacities = theme("opacity") || {}
24
23
  let importantSelector = ""
25
24
  let importantProperty = ""
26
25
 
@@ -481,16 +480,10 @@ const nightwind = plugin(
481
480
  if (color == "white" || color == "black") {
482
481
  let base = prefix + "-" + color
483
482
  colorClasses.push(base)
484
- Object.keys(opacities).forEach((opacityKey) => {
485
- colorClasses.push(base + "\\/" + opacityKey)
486
- })
487
483
 
488
484
  colorVariants.forEach((variant) => {
489
485
  let baseVar = variant + "\\:" + prefix + "-" + color
490
486
  colorClasses.push(baseVar)
491
- Object.keys(opacities).forEach((opacityKey) => {
492
- colorClasses.push(baseVar + "\\/" + opacityKey)
493
- })
494
487
  })
495
488
  } else {
496
489
  return false
@@ -511,33 +504,21 @@ const nightwind = plugin(
511
504
  // Flat custom colors (e.g. { "custom-hex": "#1a2b3c" })
512
505
  let base = prefix + "-" + color
513
506
  colorClasses.push(base)
514
- Object.keys(opacities).forEach((opacityKey) => {
515
- colorClasses.push(base + "\\/" + opacityKey)
516
- })
517
507
 
518
508
  colorVariants.forEach((variant) => {
519
509
  let baseVar = variant + "\\:" + prefix + "-" + color
520
510
  colorClasses.push(baseVar)
521
- Object.keys(opacities).forEach((opacityKey) => {
522
- colorClasses.push(baseVar + "\\/" + opacityKey)
523
- })
524
511
  })
525
512
  } else {
526
513
  // Nested colors (e.g. { "red": { "500": "#ef4444" } })
527
514
  weights.forEach((weight) => {
528
515
  let base = prefix + "-" + color + "-" + weight
529
516
  colorClasses.push(base)
530
- Object.keys(opacities).forEach((opacityKey) => {
531
- colorClasses.push(base + "\\/" + opacityKey)
532
- })
533
517
 
534
518
  colorVariants.forEach((variant) => {
535
519
  let baseVar =
536
520
  variant + "\\:" + prefix + "-" + color + "-" + weight
537
521
  colorClasses.push(baseVar)
538
- Object.keys(opacities).forEach((opacityKey) => {
539
- colorClasses.push(baseVar + "\\/" + opacityKey)
540
- })
541
522
  })
542
523
  })
543
524
  }
@@ -548,17 +529,9 @@ const nightwind = plugin(
548
529
 
549
530
  const nightwindClasses = colorClasses.map((colorClass) => {
550
531
  let pseudoVariant = ""
551
- let opacityValue = null
552
- let baseColorClass = colorClass
553
-
554
- if (colorClass.includes("\\/")) {
555
- const split = colorClass.split("\\/")
556
- baseColorClass = split[0]
557
- opacityValue = opacities[split[1]]
558
- }
559
532
 
560
533
  colorVariants.forEach((variant) => {
561
- if (baseColorClass.includes(variant)) {
534
+ if (colorClass.includes(variant)) {
562
535
  if (variant == "last" || variant == "first") {
563
536
  pseudoVariant = ":" + variant + "-child"
564
537
  } else if (variant == "odd") {
@@ -573,34 +546,33 @@ const nightwind = plugin(
573
546
  }
574
547
  })
575
548
 
576
- let colorValue = invertColor(baseColorClass).colorValue
577
- let defaultColorValue = invertColor(baseColorClass).defaultColorValue
578
-
579
- const formattedColorValue = opacityValue ? hexToRGB(`${colorValue}`, opacityValue) : colorValue
580
- const formattedDefaultColorValue = opacityValue ? hexToRGB(`${defaultColorValue}`, opacityValue) : defaultColorValue
549
+ let colorValue = invertColor(colorClass).colorValue
550
+ let defaultColorValue = invertColor(colorClass).defaultColorValue
581
551
 
582
552
  const generateClass = (prefix, property) => {
583
- const currentOpacity = opacityValue || `var(--tw-${prefix})`
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})`
584
556
  return {
585
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
557
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
586
558
  {
587
- [`${property}`]: formattedColorValue + importantProperty,
559
+ [`${property}`]: colorValue + importantProperty,
588
560
  [`${property}`]:
589
- hexToRGB(`${colorValue}`, currentOpacity) +
561
+ hexToRGB(`${colorValue}`, twOpacityVar) +
590
562
  importantProperty,
591
563
  },
592
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
564
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
593
565
  {
594
- [`${property}`]: formattedDefaultColorValue + importantProperty,
566
+ [`${property}`]: defaultColorValue + importantProperty,
595
567
  [`${property}`]:
596
- hexToRGB(`${defaultColorValue}`, currentOpacity) +
568
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
597
569
  importantProperty,
598
570
  },
599
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
571
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
600
572
  {
601
- [`${property}`]: formattedDefaultColorValue + importantProperty,
573
+ [`${property}`]: defaultColorValue + importantProperty,
602
574
  [`${property}`]:
603
- hexToRGB(`${defaultColorValue}`, currentOpacity) +
575
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
604
576
  importantProperty,
605
577
  },
606
578
  }
@@ -631,92 +603,92 @@ const nightwind = plugin(
631
603
  } else if (colorClass.includes("ring-")) {
632
604
  return generateClass("ring-opacity", "--tw-ring-color")
633
605
  } else if (colorClass.includes("divide-")) {
634
- const divideOpacity = opacityValue || `var(--tw-divide-opacity)`
606
+ const twOpacityVar = `var(--tw-divide-opacity)`
635
607
  return {
636
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
608
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
637
609
  {
638
- borderColor: formattedColorValue + importantProperty,
610
+ borderColor: colorValue + importantProperty,
639
611
  borderColor:
640
- hexToRGB(`${colorValue}`, divideOpacity) +
612
+ hexToRGB(`${colorValue}`, twOpacityVar) +
641
613
  importantProperty,
642
614
  },
643
- [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
615
+ [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
644
616
  {
645
- borderColor: formattedDefaultColorValue + importantProperty,
617
+ borderColor: defaultColorValue + importantProperty,
646
618
  borderColor:
647
- hexToRGB(`${defaultColorValue}`, divideOpacity) +
619
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
648
620
  importantProperty,
649
621
  },
650
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
622
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
651
623
  {
652
- borderColor: formattedDefaultColorValue + importantProperty,
624
+ borderColor: defaultColorValue + importantProperty,
653
625
  borderColor:
654
- hexToRGB(`${defaultColorValue}`, divideOpacity) +
626
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
655
627
  importantProperty,
656
628
  },
657
629
  }
658
630
  } else if (colorClass.includes("placeholder-")) {
659
- const placeholderOpacity = opacityValue || `var(--tw-text-opacity)`
631
+ const twOpacityVar = `var(--tw-text-opacity)`
660
632
  return {
661
- [`${importantSelector}${darkSelector} .${colorClass}::placeholder`]: {
662
- color: formattedColorValue + importantProperty,
633
+ [`${importantSelector}${darkSelector} .${colorClass}::placeholder, ${importantSelector}${darkSelector} .${colorClass}\\/\\*::placeholder`]: {
634
+ color: colorValue + importantProperty,
663
635
  color:
664
- hexToRGB(`${colorValue}`, placeholderOpacity) +
636
+ hexToRGB(`${colorValue}`, twOpacityVar) +
665
637
  importantProperty,
666
638
  },
667
- [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder`]:
639
+ [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder, ${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}\\/\\*::placeholder`]:
668
640
  {
669
- color: formattedDefaultColorValue + importantProperty,
641
+ color: defaultColorValue + importantProperty,
670
642
  color:
671
- hexToRGB(`${defaultColorValue}`, placeholderOpacity) +
643
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
672
644
  importantProperty,
673
645
  },
674
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder`]:
646
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*::placeholder`]:
675
647
  {
676
- color: formattedDefaultColorValue + importantProperty,
648
+ color: defaultColorValue + importantProperty,
677
649
  color:
678
- hexToRGB(`${defaultColorValue}`, placeholderOpacity) +
650
+ hexToRGB(`${defaultColorValue}`, twOpacityVar) +
679
651
  importantProperty,
680
652
  },
681
653
  }
682
654
  } else if (colorClass.includes("ring-offset-")) {
683
655
  return {
684
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
656
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
685
657
  {
686
- "--tw-ring-offset-color": formattedColorValue + importantProperty,
658
+ "--tw-ring-offset-color": colorValue + importantProperty,
687
659
  },
688
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
660
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
689
661
  {
690
- "--tw-ring-offset-color": formattedDefaultColorValue + importantProperty,
662
+ "--tw-ring-offset-color": defaultColorValue + importantProperty,
691
663
  },
692
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
664
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
693
665
  {
694
- "--tw-ring-offset-color": formattedDefaultColorValue + importantProperty,
666
+ "--tw-ring-offset-color": defaultColorValue + importantProperty,
695
667
  },
696
668
  }
697
669
  } else if (colorClass.includes("from-")) {
698
670
  return {
699
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
671
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
700
672
  {
701
- "--tw-gradient-from": formattedColorValue + importantProperty,
673
+ "--tw-gradient-from": colorValue + importantProperty,
702
674
  "--tw-gradient-stops":
703
675
  `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
704
676
  `${colorValue}`,
705
677
  "0"
706
678
  )})` + importantProperty,
707
679
  },
708
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
680
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
709
681
  {
710
- "--tw-gradient-from": formattedDefaultColorValue + importantProperty,
682
+ "--tw-gradient-from": defaultColorValue + importantProperty,
711
683
  "--tw-gradient-stops":
712
684
  `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
713
685
  `${defaultColorValue}`,
714
686
  "0"
715
687
  )})` + importantProperty,
716
688
  },
717
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
689
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
718
690
  {
719
- "--tw-gradient-from": formattedDefaultColorValue + importantProperty,
691
+ "--tw-gradient-from": defaultColorValue + importantProperty,
720
692
  "--tw-gradient-stops":
721
693
  `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
722
694
  `${defaultColorValue}`,
@@ -726,26 +698,26 @@ const nightwind = plugin(
726
698
  }
727
699
  } else if (colorClass.includes("via-")) {
728
700
  return {
729
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
701
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
730
702
  {
731
703
  "--tw-gradient-stops":
732
- `var(--tw-gradient-from), ${formattedColorValue}, var(--tw-gradient-to, ${hexToRGB(
704
+ `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
733
705
  `${colorValue}`,
734
706
  "0"
735
707
  )})` + importantProperty,
736
708
  },
737
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
709
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
738
710
  {
739
711
  "--tw-gradient-stops":
740
- `var(--tw-gradient-from), ${formattedDefaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
712
+ `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
741
713
  `${defaultColorValue}`,
742
714
  "0"
743
715
  )})` + importantProperty,
744
716
  },
745
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
717
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
746
718
  {
747
719
  "--tw-gradient-stops":
748
- `var(--tw-gradient-from), ${formattedDefaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
720
+ `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
749
721
  `${defaultColorValue}`,
750
722
  "0"
751
723
  )})` + importantProperty,
@@ -753,17 +725,17 @@ const nightwind = plugin(
753
725
  }
754
726
  } else if (colorClass.includes("to-")) {
755
727
  return {
756
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
728
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
757
729
  {
758
- "--tw-gradient-to": formattedColorValue + importantProperty,
730
+ "--tw-gradient-to": colorValue + importantProperty,
759
731
  },
760
- [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
732
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
761
733
  {
762
- "--tw-gradient-to": formattedDefaultColorValue + importantProperty,
734
+ "--tw-gradient-to": defaultColorValue + importantProperty,
763
735
  },
764
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
736
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
765
737
  {
766
- "--tw-gradient-to": formattedDefaultColorValue + importantProperty,
738
+ "--tw-gradient-to": defaultColorValue + importantProperty,
767
739
  },
768
740
  }
769
741
  }