@thiagormoreira/nightwind 1.3.0 → 1.3.3
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.
- package/__tests__/index.test.js +4 -25
- package/helper.js +8 -5
- package/package.json +1 -1
- package/src/index.js +68 -88
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
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
expect(css).toContain("
|
|
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/helper.js
CHANGED
|
@@ -23,14 +23,17 @@ module.exports = {
|
|
|
23
23
|
|
|
24
24
|
beforeTransition: () => {
|
|
25
25
|
const doc = document.documentElement
|
|
26
|
-
const onTransitionDone = () => {
|
|
27
|
-
doc.classList.remove("nightwind")
|
|
28
|
-
doc.removeEventListener("transitionend", onTransitionDone)
|
|
29
|
-
}
|
|
30
|
-
doc.addEventListener("transitionend", onTransitionDone)
|
|
31
26
|
if (!doc.classList.contains("nightwind")) {
|
|
32
27
|
doc.classList.add("nightwind")
|
|
33
28
|
}
|
|
29
|
+
// Use timeout instead of transitionend to avoid premature removal
|
|
30
|
+
// when multiple properties transition at different speeds
|
|
31
|
+
const duration = parseFloat(
|
|
32
|
+
window.getComputedStyle(document.body).getPropertyValue("--nightwind-transition-duration") || "400"
|
|
33
|
+
)
|
|
34
|
+
window.setTimeout(() => {
|
|
35
|
+
doc.classList.remove("nightwind")
|
|
36
|
+
}, duration + 100) // Small buffer to ensure all transitions complete
|
|
34
37
|
},
|
|
35
38
|
|
|
36
39
|
toggle: () => {
|
package/package.json
CHANGED
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
|
|
|
@@ -225,7 +224,7 @@ const nightwind = plugin(
|
|
|
225
224
|
|
|
226
225
|
// Generate transition classes
|
|
227
226
|
|
|
228
|
-
let transitionDurationValue = "
|
|
227
|
+
let transitionDurationValue = "400ms"
|
|
229
228
|
if (
|
|
230
229
|
theme("nightwind.transitionDuration") === false ||
|
|
231
230
|
theme("transitionDuration.nightwind") === false
|
|
@@ -269,11 +268,13 @@ const nightwind = plugin(
|
|
|
269
268
|
}.nightwind .${prefix}-${color}`]: {
|
|
270
269
|
transitionDuration: transitionDurationValue,
|
|
271
270
|
transitionProperty: theme("transitionProperty.colors"),
|
|
271
|
+
transitionTimingFunction: "ease-in-out",
|
|
272
272
|
},
|
|
273
273
|
[`${config("important") ? importantSelector : ""
|
|
274
274
|
}.nightwind .dark\\:${prefix}-${color}`]: {
|
|
275
275
|
transitionDuration: transitionDurationValue,
|
|
276
276
|
transitionProperty: theme("transitionProperty.colors"),
|
|
277
|
+
transitionTimingFunction: "ease-in-out",
|
|
277
278
|
},
|
|
278
279
|
}
|
|
279
280
|
transitionClasses.push(transitionClass)
|
|
@@ -284,11 +285,13 @@ const nightwind = plugin(
|
|
|
284
285
|
}.nightwind .${prefix}-${color}-${weight}`]: {
|
|
285
286
|
transitionDuration: transitionDurationValue,
|
|
286
287
|
transitionProperty: theme("transitionProperty.colors"),
|
|
288
|
+
transitionTimingFunction: "ease-in-out",
|
|
287
289
|
},
|
|
288
290
|
[`${config("important") ? importantSelector : ""
|
|
289
291
|
}.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
|
|
290
292
|
transitionDuration: transitionDurationValue,
|
|
291
293
|
transitionProperty: theme("transitionProperty.colors"),
|
|
294
|
+
transitionTimingFunction: "ease-in-out",
|
|
292
295
|
},
|
|
293
296
|
}
|
|
294
297
|
transitionClasses.push(transitionClass)
|
|
@@ -393,12 +396,14 @@ const nightwind = plugin(
|
|
|
393
396
|
}`]: {
|
|
394
397
|
transitionDuration: transitionDurationValue,
|
|
395
398
|
transitionProperty: theme("transitionProperty.colors"),
|
|
399
|
+
transitionTimingFunction: "ease-in-out",
|
|
396
400
|
},
|
|
397
401
|
[`${config("important") ? importantSelector : ""
|
|
398
402
|
}.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
|
|
399
403
|
}`]: {
|
|
400
404
|
transitionDuration: transitionDurationValue,
|
|
401
405
|
transitionProperty: theme("transitionProperty.colors"),
|
|
406
|
+
transitionTimingFunction: "ease-in-out",
|
|
402
407
|
},
|
|
403
408
|
}
|
|
404
409
|
transitionClasses.push(typographyTransitionClass)
|
|
@@ -457,12 +462,14 @@ const nightwind = plugin(
|
|
|
457
462
|
} ${classname}`]: {
|
|
458
463
|
transitionDuration: transitionDurationValue,
|
|
459
464
|
transitionProperty: theme("transitionProperty.colors"),
|
|
465
|
+
transitionTimingFunction: "ease-in-out",
|
|
460
466
|
},
|
|
461
467
|
[`${config("important") ? importantSelector : ""
|
|
462
468
|
}.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
|
|
463
469
|
} ${classname}`]: {
|
|
464
470
|
transitionDuration: transitionDurationValue,
|
|
465
471
|
transitionProperty: theme("transitionProperty.colors"),
|
|
472
|
+
transitionTimingFunction: "ease-in-out",
|
|
466
473
|
},
|
|
467
474
|
}
|
|
468
475
|
transitionClasses.push(typographyTransitionClass)
|
|
@@ -481,16 +488,10 @@ const nightwind = plugin(
|
|
|
481
488
|
if (color == "white" || color == "black") {
|
|
482
489
|
let base = prefix + "-" + color
|
|
483
490
|
colorClasses.push(base)
|
|
484
|
-
Object.keys(opacities).forEach((opacityKey) => {
|
|
485
|
-
colorClasses.push(base + "\\/" + opacityKey)
|
|
486
|
-
})
|
|
487
491
|
|
|
488
492
|
colorVariants.forEach((variant) => {
|
|
489
493
|
let baseVar = variant + "\\:" + prefix + "-" + color
|
|
490
494
|
colorClasses.push(baseVar)
|
|
491
|
-
Object.keys(opacities).forEach((opacityKey) => {
|
|
492
|
-
colorClasses.push(baseVar + "\\/" + opacityKey)
|
|
493
|
-
})
|
|
494
495
|
})
|
|
495
496
|
} else {
|
|
496
497
|
return false
|
|
@@ -511,33 +512,21 @@ const nightwind = plugin(
|
|
|
511
512
|
// Flat custom colors (e.g. { "custom-hex": "#1a2b3c" })
|
|
512
513
|
let base = prefix + "-" + color
|
|
513
514
|
colorClasses.push(base)
|
|
514
|
-
Object.keys(opacities).forEach((opacityKey) => {
|
|
515
|
-
colorClasses.push(base + "\\/" + opacityKey)
|
|
516
|
-
})
|
|
517
515
|
|
|
518
516
|
colorVariants.forEach((variant) => {
|
|
519
517
|
let baseVar = variant + "\\:" + prefix + "-" + color
|
|
520
518
|
colorClasses.push(baseVar)
|
|
521
|
-
Object.keys(opacities).forEach((opacityKey) => {
|
|
522
|
-
colorClasses.push(baseVar + "\\/" + opacityKey)
|
|
523
|
-
})
|
|
524
519
|
})
|
|
525
520
|
} else {
|
|
526
521
|
// Nested colors (e.g. { "red": { "500": "#ef4444" } })
|
|
527
522
|
weights.forEach((weight) => {
|
|
528
523
|
let base = prefix + "-" + color + "-" + weight
|
|
529
524
|
colorClasses.push(base)
|
|
530
|
-
Object.keys(opacities).forEach((opacityKey) => {
|
|
531
|
-
colorClasses.push(base + "\\/" + opacityKey)
|
|
532
|
-
})
|
|
533
525
|
|
|
534
526
|
colorVariants.forEach((variant) => {
|
|
535
527
|
let baseVar =
|
|
536
528
|
variant + "\\:" + prefix + "-" + color + "-" + weight
|
|
537
529
|
colorClasses.push(baseVar)
|
|
538
|
-
Object.keys(opacities).forEach((opacityKey) => {
|
|
539
|
-
colorClasses.push(baseVar + "\\/" + opacityKey)
|
|
540
|
-
})
|
|
541
530
|
})
|
|
542
531
|
})
|
|
543
532
|
}
|
|
@@ -548,17 +537,9 @@ const nightwind = plugin(
|
|
|
548
537
|
|
|
549
538
|
const nightwindClasses = colorClasses.map((colorClass) => {
|
|
550
539
|
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
540
|
|
|
560
541
|
colorVariants.forEach((variant) => {
|
|
561
|
-
if (
|
|
542
|
+
if (colorClass.includes(variant)) {
|
|
562
543
|
if (variant == "last" || variant == "first") {
|
|
563
544
|
pseudoVariant = ":" + variant + "-child"
|
|
564
545
|
} else if (variant == "odd") {
|
|
@@ -573,34 +554,33 @@ const nightwind = plugin(
|
|
|
573
554
|
}
|
|
574
555
|
})
|
|
575
556
|
|
|
576
|
-
let colorValue = invertColor(
|
|
577
|
-
let defaultColorValue = invertColor(
|
|
578
|
-
|
|
579
|
-
const formattedColorValue = opacityValue ? hexToRGB(`${colorValue}`, opacityValue) : colorValue
|
|
580
|
-
const formattedDefaultColorValue = opacityValue ? hexToRGB(`${defaultColorValue}`, opacityValue) : defaultColorValue
|
|
557
|
+
let colorValue = invertColor(colorClass).colorValue
|
|
558
|
+
let defaultColorValue = invertColor(colorClass).defaultColorValue
|
|
581
559
|
|
|
582
560
|
const generateClass = (prefix, property) => {
|
|
583
|
-
|
|
561
|
+
// Here we rely on Tailwind dynamically falling back to the configured
|
|
562
|
+
// --tw-xxx-opacity variable, which it natively defines when an opacity modifier is used
|
|
563
|
+
const twOpacityVar = `var(--tw-${prefix})`
|
|
584
564
|
return {
|
|
585
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
|
|
565
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
586
566
|
{
|
|
587
|
-
[`${property}`]:
|
|
567
|
+
[`${property}`]: colorValue + importantProperty,
|
|
588
568
|
[`${property}`]:
|
|
589
|
-
hexToRGB(`${colorValue}`,
|
|
569
|
+
hexToRGB(`${colorValue}`, twOpacityVar) +
|
|
590
570
|
importantProperty,
|
|
591
571
|
},
|
|
592
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
|
|
572
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
|
|
593
573
|
{
|
|
594
|
-
[`${property}`]:
|
|
574
|
+
[`${property}`]: defaultColorValue + importantProperty,
|
|
595
575
|
[`${property}`]:
|
|
596
|
-
hexToRGB(`${defaultColorValue}`,
|
|
576
|
+
hexToRGB(`${defaultColorValue}`, twOpacityVar) +
|
|
597
577
|
importantProperty,
|
|
598
578
|
},
|
|
599
|
-
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
|
|
579
|
+
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
600
580
|
{
|
|
601
|
-
[`${property}`]:
|
|
581
|
+
[`${property}`]: defaultColorValue + importantProperty,
|
|
602
582
|
[`${property}`]:
|
|
603
|
-
hexToRGB(`${defaultColorValue}`,
|
|
583
|
+
hexToRGB(`${defaultColorValue}`, twOpacityVar) +
|
|
604
584
|
importantProperty,
|
|
605
585
|
},
|
|
606
586
|
}
|
|
@@ -631,92 +611,92 @@ const nightwind = plugin(
|
|
|
631
611
|
} else if (colorClass.includes("ring-")) {
|
|
632
612
|
return generateClass("ring-opacity", "--tw-ring-color")
|
|
633
613
|
} else if (colorClass.includes("divide-")) {
|
|
634
|
-
const
|
|
614
|
+
const twOpacityVar = `var(--tw-divide-opacity)`
|
|
635
615
|
return {
|
|
636
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
|
|
616
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
|
|
637
617
|
{
|
|
638
|
-
borderColor:
|
|
618
|
+
borderColor: colorValue + importantProperty,
|
|
639
619
|
borderColor:
|
|
640
|
-
hexToRGB(`${colorValue}`,
|
|
620
|
+
hexToRGB(`${colorValue}`, twOpacityVar) +
|
|
641
621
|
importantProperty,
|
|
642
622
|
},
|
|
643
|
-
[`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
|
|
623
|
+
[`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
|
|
644
624
|
{
|
|
645
|
-
borderColor:
|
|
625
|
+
borderColor: defaultColorValue + importantProperty,
|
|
646
626
|
borderColor:
|
|
647
|
-
hexToRGB(`${defaultColorValue}`,
|
|
627
|
+
hexToRGB(`${defaultColorValue}`, twOpacityVar) +
|
|
648
628
|
importantProperty,
|
|
649
629
|
},
|
|
650
|
-
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
|
|
630
|
+
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
|
|
651
631
|
{
|
|
652
|
-
borderColor:
|
|
632
|
+
borderColor: defaultColorValue + importantProperty,
|
|
653
633
|
borderColor:
|
|
654
|
-
hexToRGB(`${defaultColorValue}`,
|
|
634
|
+
hexToRGB(`${defaultColorValue}`, twOpacityVar) +
|
|
655
635
|
importantProperty,
|
|
656
636
|
},
|
|
657
637
|
}
|
|
658
638
|
} else if (colorClass.includes("placeholder-")) {
|
|
659
|
-
const
|
|
639
|
+
const twOpacityVar = `var(--tw-text-opacity)`
|
|
660
640
|
return {
|
|
661
|
-
[`${importantSelector}${darkSelector} .${colorClass}::placeholder`]: {
|
|
662
|
-
color:
|
|
641
|
+
[`${importantSelector}${darkSelector} .${colorClass}::placeholder, ${importantSelector}${darkSelector} .${colorClass}\\/\\*::placeholder`]: {
|
|
642
|
+
color: colorValue + importantProperty,
|
|
663
643
|
color:
|
|
664
|
-
hexToRGB(`${colorValue}`,
|
|
644
|
+
hexToRGB(`${colorValue}`, twOpacityVar) +
|
|
665
645
|
importantProperty,
|
|
666
646
|
},
|
|
667
|
-
[`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder`]:
|
|
647
|
+
[`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder, ${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}\\/\\*::placeholder`]:
|
|
668
648
|
{
|
|
669
|
-
color:
|
|
649
|
+
color: defaultColorValue + importantProperty,
|
|
670
650
|
color:
|
|
671
|
-
hexToRGB(`${defaultColorValue}`,
|
|
651
|
+
hexToRGB(`${defaultColorValue}`, twOpacityVar) +
|
|
672
652
|
importantProperty,
|
|
673
653
|
},
|
|
674
|
-
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder`]:
|
|
654
|
+
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*::placeholder`]:
|
|
675
655
|
{
|
|
676
|
-
color:
|
|
656
|
+
color: defaultColorValue + importantProperty,
|
|
677
657
|
color:
|
|
678
|
-
hexToRGB(`${defaultColorValue}`,
|
|
658
|
+
hexToRGB(`${defaultColorValue}`, twOpacityVar) +
|
|
679
659
|
importantProperty,
|
|
680
660
|
},
|
|
681
661
|
}
|
|
682
662
|
} else if (colorClass.includes("ring-offset-")) {
|
|
683
663
|
return {
|
|
684
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
|
|
664
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
685
665
|
{
|
|
686
|
-
"--tw-ring-offset-color":
|
|
666
|
+
"--tw-ring-offset-color": colorValue + importantProperty,
|
|
687
667
|
},
|
|
688
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
|
|
668
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
|
|
689
669
|
{
|
|
690
|
-
"--tw-ring-offset-color":
|
|
670
|
+
"--tw-ring-offset-color": defaultColorValue + importantProperty,
|
|
691
671
|
},
|
|
692
|
-
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
|
|
672
|
+
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
693
673
|
{
|
|
694
|
-
"--tw-ring-offset-color":
|
|
674
|
+
"--tw-ring-offset-color": defaultColorValue + importantProperty,
|
|
695
675
|
},
|
|
696
676
|
}
|
|
697
677
|
} else if (colorClass.includes("from-")) {
|
|
698
678
|
return {
|
|
699
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
|
|
679
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
700
680
|
{
|
|
701
|
-
"--tw-gradient-from":
|
|
681
|
+
"--tw-gradient-from": colorValue + importantProperty,
|
|
702
682
|
"--tw-gradient-stops":
|
|
703
683
|
`var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
|
|
704
684
|
`${colorValue}`,
|
|
705
685
|
"0"
|
|
706
686
|
)})` + importantProperty,
|
|
707
687
|
},
|
|
708
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
|
|
688
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
|
|
709
689
|
{
|
|
710
|
-
"--tw-gradient-from":
|
|
690
|
+
"--tw-gradient-from": defaultColorValue + importantProperty,
|
|
711
691
|
"--tw-gradient-stops":
|
|
712
692
|
`var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
|
|
713
693
|
`${defaultColorValue}`,
|
|
714
694
|
"0"
|
|
715
695
|
)})` + importantProperty,
|
|
716
696
|
},
|
|
717
|
-
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
|
|
697
|
+
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
718
698
|
{
|
|
719
|
-
"--tw-gradient-from":
|
|
699
|
+
"--tw-gradient-from": defaultColorValue + importantProperty,
|
|
720
700
|
"--tw-gradient-stops":
|
|
721
701
|
`var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
|
|
722
702
|
`${defaultColorValue}`,
|
|
@@ -726,26 +706,26 @@ const nightwind = plugin(
|
|
|
726
706
|
}
|
|
727
707
|
} else if (colorClass.includes("via-")) {
|
|
728
708
|
return {
|
|
729
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
|
|
709
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
730
710
|
{
|
|
731
711
|
"--tw-gradient-stops":
|
|
732
|
-
`var(--tw-gradient-from), ${
|
|
712
|
+
`var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
|
|
733
713
|
`${colorValue}`,
|
|
734
714
|
"0"
|
|
735
715
|
)})` + importantProperty,
|
|
736
716
|
},
|
|
737
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
|
|
717
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
|
|
738
718
|
{
|
|
739
719
|
"--tw-gradient-stops":
|
|
740
|
-
`var(--tw-gradient-from), ${
|
|
720
|
+
`var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
|
|
741
721
|
`${defaultColorValue}`,
|
|
742
722
|
"0"
|
|
743
723
|
)})` + importantProperty,
|
|
744
724
|
},
|
|
745
|
-
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
|
|
725
|
+
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
746
726
|
{
|
|
747
727
|
"--tw-gradient-stops":
|
|
748
|
-
`var(--tw-gradient-from), ${
|
|
728
|
+
`var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
|
|
749
729
|
`${defaultColorValue}`,
|
|
750
730
|
"0"
|
|
751
731
|
)})` + importantProperty,
|
|
@@ -753,17 +733,17 @@ const nightwind = plugin(
|
|
|
753
733
|
}
|
|
754
734
|
} else if (colorClass.includes("to-")) {
|
|
755
735
|
return {
|
|
756
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
|
|
736
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
757
737
|
{
|
|
758
|
-
"--tw-gradient-to":
|
|
738
|
+
"--tw-gradient-to": colorValue + importantProperty,
|
|
759
739
|
},
|
|
760
|
-
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
|
|
740
|
+
[`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} .${colorClass}\\/\\*${pseudoVariant}${fixedElementClass}`]:
|
|
761
741
|
{
|
|
762
|
-
"--tw-gradient-to":
|
|
742
|
+
"--tw-gradient-to": defaultColorValue + importantProperty,
|
|
763
743
|
},
|
|
764
|
-
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
|
|
744
|
+
[`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}\\/\\*${pseudoVariant}`]:
|
|
765
745
|
{
|
|
766
|
-
"--tw-gradient-to":
|
|
746
|
+
"--tw-gradient-to": defaultColorValue + importantProperty,
|
|
767
747
|
},
|
|
768
748
|
}
|
|
769
749
|
}
|