@thiagormoreira/nightwind 1.3.1 → 2.0.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 (5) hide show
  1. package/.github/workflows/ci.yml +1 -1
  2. package/CHANGELOG.md +13 -1
  3. package/helper.js +8 -5
  4. package/package.json +4 -1
  5. package/src/index.js +210 -644
package/.github/workflows/ci.yml CHANGED
@@ -15,7 +15,7 @@ jobs:
15
15
 
16
16
  strategy:
17
17
  matrix:
18
- node-version: [18.x, 20.x, 22.x]
18
+ node-version: [20, 22]
19
19
 
20
20
  steps:
21
21
  - name: Checkout code
package/CHANGELOG.md CHANGED
@@ -5,7 +5,19 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
- ## [Unreleased]
8
+ ## [2.0.0] - 2026-02-20
9
+
10
+ ### Added
11
+ - **Universal Opacity Support**: Dynamic CSS attribute selectors ([class*=".../"]) now support ANY opacity modifier (including arbitrary values like `bg-red-500/[0.3]`) with zero performance overhead.
12
+ - **100% Color Utility Coverage**: Added support for `outline-`, `decoration-`, `accent-`, `caret-`, `fill-`, `stroke-`, and `shadow-color` (via `--tw-shadow-color`).
13
+ - **Enhanced Transitions**: Default transition duration increased to `400ms` with `ease-in-out` for a smoother theme-switching experience.
14
+ - **Compatibility**: Verified support for Tailwind CSS v3 and prepared for v4 "CSS-first" configuration.
15
+
16
+ ### Fixed
17
+ - **PostCSS Performance**: Resolved Out-Of-Memory (OOM) errors and hangs caused by static opacity combinatorial explosion.
18
+ - **Color Inversion Precision**: Improved `white`/`black` inversion when modifiers are present.
19
+ - **Utility Conflicts**: Fixed detection logic for overlapping utilities like `ring-` and `ring-offset-`.
20
+ - **Selector Robustness**: Improved handling of `::placeholder`, `divide`, and complex pseudo-variants.
9
21
 
10
22
  ## [1.1.13] - 2023-02-21
11
23
 
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thiagormoreira/nightwind",
3
- "version": "1.3.1",
3
+ "version": "2.0.1",
4
4
  "description": "An automatic, overridable, customisable Tailwind dark mode plugin",
5
5
  "main": "src/index.js",
6
6
  "repository": {
@@ -31,6 +31,9 @@
31
31
  "lint": "eslint .",
32
32
  "format": "prettier --write \"**/*.{js,jsx,json,md}\""
33
33
  },
