@thiagormoreira/nightwind 1.2.0 → 1.3.0

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 (4) hide show
  1. package/.github/workflows/ci.yml +21 -1
  2. package/__tests__/index.test.js +27 -0
  3. package/package.json +2 -1
  4. package/src/index.js +198 -174
package/.github/workflows/ci.yml CHANGED
@@ -5,6 +5,8 @@ on:
5
5
  branches:
6
6
  - main
7
7
  - master
8
+ tags:
9
+ - 'v*.*.*'
8
10
  pull_request:
9
11
 
10
12
  jobs:
@@ -13,7 +15,7 @@ jobs:
13
15
 
14
16
  strategy:
15
17
  matrix:
16
- node-version: [16.x, 18.x, 20.x]
18
+ node-version: [18.x, 20.x, 22.x]
17
19
 
18
20
  steps:
19
21
  - name: Checkout code
@@ -33,3 +35,21 @@ jobs:
33
35
 
34
36
  - name: Run Tests
35
37
  run: npm run test
38
+
39
+ publish:
40
+ needs: test
41
+ if: startsWith(github.ref, 'refs/tags/v')
42
+ runs-on: ubuntu-latest
43
+ permissions:
44
+ contents: read
45
+ id-token: write
46
+ steps:
47
+ - uses: actions/checkout@v4
48
+ - uses: actions/setup-node@v4
49
+ with:
50
+ node-version: 20
51
+ registry-url: 'https://registry.npmjs.org'
52
+ - run: npm ci
53
+ - run: npm publish --provenance --access public
54
+ env:
55
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
package/__tests__/index.test.js CHANGED
@@ -57,4 +57,31 @@ describe("nightwind plugin", () => {
57
57
  )
58
58
  expect(css).toContain(".nightwind-prevent")
59
59
  })
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")
86
+ })
60
87
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thiagormoreira/nightwind",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
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
@@ -20,6 +20,7 @@ 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") || {}
23
24
  let importantSelector = ""
24
25
  let importantProperty = ""
25
26
 