34
+ "engines": {
35
+ "node": ">=20.12.0"
36
+ },
34
37
  "devDependencies": {
35
38
  "@tailwindcss/postcss": "^4.2.0",
36
39
  "autoprefixer": "^10.4.24",
package/src/index.js CHANGED
@@ -1,60 +1,39 @@
1
1
  const plugin = require("tailwindcss/plugin")
2
2
 
3
3
  const nightwind = plugin(
4
- function ({ addComponents, addUtilities, theme, variants, config }) {
4
+ function ({ addBase, addComponents, addUtilities, theme, variants, config }) {
5
5
  const darkSelector = ".dark"
6
- const fixedElementClass = `.${theme(
7
- "nightwind.fixedClass",
8
- "nightwind-prevent"
9
- )}`
10
- const fixedBlockClass = `.${theme(
11
- "nightwind.fixedBlockClass",
12
- "nightwind-prevent-block"
13
- )}`
6
+ const fixedElementClass = `.${theme("nightwind.fixedClass", "nightwind-prevent")}`
7
+ const fixedBlockClass = `.${theme("nightwind.fixedBlockClass", "nightwind-prevent-block")}`
14
8
  const transitionConfig = theme("nightwind.transitionClasses", "default")
9
+ const colors = theme("colors")
15
10
  const colorClasses = []
16
11
  const transitionClasses = []
17
12
  const typographyValues = {}
18
13
  const typographyClasses = []
19
- const colors = theme("colors")
20
14
  const colorVariants = ["hover"]
21
- const prefixes = ["text", "bg", "border"]
15
+ const prefixes = ["text", "bg", "border", "ring", "ring-offset", "divide", "placeholder", "outline", "decoration", "accent", "caret", "fill", "stroke", "shadow", "from", "via", "to"]
22
16
  const weights = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
23
17
  let importantSelector = ""
24
18
  let importantProperty = ""
25
19
 
26
20
  if (variants("nightwind")) {
27
- typeof variants("nightwind") === "object"
28
- ? colorVariants.push(...variants("nightwind"))
29
- : colorVariants.push(variants("nightwind"))
21
+ typeof variants("nightwind") === "object" ? colorVariants.push(...variants("nightwind")) : colorVariants.push(variants("nightwind"))
30
22
  } else if (variants("nightwind.variants")) {
31
- typeof variants("nightwind.variants") === "object"
32
- ? colorVariants.push(...variants("nightwind.variants"))
33
- : colorVariants.push(variants("nightwind.variants"))
23
+ typeof variants("nightwind.variants") === "object" ? colorVariants.push(...variants("nightwind.variants")) : colorVariants.push(variants("nightwind.variants"))
34
24
  }
35
25
 
36
26
  if (theme("nightwind.colorClasses")) {
37
- typeof theme("nightwind.colorClasses") === "object"
38
- ? prefixes.push(...theme("nightwind.colorClasses"))
39
- : prefixes.push(theme("nightwind.colorClasses"))
27
+ typeof theme("nightwind.colorClasses") === "object" ? prefixes.push(...theme("nightwind.colorClasses")) : prefixes.push(theme("nightwind.colorClasses"))
40
28
  if (theme("nightwind.colorClasses").includes("gradient")) {
41
- prefixes.splice(prefixes.indexOf("gradient"), 1)
42
- prefixes.push(...["from", "via", "to"])
43
- }
44
- } else if (variants("nightwind.colorClasses")) {
45
- typeof variants("nightwind.colorClasses") === "object"
46
- ? prefixes.push(...variants("nightwind.colorClasses"))
47
- : prefixes.push(variants("nightwind.colorClasses"))
48
- if (variants("nightwind.colorClasses").includes("gradient")) {
49
- prefixes.splice(prefixes.indexOf("gradient"), 1)
50
- prefixes.push(...["from", "via", "to"])
29
+ // Gradient already handled in default prefixes now, but keeping for compatibility
30
+ if (!prefixes.includes("from")) prefixes.push(...["from", "via", "to"])
51
31
  }
52
32
  }
53
33
 
54
34
  if (config("important")) {
55
35
  if (typeof config("important") === "string") {
56
- importantSelector = `${config("important")}${theme("nightwind.importantNode") ? "" : " "
57
- }`
36
+ importantSelector = `${config("important")}${theme("nightwind.importantNode") ? "" : " "}`
58
37
  }
59
38
  if (config("important") === true) {
60
39
  importantProperty = " !important"
@@ -62,28 +41,14 @@ const nightwind = plugin(
62
41
  }
63
42
 
64
43
  function hexToRGB(h, alpha) {
65
- if (h.includes("var(--")) {
66
- return h
67
- }
44
+ if (!h || h.includes("var(--")) return h
68
45
  if (h.length == 4) {
69
- let rh = h[1] + h[1]
70
- let gh = h[2] + h[2]
71
- let bh = h[3] + h[3]
72
- var r = parseInt(rh, 16),
73
- g = parseInt(gh, 16),
74
- b = parseInt(bh, 16)
75
- }
76
- if (h.length == 7) {
77
- var r = parseInt(h.slice(1, 3), 16),
78
- g = parseInt(h.slice(3, 5), 16),
79
- b = parseInt(h.slice(5, 7), 16)
80
- }
81
-
82
- if (alpha) {
83
- return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"
84
- } else {
85
- return "rgb(" + r + ", " + g + ", " + b + ")"
86
- }
46
+ let rh = h[1] + h[1], gh = h[2] + h[2], bh = h[3] + h[3]
47
+ var r = parseInt(rh, 16), g = parseInt(gh, 16), b = parseInt(bh, 16)
48
+ } else if (h.length == 7) {
49
+ var r = parseInt(h.slice(1, 3), 16), g = parseInt(h.slice(3, 5), 16), b = parseInt(h.slice(5, 7), 16)
50
+ } else return h
51
+ return alpha ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
87
52
  }
88
53
 
89
54
  const hexToTailwind = (hex) => {
@@ -91,144 +56,55 @@ const nightwind = plugin(
91
56
  if (hex != "inherit" && hex != "current" && hex != "transparent") {
92
57
  Object.keys(colors).forEach((col) => {
93
58
  if (typeof theme(`colors.${col}`) === "string") {
94
- if (hex === theme(`colors.${col}`)) {
95
- colorCode = col
96
- }
59
+ if (hex === theme(`colors.${col}`)) colorCode = col
97
60
  } else if (typeof theme(`colors.${col}`) === "object") {
98
61
  Object.keys(theme(`colors.${col}`)).forEach((wei) => {
99
- if (hex === theme(`colors.${col}.${wei}`)) {
100
- colorCode = col + "-" + wei
101
- }
62
+ if (hex === theme(`colors.${col}.${wei}`)) colorCode = col + "-" + wei
102
63
  })
103
64
  }
104
65
  })
105
- } else {
106
- colorCode = hex
107
- }
66
+ } else colorCode = hex
108
67
  return colorCode
109
68
  }
110
69
 
111
- // Invert color logic
112
-
113
- let whiteSelector = "#000"
114
- let blackSelector = "#fff"
115
- if (theme(`nightwind.colors.white`)) {
116
- const colorMap = theme(`nightwind.colors.white`)
117
- whiteSelector = theme(`colors.${colorMap}`)
118
- ? theme(`colors.${colorMap}`)
119
- : colorMap
120
- }
121
- if (theme(`nightwind.colors.black`)) {
122
- const colorMap = theme(`nightwind.colors.black`)
123
- blackSelector = theme(`colors.${colorMap}`)
124
- ? theme(`colors.${colorMap}`)
125
- : colorMap
126
- }
127
-
128
70
  const invertColor = (colorClass) => {
129
71
  if (colorClass.includes("white") || colorClass.includes("black")) {
130
72
  return {
131
- colorValue: colorClass.includes("white")
132
- ? whiteSelector
133
- : blackSelector,
134
- defaultColorValue: colorClass.includes("white")
135
- ? theme("colors.white")
136
- : theme("colors.black"),
73
+ colorValue: colorClass.includes("white") ? (theme("nightwind.colors.white") ? (theme("colors." + theme("nightwind.colors.white")) || theme("nightwind.colors.white")) : "#000") : (theme("nightwind.colors.black") ? (theme("colors." + theme("nightwind.colors.black")) || theme("nightwind.colors.black")) : "#fff"),
74
+ defaultColorValue: colorClass.includes("white") ? theme("colors.white") : theme("colors.black"),
137
75
  }
138
- } else if (
139
- colorClass === "inherit" ||
140
- colorClass === "transparent" ||
141
- colorClass === "current"
142
- ) {
143
- return {
144
- colorValue: colorClass,
145
- defaultColorValue: colorClass,
146
- }
147
- } else {
148
- const colorValues = colorClass.split("-")
149
- const weight = colorValues.pop()
150
- const color = colorValues.pop()
151
- const defaultValue = theme(`colors.${color}.${weight}`)
76
+ }
77
+ if (colorClass === "inherit" || colorClass === "transparent" || colorClass === "current") return { colorValue: colorClass, defaultColorValue: colorClass }
152
78
 
153
- let invertWeightIndex = 9 - weights.indexOf(Number(weight))
154
- let invertWeight = String(weights[invertWeightIndex])
79
+ const colorValues = colorClass.split("-")
80
+ const weight = colorValues.pop()
81
+ const color = colorValues.pop()
82
+ const defaultValue = theme(`colors.${color}.${weight}`)
83
+ if (!defaultValue) return { colorValue: null, defaultColorValue: null }
155
84
 
156
- if (theme("nightwind.colorScale.preset")) {
157
- switch (theme("nightwind.colorScale.preset")) {
158
- case "reduced":
159
- let reducedInvertWeightIndex =
160
- 10 - weights.indexOf(Number(weight))
161
- reducedInvertWeightIndex > 9
162
- ? (reducedInvertWeightIndex = 9)
163
- : reducedInvertWeightIndex
164
- invertWeight = String(weights[reducedInvertWeightIndex])
165
- break
166
- }
167
- } else if (theme("nightwind.colorScale")) {
168
- if (theme(`nightwind.colorScale.${weight}`)) {
169
- invertWeight = String(theme(`nightwind.colorScale.${weight}`))
170
- }
171
- }
85
+ let invertWeightIndex = 9 - weights.indexOf(Number(weight))
86
+ let invertWeight = String(weights[invertWeightIndex])
172
87
 
173
- if (theme(`nightwind.colors.${color}.${weight}`)) {
174
- const colorMap = theme(`nightwind.colors.${color}.${weight}`)
175
- return {
176
- colorValue: theme(`colors.${colorMap}`)
177
- ? theme(`colors.${colorMap}`)
178
- : colorMap,
179
- defaultColorValue: defaultValue,
180
- }
181
- } else if (
182
- theme(`nightwind.colors.${color}`) &&
183
- typeof theme(`nightwind.colors.${color}`) === "string"
184
- ) {
185
- const colorMap = theme(`nightwind.colors.${color}`)
186
- if (theme(`colors.${colorMap}.${invertWeight}`)) {
187
- return {
188
- colorValue: theme(`colors.${colorMap}.${invertWeight}`),
189
- defaultColorValue: defaultValue,
190
- }
191
- } else if (colorMap.split(".").length === 2) {
192
- return {
193
- colorValue: theme(`colors.${colorMap}`),
194
- defaultColorValue: defaultValue,
195
- }
196
- } else if (
197
- theme(`colors.${colorMap}`) &&
198
- theme(`colors.${color}.${invertWeight}`)
199
- ) {
200
- return {
201
- colorValue: theme(`colors.${color}.${invertWeight}`),
202
- defaultColorValue: defaultValue,
203
- }
204
- } else {
205
- return {
206
- colorValue: colorMap,
207
- defaultColorValue: defaultValue,
208
- }
209
- }
210
- } else if (theme(`nightwind.colors.${color}.default`)) {
211
- const colorMap = theme(`nightwind.colors.${color}.default`)
212
- return {
213
- colorValue: theme(`colors.${colorMap}.${invertWeight}`),
214
- defaultColorValue: defaultValue,
215
- }
216
- } else {
217
- return {
218
- colorValue: theme(`colors.${color}.${invertWeight}`),
219
- defaultColorValue: defaultValue,
220
- }
221
- }
88
+ if (theme("nightwind.colorScale.preset") === "reduced") {
89
+ let ri = 10 - weights.indexOf(Number(weight)); invertWeight = String(weights[ri > 9 ? 9 : ri])
90
+ } else if (theme(`nightwind.colorScale.${weight}`)) {
91
+ invertWeight = String(theme(`nightwind.colorScale.${weight}`))
92
+ }
93
+
94
+ let colorValue = theme(`colors.${color}.${invertWeight}`)
95
+ if (theme(`nightwind.colors.${color}.${weight}`)) {
96
+ colorValue = theme(`colors.${theme(`nightwind.colors.${color}.${weight}`)}`) || theme(`nightwind.colors.${color}.${weight}`)
97
+ } else if (theme(`nightwind.colors.${color}`) && typeof theme(`nightwind.colors.${color}`) === "string") {
98
+ const colorMap = theme(`nightwind.colors.${color}`)
99
+ colorValue = theme(`colors.${colorMap}.${invertWeight}`) || theme(`colors.${colorMap}`) || theme(`colors.${color}.${invertWeight}`) || colorMap
222
100
  }
101
+
102
+ return { colorValue, defaultColorValue: defaultValue }
223
103
  }
224
104
 
225
105
  // Generate transition classes
226
-
227
- let transitionDurationValue = "300ms"
228
- if (
229
- theme("nightwind.transitionDuration") === false ||
230
- theme("transitionDuration.nightwind") === false
231
- ) {
106
+ let transitionDurationValue = "400ms"
107
+ if (theme("nightwind.transitionDuration") === false || theme("transitionDuration.nightwind") === false) {
232
108
  transitionDurationValue = ""
233
109
  } else if (typeof theme("nightwind.transitionDuration") === "string") {
234
110
  transitionDurationValue = theme("nightwind.transitionDuration")
@@ -238,527 +114,217 @@ const nightwind = plugin(
238
114
 
239
115
  if (transitionDurationValue) {
240
116
  const transitionPrefixes = []
241
- if (transitionConfig === "full") {
242
- transitionPrefixes.push(...prefixes)
243
- } else if (
244
- typeof transitionConfig === "object" ||
245
- (typeof transitionConfig === "string" &&
246
- prefixes.includes(transitionConfig))
247
- ) {
248
- typeof transitionConfig === "object"
249
- ? transitionPrefixes.push(...transitionConfig)
250
- : transitionPrefixes.push(transitionConfig)
251
- } else {
252
- transitionPrefixes.push("text", "bg", "border")
253
- }
117
+ if (transitionConfig === "full") transitionPrefixes.push(...prefixes)
118
+ else if (typeof transitionConfig === "object" || (typeof transitionConfig === "string" && prefixes.includes(transitionConfig))) {
119
+ typeof transitionConfig === "object" ? transitionPrefixes.push(...transitionConfig) : transitionPrefixes.push(transitionConfig)
120
+ } else transitionPrefixes.push("text", "bg", "border")
254
121
 
255
122
  Object.keys(colors).forEach((color) => {
256
123
  transitionPrefixes.forEach((prefix) => {
257
- if (prefix === "from" || prefix === "via" || prefix === "to") {
258
- return null
259
- }
260
- if (
261
- color == "transparent" ||
262
- color == "current" ||
263
- color == "white" ||
264
- color == "black"
265
- ) {
266
- const transitionClass = {
267
- [`${config("important") ? importantSelector : ""
268
- }.nightwind .${prefix}-${color}`]: {
269
- transitionDuration: transitionDurationValue,
270
- transitionProperty: theme("transitionProperty.colors"),
271
- },
272
- [`${config("important") ? importantSelector : ""
273
- }.nightwind .dark\\:${prefix}-${color}`]: {
274
- transitionDuration: transitionDurationValue,
275
- transitionProperty: theme("transitionProperty.colors"),
276
- },
124
+ if (prefix === "from" || prefix === "via" || prefix === "to") return
125
+ if (color == "transparent" || color == "current" || color == "white" || color == "black") {
126
+ const tc = {
127
+ [`${config("important") ? importantSelector : ""}.nightwind .${prefix}-${color}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
128
+ [`${config("important") ? importantSelector : ""}.nightwind .dark\\:${prefix}-${color}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
277
129
  }
278
- transitionClasses.push(transitionClass)
130
+ transitionClasses.push(tc)
279
131
  } else {
280
132
  weights.forEach((weight) => {
281
- const transitionClass = {
282
- [`${config("important") ? importantSelector : ""
283
- }.nightwind .${prefix}-${color}-${weight}`]: {
284
- transitionDuration: transitionDurationValue,
285
- transitionProperty: theme("transitionProperty.colors"),
286
- },
287
- [`${config("important") ? importantSelector : ""
288
- }.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
289
- transitionDuration: transitionDurationValue,
290
- transitionProperty: theme("transitionProperty.colors"),
291
- },
133
+ const tc = {
134
+ [`${config("important") ? importantSelector : ""}.nightwind .${prefix}-${color}-${weight}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
135
+ [`${config("important") ? importantSelector : ""}.nightwind .dark\\:${prefix}-${color}-${weight}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
292
136
  }
293
- transitionClasses.push(transitionClass)
137
+ transitionClasses.push(tc)
294
138
  })
295
139
  }
296
140
  })
297
141
  })
298
142
  }
299
143
 
300
- // Invert typography
301
-
302
- if (theme("nightwind.typography")) {
303
- Object.keys(theme("typography")).forEach((modifier) => {
304
- Object.keys(theme(`typography.${modifier}.css`)).forEach((n) => {
305
- const themeParser = JSON.parse(
306
- JSON.stringify(theme(`typography.${modifier}.css[${n}]`))
307
- )
308
- Object.keys(themeParser).forEach((classname) => {
309
- const themeClass = themeParser[classname]
310
- if (
311
- typeof themeClass === "string" &&
312
- (classname.includes("color") || classname.includes("Color"))
313
- ) {
314
- const colorValue = hexToTailwind(themeClass)
315
- if (!typographyValues[`${modifier}`]) {
316
- typographyValues[`${modifier}`] = {}
317
- }
318
- if (!typographyValues[`${modifier}`]["prose"]) {
319
- typographyValues[`${modifier}`]["prose"] = {}
320
- }
321
- typographyValues[`${modifier}`]["prose"][classname] = colorValue
322
- } else if (typeof themeClass === "object") {
323
- Object.keys(themeClass).forEach((property) => {
324
- const themeProperty = themeClass[property]
325
- if (
326
- (typeof themeProperty === "string" &&
327
- property.includes("color")) ||
328
- property.includes("Color")
329
- ) {
330
- const colorValue = hexToTailwind(themeProperty)
331
- if (!typographyValues[`${modifier}`]) {
332
- typographyValues[`${modifier}`] = {}
333
- }
334
- if (!typographyValues[`${modifier}`][`${classname}`]) {
335
- typographyValues[`${modifier}`][`${classname}`] = {}
336
- }
337
- typographyValues[`${modifier}`][`${classname}`][property] =
338
- colorValue
339
- }
340
- })
341
- }
342
- })
343
- })
344
- })
345
-
346
- Object.keys(typographyValues).forEach((modifier) => {
347
- Object.keys(typographyValues[modifier]).forEach((classname) => {
348
- if (classname === "prose") {
349
- Object.keys(typographyValues[modifier]["prose"]).forEach(
350
- (property) => {
351
- let themeValue = ""
352
- let nightwindValue = ""
353
- if (modifier === "DEFAULT") {
354
- nightwindValue = theme(`nightwind.typography.${property}`)
355
- } else {
356
- nightwindValue = theme(
357
- `nightwind.typography.${modifier}.${property}`
358
- )
359
- }
360
- theme(`colors.${nightwindValue}`)
361
- ? (themeValue = theme(`colors.${nightwindValue}`))
362
- : (themeValue = nightwindValue)
363
-
364
- const colorValue = themeValue
365
- ? themeValue
366
- : invertColor(typographyValues[modifier]["prose"][property])
367
- .colorValue
368
- const defaultColorValue = invertColor(
369
- typographyValues[modifier]["prose"][property]
370
- ).defaultColorValue
371
-
372
- const typographyClass = {
373
- [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
374
- }`]: {
375
- [`${property}`]: colorValue,
376
- },
377
- [`${importantSelector}${darkSelector} ${fixedElementClass}.prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
378
- }`]: {
379
- [`${property}`]: defaultColorValue,
380
- },
381
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
382
- }`]: {
383
- [`${property}`]: defaultColorValue,
384
- },
385
- }
386
- typographyClasses.push(typographyClass)
387
-
388
- if (transitionDurationValue) {
389
- const typographyTransitionClass = {
390
- [`${config("important") ? importantSelector : ""
391
- }.nightwind .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
392
- }`]: {
393
- transitionDuration: transitionDurationValue,
394
- transitionProperty: theme("transitionProperty.colors"),
395
- },
396
- [`${config("important") ? importantSelector : ""
397
- }.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
398
- }`]: {
399
- transitionDuration: transitionDurationValue,
400
- transitionProperty: theme("transitionProperty.colors"),
401
- },
402
- }
403
- transitionClasses.push(typographyTransitionClass)
404
- }
405
- }
406
- )
407
- } else {
408
- Object.keys(typographyValues[modifier][classname]).forEach(
409
- (property) => {
410
- let themeValue = ""
411
- let nightwindValue = ""
412
- if (modifier === "DEFAULT") {
413
- nightwindValue = theme(
414
- `nightwind.typography.${classname}.${property}`
415
- )
416
- } else {
417
- nightwindValue = theme(
418
- `nightwind.typography.${modifier}.${classname}.${property}`
419
- )
420
- }
421
- theme(`colors.${nightwindValue}`)
422
- ? (themeValue = theme(`colors.${nightwindValue}`))
423
- : (themeValue = nightwindValue)
424
-
425
- const colorValue = themeValue
426
- ? themeValue
427
- : invertColor(typographyValues[modifier][classname][property])
428
- .colorValue
429
- const defaultColorValue = invertColor(
430
- typographyValues[modifier][classname][property]
431
- ).defaultColorValue
432
-
433
- const typographyClass = {
434
- [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
435
- } ${classname}`]: {
436
- [`${property}`]: colorValue,
437
- },
438
- [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
439
- } ${classname}${fixedElementClass}`]: {
440
- [`${property}`]: defaultColorValue,
441
- },
442
- [`${importantSelector}${darkSelector} ${fixedBlockClass} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
443
- } ${classname}`]: {
444
- [`${property}`]: defaultColorValue,
445
- },
446
- [`${importantSelector}${darkSelector} .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
447
- } ${fixedBlockClass} ${classname}`]: {
448
- [`${property}`]: defaultColorValue,
449
- },
450
- }
451
- typographyClasses.push(typographyClass)
452
- if (transitionDurationValue) {
453
- const typographyTransitionClass = {
454
- [`${config("important") ? importantSelector : ""
455
- }.nightwind .prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
456
- } ${classname}`]: {
457
- transitionDuration: transitionDurationValue,
458
- transitionProperty: theme("transitionProperty.colors"),
459
- },
460
- [`${config("important") ? importantSelector : ""
461
- }.nightwind .dark\\:prose${modifier !== "DEFAULT" ? `-${modifier}` : ""
462
- } ${classname}`]: {
463
- transitionDuration: transitionDurationValue,
464
- transitionProperty: theme("transitionProperty.colors"),
465
- },
466
- }
467
- transitionClasses.push(typographyTransitionClass)
468
- }
469
- }
470
- )
471
- }
472
- })
473
- })
474
- }
475
-
476
- // Compose color classes
477
-
144
+ // Compose colors
478
145
  prefixes.forEach((prefix) => {
479
146
  Object.keys(colors).forEach((color) => {
480
147
  if (color == "white" || color == "black") {
481
- let base = prefix + "-" + color
482
- colorClasses.push(base)
483
-
484
- colorVariants.forEach((variant) => {
485
- let baseVar = variant + "\\:" + prefix + "-" + color
486
- colorClasses.push(baseVar)
487
- })
488
- } else {
489
- return false
490
- }
491
- })
492
- })
493
-
494
- prefixes.forEach((prefix) => {
495
- Object.keys(colors).forEach((color) => {
496
- if (
497
- color == "transparent" ||
498
- color == "current" ||
499
- color == "white" ||
500
- color == "black"
501
- ) {
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
- })
512
- } else {
513
- // Nested colors (e.g. { "red": { "500": "#ef4444" } })
148
+ colorClasses.push(`${prefix}-${color}`)
149
+ colorVariants.forEach(v => colorClasses.push(`${v}\\:${prefix}-${color}`))
150
+ } else if (typeof colors[color] === "object") {
514
151
  weights.forEach((weight) => {
515
- let base = prefix + "-" + color + "-" + weight
516
- colorClasses.push(base)
517
-
518
- colorVariants.forEach((variant) => {
519
- let baseVar =
520
- variant + "\\:" + prefix + "-" + color + "-" + weight
521
- colorClasses.push(baseVar)
522
- })
152
+ colorClasses.push(`${prefix}-${color}-${weight}`)
153
+ colorVariants.forEach(v => colorClasses.push(`${v}\\:${prefix}-${color}-${weight}`))
523
154
  })
524
155
  }
525
156
  })
526
157
  })
527
158
 
528
- // Generate dark classes
529
-
530
159
  const nightwindClasses = colorClasses.map((colorClass) => {
531
160
  let pseudoVariant = ""
161
+ colorVariants.forEach((v) => { if (colorClass.includes(v)) pseudoVariant = (v == "last" || v == "first") ? ":" + v + "-child" : (v == "odd") ? ":nth-child(odd)" : (v == "even") ? ":nth-child(2n)" : (v == "group-hover") ? "" : ":" + v })
532
162
 
533
- colorVariants.forEach((variant) => {
534
- if (colorClass.includes(variant)) {
535
- if (variant == "last" || variant == "first") {
536
- pseudoVariant = ":" + variant + "-child"
537
- } else if (variant == "odd") {
538
- pseudoVariant = ":nth-child(odd)"
539
- } else if (variant == "even") {
540
- pseudoVariant = ":nth-child(2n)"
541
- } else if (variant == "group-hover") {
542
- pseudoVariant = ""
543
- } else {
544
- pseudoVariant = ":" + variant
545
- }
546
- }
547
- })
163
+ const invertResults = invertColor(colorClass)
164
+ let colorValue = invertResults.colorValue
165
+ let defaultColorValue = invertResults.defaultColorValue
166
+ if (!colorValue) return null
548
167
 
549
- let colorValue = invertColor(colorClass).colorValue
550
- let defaultColorValue = invertColor(colorClass).defaultColorValue
168
+ let cleanClass = colorClass.replace(/\\/g, "")
551
169
 
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})`
170
+ const generateClass = (prefix, property, selectorSuffix = "") => {
171
+ const twOpacityVar = `var(--tw-${prefix}, 1)`
172
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${selectorSuffix}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${selectorSuffix}`
556
173
  return {
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
- },
174
+ [selector]: { [property]: hexToRGB(colorValue, twOpacityVar) + importantProperty },
175
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}${selectorSuffix}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}${selectorSuffix}`]: { [property]: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty },
176
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}${selectorSuffix}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}${selectorSuffix}`]: { [property]: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty }
578
177
  }
579
178
  }
580
179
 
581
- if (
582
- colorVariants.includes("group-hover") &&
583
- colorClass.includes("group-hover\\:")
584
- ) {
585
- const originalColorClass = colorClass
586
- colorClass = "group:hover ." + originalColorClass
180
+ if (colorClass.includes("ring-offset-")) {
181
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
182
+ return {
183
+ [selector]: { "--tw-ring-offset-color": colorValue + importantProperty },
184
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-ring-offset-color": defaultColorValue + importantProperty },
185
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-ring-offset-color": defaultColorValue + importantProperty }
186
+ }
587
187
  }
588
-
589
- if (
590
- colorVariants.includes("group-focus") &&
591
- colorClass.includes("group-focus\\:")
592
- ) {
593
- const originalColorClass = colorClass
594
- colorClass = "group:focus ." + originalColorClass
188
+ if (colorClass.includes("ring-")) return generateClass("ring-opacity", "--tw-ring-color")
189
+ if (colorClass.includes("divide-")) {
190
+ const twOpacityVar = `var(--tw-divide-opacity, 1)`
191
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant} > :not([hidden]) ~ :not([hidden])`
192
+ return {
193
+ [selector]: { borderColor: hexToRGB(colorValue, twOpacityVar) + importantProperty },
194
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass} > :not([hidden]) ~ :not([hidden])`]: { borderColor: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty },
195
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]: { borderColor: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty }
196
+ }
595
197
  }
596
-
597
- if (colorClass.includes("text-")) {
598
- return generateClass("text-opacity", "color")
599
- } else if (colorClass.includes("bg-")) {
600
- return generateClass("bg-opacity", "backgroundColor")
601
- } else if (colorClass.includes("border-")) {
602
- return generateClass("border-opacity", "borderColor")
603
- } else if (colorClass.includes("ring-")) {
604
- return generateClass("ring-opacity", "--tw-ring-color")
605
- } else if (colorClass.includes("divide-")) {
606
- const twOpacityVar = `var(--tw-divide-opacity)`
198
+ if (colorClass.includes("placeholder-")) {
199
+ const twOpacityVar = `var(--tw-placeholder-opacity, 1)`
200
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}::placeholder, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}::placeholder`
201
+ return {
202
+ [selector]: { color: hexToRGB(colorValue, twOpacityVar) + importantProperty },
203
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}::placeholder, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}::placeholder`]: { color: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty },
204
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}::placeholder, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}::placeholder`]: { color: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty }
205
+ }
206
+ }
207
+ if (colorClass.includes("text-")) return generateClass("text-opacity", "color")
208
+ if (colorClass.includes("bg-")) return generateClass("bg-opacity", "backgroundColor")
209
+ if (colorClass.includes("border-")) return generateClass("border-opacity", "borderColor")
210
+ if (colorClass.includes("ring-")) return generateClass("ring-opacity", "--tw-ring-color")
211
+ if (colorClass.includes("outline-")) {
212
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
213
+ return {
214
+ [selector]: { "outlineColor": colorValue + importantProperty },
215
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "outlineColor": defaultColorValue + importantProperty },
216
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "outlineColor": defaultColorValue + importantProperty }
217
+ }
218
+ }
219
+ if (colorClass.includes("decoration-")) {
220
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
607
221
  return {
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
- },
222
+ [selector]: { "textDecorationColor": colorValue + importantProperty },
223
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "textDecorationColor": defaultColorValue + importantProperty },
224
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "textDecorationColor": defaultColorValue + importantProperty }
629
225
  }
630
- } else if (colorClass.includes("placeholder-")) {
631
- const twOpacityVar = `var(--tw-text-opacity)`
226
+ }
227
+ if (colorClass.includes("accent-")) {
228
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
632
229
  return {
633
- [`${importantSelector}${darkSelector} .${colorClass}::placeholder, ${importantSelector}${darkSelector} .${colorClass}\\/\\*::placeholder`]: {
634
- color: colorValue + importantProperty,
635
- color:
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) +
651
- importantProperty,
652
- },
230
+ [selector]: { "accentColor": colorValue + importantProperty },
231
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "accentColor": defaultColorValue + importantProperty },
232
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "accentColor": defaultColorValue + importantProperty }
653
233
  }
654
- } else if (colorClass.includes("ring-offset-")) {
234
+ }
235
+ if (colorClass.includes("caret-")) {
236
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
655
237
  return {
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
- },
238
+ [selector]: { "caretColor": colorValue + importantProperty },
239
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "caretColor": defaultColorValue + importantProperty },
240
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "caretColor": defaultColorValue + importantProperty }
668
241
  }
669
- } else if (colorClass.includes("from-")) {
242
+ }
243
+ if (colorClass.includes("fill-")) {
244
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
670
245
  return {
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
- },
246
+ [selector]: { "fill": colorValue + importantProperty },
247
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "fill": defaultColorValue + importantProperty },
248
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "fill": defaultColorValue + importantProperty }
698
249
  }
699
- } else if (colorClass.includes("via-")) {
250
+ }
251
+ if (colorClass.includes("stroke-")) {
252
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
700
253
  return {
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
- },
254
+ [selector]: { "stroke": colorValue + importantProperty },
255
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "stroke": defaultColorValue + importantProperty },
256
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "stroke": defaultColorValue + importantProperty }
725
257
  }
726
- } else if (colorClass.includes("to-")) {
258
+ }
259
+ if (colorClass.includes("shadow-")) {
260
+ const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
727
261
  return {
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
- },
262
+ [selector]: { "--tw-shadow-color": colorValue + importantProperty },
263
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-shadow-color": defaultColorValue + importantProperty },
264
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-shadow-color": defaultColorValue + importantProperty }
740
265
  }
741
266
  }
742
- })
267
+ if (colorClass.includes("from-")) {
268
+ const s = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
269
+ return {
270
+ [s]: { "--tw-gradient-from": colorValue + importantProperty, "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(colorValue, "0")})` + importantProperty },
271
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-gradient-from": defaultColorValue + importantProperty, "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(defaultColorValue, "0")})` + importantProperty },
272
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-gradient-from": defaultColorValue + importantProperty, "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(defaultColorValue, "0")})` + importantProperty }
273
+ }
274
+ }
275
+ if (colorClass.includes("via-")) {
276
+ const s = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
277
+ return {
278
+ [s]: { "--tw-gradient-stops": `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(colorValue, "0")})` + importantProperty },
279
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-gradient-stops": `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(defaultColorValue, "0")})` + importantProperty },
280
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-gradient-stops": `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(defaultColorValue, "0")})` + importantProperty }
281
+ }
282
+ }
283
+ if (colorClass.includes("to-")) {
284
+ const s = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
285
+ return {
286
+ [s]: { "--tw-gradient-to": colorValue + importantProperty },
287
+ [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-gradient-to": defaultColorValue + importantProperty },
288
+ [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-gradient-to": defaultColorValue + importantProperty }
289
+ }
290
+ }
291
+ return null
292
+ }).filter(Boolean)
293
+
294
+ if (theme("nightwind.typography")) {
295
+ Object.keys(theme("typography") || {}).forEach((modifier) => {
296
+ const css = theme(`typography.${modifier}.css`) || []
297
+ css.forEach(n => {
298
+ Object.keys(n).forEach(classname => {
299
+ const colorProp = Object.keys(n[classname]).find(p => p.includes("color") || p.includes("Color"))
300
+ if (colorProp) {
301
+ const colorVal = hexToTailwind(n[classname][colorProp])
302
+ if (!typographyValues[modifier]) typographyValues[modifier] = {}
303
+ if (!typographyValues[modifier][classname]) typographyValues[modifier][classname] = {}
304
+ typographyValues[modifier][classname][colorProp] = colorVal
305
+ }
306
+ })
307
+ })
308
+ })
743
309
 
744
- addComponents(nightwindClasses, { variants: ["responsive"] })
310
+ Object.keys(typographyValues).forEach((modifier) => {
311
+ Object.keys(typographyValues[modifier]).forEach((classname) => {
312
+ Object.keys(typographyValues[modifier][classname]).forEach((property) => {
313
+ const invertResults = invertColor(typographyValues[modifier][classname][property])
314
+ const colorValue = invertResults.colorValue || typographyValues[modifier][classname][property]
315
+ const defaultColorValue = invertResults.defaultColorValue
316
+ const s = `${importantSelector}${darkSelector} .${classname}${modifier !== "DEFAULT" ? `-${modifier}` : ""}`
317
+ typographyClasses.push({ [s]: { [property]: colorValue }, [`${s}${fixedElementClass}`]: { [property]: defaultColorValue } })
318
+ })
319
+ })
320
+ })
321
+ }
322
+
323
+ addComponents(nightwindClasses)
745
324
  addComponents(typographyClasses)
746
- theme("nightwind.importantNode")
747
- ? addComponents(transitionClasses, { variants: ["responsive"] })
748
- : addUtilities(transitionClasses, { variants: ["responsive"] })
749
- },
750
- {
751
- theme: {
752
- extend: {
753
- transitionDuration: {
754
- 0: "0ms",
755
- },
756
- },
757
- },
325
+ theme("nightwind.importantNode") ? addComponents(transitionClasses) : addUtilities(transitionClasses)
758
326
  },
759
- {
760
- purge: ["./node_modules/nightwind/**/*.js"],
761
- }
327
+ { theme: { extend: { transitionDuration: { 0: "0ms" } } } }
762
328
  )
763
329
 
764
330
  module.exports = nightwind