@@ -53,9 +54,8 @@ const nightwind = plugin(
53
54
 
54
55
  if (config("important")) {
55
56
  if (typeof config("important") === "string") {
56
- importantSelector = `${config("important")}${
57
- theme("nightwind.importantNode") ? "" : " "
58
- }`
57
+ importantSelector = `${config("important")}${theme("nightwind.importantNode") ? "" : " "
58
+ }`
59
59
  }
60
60
  if (config("important") === true) {
61
61
  importantProperty = " !important"
@@ -265,15 +265,13 @@ const nightwind = plugin(
265
265
  color == "black"
266
266
  ) {
267
267
  const transitionClass = {
268
- [`${
269
- config("important") ? importantSelector : ""
270
- }.nightwind .${prefix}-${color}`]: {
268
+ [`${config("important") ? importantSelector : ""
269
+ }.nightwind .${prefix}-${color}`]: {
271
270
  transitionDuration: transitionDurationValue,
272
271
  transitionProperty: theme("transitionProperty.colors"),
273
272
  },
274
- [`${
275
- config("important") ? importantSelector : ""
276
- }.nightwind .dark\\:${prefix}-${color}`]: {
273
+ [`${config("important") ? importantSelector : ""
274
+ }.nightwind .dark\\:${prefix}-${color}`]: {
277
275
  transitionDuration: transitionDurationValue,
278
276
  transitionProperty: theme("transitionProperty.colors"),
279
277
  },
@@ -282,15 +280,13 @@ const nightwind = plugin(
282
280
  } else {
283
281
  weights.forEach((weight) => {
284
282
  const transitionClass = {
285
- [`${
286
- config("important") ? importantSelector : ""
287
- }.nightwind .${prefix}-${color}-${weight}`]: {
283
+ [`${config("important") ? importantSelector : ""
284
+ }.nightwind .${prefix}-${color}-${weight}`]: {
288
285
  transitionDuration: transitionDurationValue,
289
286
  transitionProperty: theme("transitionProperty.colors"),
290
287
  },
291
- [`${
292
- config("important") ? importantSelector : ""
293
- }.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
288
+ [`${config("important") ? importantSelector : ""
289
+ }.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
294
290
  transitionDuration: transitionDurationValue,
295
291
  transitionProperty: theme("transitionProperty.colors"),
296
292
  },
@@ -369,25 +365,22 @@ const nightwind = plugin(
369
365
  const colorValue = themeValue
370
366
  ? themeValue
371
367
  : invertColor(typographyValues[modifier]["prose"][property])
372
- .colorValue
368
+ .colorValue
373
369
  const defaultColorValue = invertColor(
374
370
  typographyValues[modifier]["prose"][property]
375
371
  ).defaultColorValue
376
372
 
377
373
  const typographyClass = {
378
- [`${importantSelector}${darkSelector} .prose${
379
- modifier !== "DEFAULT" ? `-${modifier}` : ""
380
- }`]: {
374
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
375
+ }`]: {
381
376
  [`${property}`]: colorValue,
382
377
  },
383
- [`${importantSelector}${darkSelector} ${fixedElementClass}.prose${
384
- modifier !== "DEFAULT" ? `-${modifier}` : ""
385
- }`]: {
378
+ [`${importantSelector}${darkSelector} ${fixedElementClass}.prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
379
+ }`]: {
386
380
  [`${property}`]: defaultColorValue,
387
381
  },
388
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${
389
- modifier !== "DEFAULT" ? `-${modifier}` : ""
390
- }`]: {
382
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
383
+ }`]: {
391
384
  [`${property}`]: defaultColorValue,
392
385
  },
393
386
  }
@@ -395,19 +388,15 @@ const nightwind = plugin(
395
388
 
396
389
  if (transitionDurationValue) {
397
390
  const typographyTransitionClass = {
398
- [`${
399
- config("important") ? importantSelector : ""
400
- }.nightwind .prose${
401
- modifier !== "DEFAULT" ? `-${modifier}` : ""
402
- }`]: {
391
+ [`${config("important") ? importantSelector : ""
392
+ }.nightwind .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
393
+ }`]: {
403
394
  transitionDuration: transitionDurationValue,
404
395
  transitionProperty: theme("transitionProperty.colors"),
405
396
  },
406
- [`${
407
- config("important") ? importantSelector : ""
408
- }.nightwind .dark\\:prose${
409
- modifier !== "DEFAULT" ? `-${modifier}` : ""
410
- }`]: {
397
+ [`${config("important") ? importantSelector : ""
398
+ }.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
399
+ }`]: {
411
400
  transitionDuration: transitionDurationValue,
412
401
  transitionProperty: theme("transitionProperty.colors"),
413
402
  },
@@ -437,49 +426,41 @@ const nightwind = plugin(
437
426
  const colorValue = themeValue
438
427
  ? themeValue
439
428
  : invertColor(typographyValues[modifier][classname][property])
440
- .colorValue
429
+ .colorValue
441
430
  const defaultColorValue = invertColor(
442
431
  typographyValues[modifier][classname][property]
443
432
  ).defaultColorValue
444
433
 
445
434
  const typographyClass = {
446
- [`${importantSelector}${darkSelector} .prose${
447
- modifier !== "DEFAULT" ? `-${modifier}` : ""
448
- } ${classname}`]: {
435
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
436
+ } ${classname}`]: {
449
437
  [`${property}`]: colorValue,
450
438
  },
451
- [`${importantSelector}${darkSelector} .prose${
452
- modifier !== "DEFAULT" ? `-${modifier}` : ""
453
- } ${classname}${fixedElementClass}`]: {
439
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
440
+ } ${classname}${fixedElementClass}`]: {
454
441
  [`${property}`]: defaultColorValue,
455
442
  },
456
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${
457
- modifier !== "DEFAULT" ? `-${modifier}` : ""
458
- } ${classname}`]: {
443
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
444
+ } ${classname}`]: {
459
445
  [`${property}`]: defaultColorValue,
460
446
  },
461
- [`${importantSelector}${darkSelector} .prose${
462
- modifier !== "DEFAULT" ? `-${modifier}` : ""
463
- } ${fixedBlockClass} ${classname}`]: {
447
+ [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
448
+ } ${fixedBlockClass} ${classname}`]: {
464
449
  [`${property}`]: defaultColorValue,
465
450
  },
466
451
  }
467
452
  typographyClasses.push(typographyClass)
468
453
  if (transitionDurationValue) {
469
454
  const typographyTransitionClass = {
470
- [`${
471
- config("important") ? importantSelector : ""
472
- }.nightwind .prose${
473
- modifier !== "DEFAULT" ? `-${modifier}` : ""
474
- } ${classname}`]: {
455
+ [`${config("important") ? importantSelector : ""
456
+ }.nightwind .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
457
+ } ${classname}`]: {
475
458
  transitionDuration: transitionDurationValue,
476
459
  transitionProperty: theme("transitionProperty.colors"),
477
460
  },
478
- [`${
479
- config("important") ? importantSelector : ""
480
- }.nightwind .dark\\:prose${
481
- modifier !== "DEFAULT" ? `-${modifier}` : ""
482
- } ${classname}`]: {
461
+ [`${config("important") ? importantSelector : ""
462
+ }.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
463
+ } ${classname}`]: {
483
464
  transitionDuration: transitionDurationValue,
484
465
  transitionProperty: theme("transitionProperty.colors"),
485
466
  },
@@ -500,10 +481,16 @@ const nightwind = plugin(
500
481
  if (color == "white" || color == "black") {
501
482
  let base = prefix + "-" + color
502
483
  colorClasses.push(base)
484
+ Object.keys(opacities).forEach((opacityKey) => {
485
+ colorClasses.push(base + "\\/" + opacityKey)
486
+ })
503
487
 
504
488
  colorVariants.forEach((variant) => {
505
489
  let baseVar = variant + "\\:" + prefix + "-" + color
506
490
  colorClasses.push(baseVar)
491
+ Object.keys(opacities).forEach((opacityKey) => {
492
+ colorClasses.push(baseVar + "\\/" + opacityKey)
493
+ })
507
494
  })
508
495
  } else {
509
496
  return false
@@ -520,14 +507,37 @@ const nightwind = plugin(
520
507
  color == "black"
521
508
  ) {
522
509
  return false
510
+ } else if (typeof colors[color] !== "object") {
511
+ // Flat custom colors (e.g. { "custom-hex": "#1a2b3c" })
512
+ let base = prefix + "-" + color
513
+ colorClasses.push(base)
514
+ Object.keys(opacities).forEach((opacityKey) => {
515
+ colorClasses.push(base + "\\/" + opacityKey)
516
+ })
517
+
518
+ colorVariants.forEach((variant) => {
519
+ let baseVar = variant + "\\:" + prefix + "-" + color
520
+ colorClasses.push(baseVar)
521
+ Object.keys(opacities).forEach((opacityKey) => {
522
+ colorClasses.push(baseVar + "\\/" + opacityKey)
523
+ })
524
+ })
523
525
  } else {
526
+ // Nested colors (e.g. { "red": { "500": "#ef4444" } })
524
527
  weights.forEach((weight) => {
525
528
  let base = prefix + "-" + color + "-" + weight
526
529
  colorClasses.push(base)
530
+ Object.keys(opacities).forEach((opacityKey) => {
531
+ colorClasses.push(base + "\\/" + opacityKey)
532
+ })
533
+
527
534
  colorVariants.forEach((variant) => {
528
535
  let baseVar =
529
536
  variant + "\\:" + prefix + "-" + color + "-" + weight
530
537
  colorClasses.push(baseVar)
538
+ Object.keys(opacities).forEach((opacityKey) => {
539
+ colorClasses.push(baseVar + "\\/" + opacityKey)
540
+ })
531
541
  })
532
542
  })
533
543
  }
@@ -538,9 +548,17 @@ const nightwind = plugin(
538
548
 
539
549
  const nightwindClasses = colorClasses.map((colorClass) => {
540
550
  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
+ }
541
559
 
542
560
  colorVariants.forEach((variant) => {
543
- if (colorClass.includes(variant)) {
561
+ if (baseColorClass.includes(variant)) {
544
562
  if (variant == "last" || variant == "first") {
545
563
  pseudoVariant = ":" + variant + "-child"
546
564
  } else if (variant == "odd") {
@@ -555,32 +573,36 @@ const nightwind = plugin(
555
573
  }
556
574
  })
557
575
 
558
- let colorValue = invertColor(colorClass).colorValue
559
- let defaultColorValue = invertColor(colorClass).defaultColorValue
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
560
581
 
561
582
  const generateClass = (prefix, property) => {
583
+ const currentOpacity = opacityValue || `var(--tw-${prefix})`
562
584
  return {
563
585
  [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
564
- {
565
- [`${property}`]: colorValue + importantProperty,
566
- [`${property}`]:
567
- hexToRGB(`${colorValue}`, `var(--tw-${prefix})`) +
568
- importantProperty,
569
- },
586
+ {
587
+ [`${property}`]: formattedColorValue + importantProperty,
588
+ [`${property}`]:
589
+ hexToRGB(`${colorValue}`, currentOpacity) +
590
+ importantProperty,
591
+ },
570
592
  [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
571
- {
572
- [`${property}`]: defaultColorValue + importantProperty,
573
- [`${property}`]:
574
- hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
575
- importantProperty,
576
- },
593
+ {
594
+ [`${property}`]: formattedDefaultColorValue + importantProperty,
595
+ [`${property}`]:
596
+ hexToRGB(`${defaultColorValue}`, currentOpacity) +
597
+ importantProperty,
598
+ },
577
599
  [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
578
- {
579
- [`${property}`]: defaultColorValue + importantProperty,
580
- [`${property}`]:
581
- hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
582
- importantProperty,
583
- },
600
+ {
601
+ [`${property}`]: formattedDefaultColorValue + importantProperty,
602
+ [`${property}`]:
603
+ hexToRGB(`${defaultColorValue}`, currentOpacity) +
604
+ importantProperty,
605
+ },
584
606
  }
585
607
  }
586
608
 
@@ -609,138 +631,140 @@ const nightwind = plugin(
609
631
  } else if (colorClass.includes("ring-")) {
610
632
  return generateClass("ring-opacity", "--tw-ring-color")
611
633
  } else if (colorClass.includes("divide-")) {
634
+ const divideOpacity = opacityValue || `var(--tw-divide-opacity)`
612
635
  return {
613
636
  [`${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
- },
637
+ {
638
+ borderColor: formattedColorValue + importantProperty,
639
+ borderColor:
640
+ hexToRGB(`${colorValue}`, divideOpacity) +
641
+ importantProperty,
642
+ },
620
643
  [`${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
- },
644
+ {
645
+ borderColor: formattedDefaultColorValue + importantProperty,
646
+ borderColor:
647
+ hexToRGB(`${defaultColorValue}`, divideOpacity) +
648
+ importantProperty,
649
+ },
627
650
  [`${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
- },
651
+ {
652
+ borderColor: formattedDefaultColorValue + importantProperty,
653
+ borderColor:
654
+ hexToRGB(`${defaultColorValue}`, divideOpacity) +
655
+ importantProperty,
656
+ },
634
657
  }
635
658
  } else if (colorClass.includes("placeholder-")) {
659
+ const placeholderOpacity = opacityValue || `var(--tw-text-opacity)`
636
660
  return {
637
661
  [`${importantSelector}${darkSelector} .${colorClass}::placeholder`]: {
638
- color: colorValue + importantProperty,
662
+ color: formattedColorValue + importantProperty,
639
663
  color:
640
- hexToRGB(`${colorValue}`, `var(--tw-text-opacity)`) +
664
+ hexToRGB(`${colorValue}`, placeholderOpacity) +
641
665
  importantProperty,
642
666
  },
643
667
  [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder`]:
644
- {
645
- color: defaultColorValue + importantProperty,
646
- color:
647
- hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
648
- importantProperty,
649
- },
668
+ {
669
+ color: formattedDefaultColorValue + importantProperty,
670
+ color:
671
+ hexToRGB(`${defaultColorValue}`, placeholderOpacity) +
672
+ importantProperty,
673
+ },
650
674
  [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder`]:
651
- {
652
- color: defaultColorValue + importantProperty,
653
- color:
654
- hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
655
- importantProperty,
656
- },
675
+ {
676
+ color: formattedDefaultColorValue + importantProperty,
677
+ color:
678
+ hexToRGB(`${defaultColorValue}`, placeholderOpacity) +
679
+ importantProperty,
680
+ },
657
681
  }
658
682
  } else if (colorClass.includes("ring-offset-")) {
659
683
  return {
660
684
  [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
661
- {
662
- "--tw-ring-offset-color": colorValue + importantProperty,
663
- },
685
+ {
686
+ "--tw-ring-offset-color": formattedColorValue + importantProperty,
687
+ },
664
688
  [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
665
- {
666
- "--tw-ring-offset-color": defaultColorValue + importantProperty,
667
- },
689
+ {
690
+ "--tw-ring-offset-color": formattedDefaultColorValue + importantProperty,
691
+ },
668
692
  [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
669
- {
670
- "--tw-ring-offset-color": defaultColorValue + importantProperty,
671
- },
693
+ {
694
+ "--tw-ring-offset-color": formattedDefaultColorValue + importantProperty,
695
+ },
672
696
  }
673
697
  } else if (colorClass.includes("from-")) {
674
698
  return {
675
699
  [`${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
- },
700
+ {
701
+ "--tw-gradient-from": formattedColorValue + importantProperty,
702
+ "--tw-gradient-stops":
703
+ `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
704
+ `${colorValue}`,
705
+ "0"
706
+ )})` + importantProperty,
707
+ },
684
708
  [`${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
- },
709
+ {
710
+ "--tw-gradient-from": formattedDefaultColorValue + importantProperty,
711
+ "--tw-gradient-stops":
712
+ `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
713
+ `${defaultColorValue}`,
714
+ "0"
715
+ )})` + importantProperty,
716
+ },
693
717
  [`${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
- },
718
+ {
719
+ "--tw-gradient-from": formattedDefaultColorValue + importantProperty,
720
+ "--tw-gradient-stops":
721
+ `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
722
+ `${defaultColorValue}`,
723
+ "0"
724
+ )})` + importantProperty,
725
+ },
702
726
  }
703
727
  } else if (colorClass.includes("via-")) {
704
728
  return {
705
729
  [`${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
- },
730
+ {
731
+ "--tw-gradient-stops":
732
+ `var(--tw-gradient-from), ${formattedColorValue}, var(--tw-gradient-to, ${hexToRGB(
733
+ `${colorValue}`,
734
+ "0"
735
+ )})` + importantProperty,
736
+ },
713
737
  [`${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
- },
738
+ {
739
+ "--tw-gradient-stops":
740
+ `var(--tw-gradient-from), ${formattedDefaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
741
+ `${defaultColorValue}`,
742
+ "0"
743
+ )})` + importantProperty,
744
+ },
721
745
  [`${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
- },
746
+ {
747
+ "--tw-gradient-stops":
748
+ `var(--tw-gradient-from), ${formattedDefaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
749
+ `${defaultColorValue}`,
750
+ "0"
751
+ )})` + importantProperty,
752
+ },
729
753
  }
730
754
  } else if (colorClass.includes("to-")) {
731
755
  return {
732
756
  [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
733
- {
734
- "--tw-gradient-to": colorValue + importantProperty,
735
- },
757
+ {
758
+ "--tw-gradient-to": formattedColorValue + importantProperty,
759
+ },
736
760
  [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
737
- {
738
- "--tw-gradient-to": defaultColorValue + importantProperty,
739
- },
761
+ {
762
+ "--tw-gradient-to": formattedDefaultColorValue + importantProperty,
763
+ },
740
764
  [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
741
- {
742
- "--tw-gradient-to": defaultColorValue + importantProperty,
743
- },
765
+ {
766
+ "--tw-gradient-to": formattedDefaultColorValue + importantProperty,
767
+ },
744
768
  }
745
769
  }
746
770
  })