@thiagormoreira/nightwind 2.0.1 → 2.1.1

package/.husky/pre-push

@@ -0,0 +1 @@
+npm run lint && npm run test

package/CHANGELOG.md

@@ -5,19 +5,63 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.0] - 2026-02-20
+
+### Added
+- **Hybrid Performance Optimization**: Implemented a hybrid approach combining optimized static generation for standard colors/weights with `matchUtilities` for arbitrary values, ensuring 100% reliability for variants like `hover`, `group-hover`, and `peer-focus`.
+- **Arbitrary Color Support**: Automatic dark mode inversion for arbitrary color values (e.g., `bg-[#ffffff]`, `text-[rgb(0,0,0)]`).
+- **ESLint Browser Support**: Added proper global definitions for `helper.js` in `eslint.config.js`.
+
+### Changed
+- **Performance Pre-calculation**: Optimized the plugin logic to pre-calculate color mappings and rules, significantly reducing PostCSS processing time during Tailwind JIT.
+- **Transition Synchronization**: The plugin now injects `--nightwind-transition-duration` into `:root` (default `400ms`) for perfect sync with the transition helper.
+
+### Fixed
+- **Variant Reliability**: Fixed issues with `matchComponents` shadowing core utilities, restoring correct variant handling in dark mode.
+- **Linting Errors**: Resolved all `no-undef` and `no-unused-vars` errors in `src/index.js` and `helper.js`.
+- **Helper Compatibility**: Restored toggling of the `light` class in `helper.js` for backward compatibility with custom CSS workflows.
+
+## [2.0.2] - 2026-02-20
+
+### Added
+- **Default Variants**: Added out-of-the-box support for `focus`, `active`, `focus-within`, `focus-visible`, and `disabled`.
+- **Selection Prefix**: Added support for `selection` utility inversion.
+
+### Fixed
+- **Variant Selector Precision**: Implemented strict variant matching to prevent false positives in color names (e.g., `hoverred` no longer triggers `:hover`).
+- **Group & Peer Variants**: Resolved issues with `group-*` and `peer-*` variants, ensuring correct selector generation for nested and sibling elements.
+
+## [2.0.1] - 2026-02-20
+
+### Changed
+- **Node.js Requirement**: Minimum Node.js version updated to `v20.12.0` (dropping support for Node 18).
+
+### Fixed
+- **ESLint Compatibility**: Resolved `TypeError: util.styleText is not a function` in ESLint 10 by upgrading the project's runtime requirements.
+
 ## [2.0.0] - 2026-02-20
 
 ### Added
 - **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.
 - **100% Color Utility Coverage**: Added support for `outline-`, `decoration-`, `accent-`, `caret-`, `fill-`, `stroke-`, and `shadow-color` (via `--tw-shadow-color`).
 - **Enhanced Transitions**: Default transition duration increased to `400ms` with `ease-in-out` for a smoother theme-switching experience.
-- **Compatibility**: Verified support for Tailwind CSS v3 and prepared for v4 "CSS-first" configuration.
 
 ### Fixed
 - **PostCSS Performance**: Resolved Out-Of-Memory (OOM) errors and hangs caused by static opacity combinatorial explosion.
 - **Color Inversion Precision**: Improved `white`/`black` inversion when modifiers are present.
 - **Utility Conflicts**: Fixed detection logic for overlapping utilities like `ring-` and `ring-offset-`.
-- **Selector Robustness**: Improved handling of `::placeholder`, `divide`, and complex pseudo-variants.
+
+## [1.3.0] - 2026-02-20
+
+### Changed
+- **Maintenance**: General refactoring and cleanup of `src/index.js`.
+- **CI/CD**: Improved GitHub Actions workflows and testing environment consistency.
+
+## [1.2.0] - 2026-02-20
+
+### Added
+- **Testing Infrastructure**: Initial setup of the Jest test suite for color inversion logic.
+- **Helper Refinement**: Initial refactor of `helper.js` for better browser compatibility.
 
 ## [1.1.13] - 2023-02-21
 

package/__tests__/arbitrary.test.js

@@ -0,0 +1,40 @@
+const postcss = require("postcss")
+const tailwindcss = require("tailwindcss")
+const nightwind = require("../src/index.js")
+
+async function generateCss(html, config = {}) {
+    const result = await postcss([
+        tailwindcss({
+            content: [{ raw: html }],
+            darkMode: "class",
+            plugins: [nightwind],
+            theme: {
+                extend: {}
+            },
+            ...config,
+        }),
+    ]).process("@tailwind utilities;", {
+        from: undefined,
+    })
+    return result.css
+}
+
+describe("nightwind arbitrary colors", () => {
+    it("should invert arbitrary hex background", async () => {
+        const css = await generateCss('<div class="bg-[#ffffff]"></div>')
+        expect(css).toContain(".dark .bg-\\[\\#ffffff\\]")
+        expect(css).toContain("background-color: rgb(0, 0, 0)")
+    })
+
+    it("should invert arbitrary rgb text", async () => {
+        const css = await generateCss('<div class="text-[rgb(0,0,0)]"></div>')
+        expect(css).toContain(".dark .text-\\[rgb\\(0\\2c 0\\2c 0\\)\\]")
+        expect(css).toContain("color: rgb(255, 255, 255)")
+    })
+
+    it("should invert arbitrary hex border", async () => {
+        const css = await generateCss('<div class="border-[#00ff00]"></div>')
+        expect(css).toContain(".dark .border-\\[\\#00ff00\\]")
+        expect(css).toContain("border-color: rgb(255, 0, 255)")
+    })
+})

package/__tests__/helper.test.js

@@ -1,3 +1,4 @@
+/** @jest-environment jsdom */
 const helper = require("../helper.js")
 
 describe("nightwind/helper", () => {
@@ -56,7 +57,7 @@ describe("nightwind/helper", () => {
     it("should return the initialization script logic", () => {
       const script = helper.init()
       expect(typeof script).toBe("string")
-      expect(script).toContain("getInitialColorMode")
+      expect(script).toContain("nightwind-mode")
     })
   })
 

package/__tests__/variants.test.js

@@ -0,0 +1,66 @@
+const postcss = require("postcss")
+const tailwindcss = require("tailwindcss")
+const nightwind = require("../src/index.js")
+
+async function generateCss(html, config = {}) {
+    const result = await postcss([
+        tailwindcss({
+            content: [{ raw: html }],
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        red: {
+                            400: "#f87171",
+                            600: "#dc2626",
+                        },
+                        blue: {
+                            500: "#3b82f6",
+                        },
+                        hoverred: {
+                            400: "#f87171",
+                            500: "#ef4444",
+                        }
+                    },
+                    nightwind: {
+                        variants: ["group-hover", "peer-focus"]
+                    }
+                },
+            },
+            plugins: [nightwind],
+            ...config,
+        }),
+    ]).process("@tailwind utilities; @tailwind components;", {
+        from: undefined,
+    })
+    return result.css
+}
+
+describe("nightwind variants", () => {
+    it("should handle hover variant correctly", async () => {
+        const css = await generateCss('<div class="hover:bg-red-600"></div>')
+        expect(css).toContain(".dark .hover\\:bg-red-600:hover")
+    })
+
+    it("should handle group-hover variant correctly", async () => {
+        const css = await generateCss('<div class="group-hover:bg-red-600"></div>')
+        expect(css).toContain(".dark .group:hover .group-hover\\:bg-red-600")
+    })
+
+    it("should handle peer-focus variant correctly", async () => {
+        const css = await generateCss('<div class="peer-focus:text-blue-500"></div>')
+        expect(css).toContain(".dark .peer:focus ~ .peer-focus\\:text-blue-500")
+    })
+
+    it("should NOT trigger hover on a color name containing hover", async () => {
+        const css = await generateCss('<div class="bg-hoverred-500"></div>')
+        expect(css).toContain(".dark .bg-hoverred-500")
+        expect(css).not.toContain(".dark .bg-hoverred-500:hover")
+    })
+
+    it("should support default variants like focus and disabled", async () => {
+        const css = await generateCss('<div class="focus:bg-red-600 disabled:opacity-50 disabled:bg-red-400"></div>')
+        expect(css).toContain(".dark .focus\\:bg-red-600:focus")
+        expect(css).toContain(".dark .disabled\\:bg-red-400:disabled")
+    })
+})

package/eslint.config.js

@@ -12,7 +12,10 @@ module.exports = [
                 window: true,
                 document: true,
                 console: true,
-                __dirname: true
+                __dirname: true,
+                getComputedStyle: true,
+                setTimeout: true,
+                localStorage: true
             }
         },
         rules: {

package/helper.js

@@ -1,62 +1,24 @@
 module.exports = {
-  init: () => {
-    const codeToRunOnClient = `
-      (function() {
-        function getInitialColorMode() {
-                const persistedColorPreference = window.localStorage.getItem('nightwind-mode');
-                const hasPersistedPreference = typeof persistedColorPreference === 'string';
-                if (hasPersistedPreference) {
-                  return persistedColorPreference;
-                }
-                const mql = window.matchMedia('(prefers-color-scheme: dark)');
-                const hasMediaQueryPreference = typeof mql.matches === 'boolean';
-                if (hasMediaQueryPreference) {
-                  return mql.matches ? 'dark' : 'light';
-                }
-                return 'light';
-        }
-        getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark');
-      })()
-    `
-    return codeToRunOnClient
-  },
+  init: () => `(function(){try{var m=localStorage.getItem('nightwind-mode'),d=window.matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.toggle('dark',m==='dark'||(!m&&d))}catch(e){}})()`,
 
   beforeTransition: () => {
     const doc = document.documentElement
-    if (!doc.classList.contains("nightwind")) {
-      doc.classList.add("nightwind")
-    }
-    // Use timeout instead of transitionend to avoid premature removal
-    // when multiple properties transition at different speeds
-    const duration = parseFloat(
-      window.getComputedStyle(document.body).getPropertyValue("--nightwind-transition-duration") || "400"
-    )
-    window.setTimeout(() => {
-      doc.classList.remove("nightwind")
-    }, duration + 100) // Small buffer to ensure all transitions complete
+    doc.classList.add("nightwind")
+    const duration = parseFloat(getComputedStyle(doc).getPropertyValue("--nightwind-transition-duration")) || 400
+    setTimeout(() => doc.classList.remove("nightwind"), duration + 20)
   },
 
   toggle: () => {
     module.exports.beforeTransition()
-    if (!document.documentElement.classList.contains("dark")) {
-      document.documentElement.classList.add("dark")
-      window.localStorage.setItem("nightwind-mode", "dark")
-    } else {
-      document.documentElement.classList.remove("dark")
-      window.localStorage.setItem("nightwind-mode", "light")
-    }
+    const isDark = document.documentElement.classList.toggle("dark")
+    document.documentElement.classList.toggle("light", !isDark)
+    localStorage.setItem("nightwind-mode", isDark ? "dark" : "light")
   },
 
   enable: (dark) => {
-    const mode = dark ? "dark" : "light"
-    const opposite = dark ? "light" : "dark"
-
     module.exports.beforeTransition()
-
-    if (document.documentElement.classList.contains(opposite)) {
-      document.documentElement.classList.remove(opposite)
-    }
-    document.documentElement.classList.add(mode)
-    window.localStorage.setItem("nightwind-mode", mode)
+    document.documentElement.classList.toggle("dark", dark)
+    document.documentElement.classList.toggle("light", !dark)
+    localStorage.setItem("nightwind-mode", dark ? "dark" : "light")
   },
 }

package/jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-  testEnvironment: "jsdom",
+  testEnvironment: "node",
   clearMocks: true,
-  collectCoverage: true,
+  collectCoverage: false,
   coverageDirectory: "coverage",
   coverageProvider: "v8",
   testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thiagormoreira/nightwind",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "An automatic, overridable, customisable Tailwind dark mode plugin",
   "main": "src/index.js",
   "repository": {
@@ -29,7 +29,10 @@
   "scripts": {
     "test": "jest",
     "lint": "eslint .",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
+    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+    "prepare": "husky",
+    "preversion": "npm run lint && npm run test",
+    "postversion": "git push --follow-tags"
   },
   "engines": {
     "node": ">=20.12.0"
@@ -39,6 +42,7 @@
     "autoprefixer": "^10.4.24",
     "eslint": "^10.0.0",
     "eslint-plugin-jest": "^29.15.0",
+    "husky": "^9.1.7",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "postcss": "^8.5.6",

package/src/index.js

@@ -1,36 +1,39 @@
 const plugin = require("tailwindcss/plugin")
 
+const invertColorValue = (value) => {
+  if (!value || typeof value !== "string") return value
+  if (value.startsWith("#")) {
+    let hex = value.slice(1)
+    if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("")
+    if (hex.length === 6) {
+      const r = 255 - parseInt(hex.slice(0, 2), 16)
+      const g = 255 - parseInt(hex.slice(2, 4), 16)
+      const b = 255 - parseInt(hex.slice(4, 6), 16)
+      return `rgb(${r}, ${g}, ${b})`
+    }
+  }
+  const rgbMatch = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
+  if (rgbMatch) {
+    const r = 255 - parseInt(rgbMatch[1])
+    const g = 255 - parseInt(rgbMatch[2])
+    const b = 255 - parseInt(rgbMatch[3])
+    const a = rgbMatch[4]
+    return a ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`
+  }
+  return value
+}
+
 const nightwind = plugin(
-  function ({ addBase, addComponents, addUtilities, theme, variants, config }) {
+  function ({ addBase, addComponents, matchUtilities, theme, config }) {
     const darkSelector = ".dark"
-    const fixedElementClass = `.${theme("nightwind.fixedClass", "nightwind-prevent")}`
-    const fixedBlockClass = `.${theme("nightwind.fixedBlockClass", "nightwind-prevent-block")}`
+    const fixedElementClass = `${theme("nightwind.fixedClass", "nightwind-prevent")}`
+    const fixedBlockClass = `${theme("nightwind.fixedBlockClass", "nightwind-prevent-block")}`
     const transitionConfig = theme("nightwind.transitionClasses", "default")
     const colors = theme("colors")
-    const colorClasses = []
-    const transitionClasses = []
-    const typographyValues = {}
-    const typographyClasses = []
-    const colorVariants = ["hover"]
-    const prefixes = ["text", "bg", "border", "ring", "ring-offset", "divide", "placeholder", "outline", "decoration", "accent", "caret", "fill", "stroke", "shadow", "from", "via", "to"]
     const weights = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
     let importantSelector = ""
     let importantProperty = ""
 
-    if (variants("nightwind")) {
-      typeof variants("nightwind") === "object" ? colorVariants.push(...variants("nightwind")) : colorVariants.push(variants("nightwind"))
-    } else if (variants("nightwind.variants")) {
-      typeof variants("nightwind.variants") === "object" ? colorVariants.push(...variants("nightwind.variants")) : colorVariants.push(variants("nightwind.variants"))
-    }
-
-    if (theme("nightwind.colorClasses")) {
-      typeof theme("nightwind.colorClasses") === "object" ? prefixes.push(...theme("nightwind.colorClasses")) : prefixes.push(theme("nightwind.colorClasses"))
-      if (theme("nightwind.colorClasses").includes("gradient")) {
-        // Gradient already handled in default prefixes now, but keeping for compatibility
-        if (!prefixes.includes("from")) prefixes.push(...["from", "via", "to"])
-      }
-    }
-
     if (config("important")) {
       if (typeof config("important") === "string") {
         importantSelector = `${config("important")}${theme("nightwind.importantNode") ? "" : " "}`
@@ -42,31 +45,16 @@ const nightwind = plugin(
 
     function hexToRGB(h, alpha) {
       if (!h || h.includes("var(--")) return h
+      let r, g, b
       if (h.length == 4) {
         let rh = h[1] + h[1], gh = h[2] + h[2], bh = h[3] + h[3]
-        var r = parseInt(rh, 16), g = parseInt(gh, 16), b = parseInt(bh, 16)
+        r = parseInt(rh, 16), g = parseInt(gh, 16), b = parseInt(bh, 16)
       } else if (h.length == 7) {
-        var r = parseInt(h.slice(1, 3), 16), g = parseInt(h.slice(3, 5), 16), b = parseInt(h.slice(5, 7), 16)
+        r = parseInt(h.slice(1, 3), 16), g = parseInt(h.slice(3, 5), 16), b = parseInt(h.slice(5, 7), 16)
       } else return h
       return alpha ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
     }
 
-    const hexToTailwind = (hex) => {
-      let colorCode = ""
-      if (hex != "inherit" && hex != "current" && hex != "transparent") {
-        Object.keys(colors).forEach((col) => {
-          if (typeof theme(`colors.${col}`) === "string") {
-            if (hex === theme(`colors.${col}`)) colorCode = col
-          } else if (typeof theme(`colors.${col}`) === "object") {
-            Object.keys(theme(`colors.${col}`)).forEach((wei) => {
-              if (hex === theme(`colors.${col}.${wei}`)) colorCode = col + "-" + wei
-            })
-          }
-        })
-      } else colorCode = hex
-      return colorCode
-    }
-
     const invertColor = (colorClass) => {
       if (colorClass.includes("white") || colorClass.includes("black")) {
         return {
@@ -74,15 +62,17 @@ const nightwind = plugin(
           defaultColorValue: colorClass.includes("white") ? theme("colors.white") : theme("colors.black"),
         }
       }
-      if (colorClass === "inherit" || colorClass === "transparent" || colorClass === "current") return { colorValue: colorClass, defaultColorValue: colorClass }
+      if (["inherit", "transparent", "current"].includes(colorClass)) return { colorValue: colorClass, defaultColorValue: colorClass }
 
       const colorValues = colorClass.split("-")
       const weight = colorValues.pop()
-      const color = colorValues.pop()
+      const color = colorValues.join("-")
       const defaultValue = theme(`colors.${color}.${weight}`)
       if (!defaultValue) return { colorValue: null, defaultColorValue: null }
 
-      let invertWeightIndex = 9 - weights.indexOf(Number(weight))
+      let invertWeightIndex = weights.indexOf(Number(weight))
+      if (invertWeightIndex === -1) return { colorValue: null, defaultColorValue: null }
+      invertWeightIndex = 9 - invertWeightIndex
       let invertWeight = String(weights[invertWeightIndex])
 
       if (theme("nightwind.colorScale.preset") === "reduced") {
@@ -95,14 +85,13 @@ const nightwind = plugin(
       if (theme(`nightwind.colors.${color}.${weight}`)) {
         colorValue = theme(`colors.${theme(`nightwind.colors.${color}.${weight}`)}`) || theme(`nightwind.colors.${color}.${weight}`)
       } else if (theme(`nightwind.colors.${color}`) && typeof theme(`nightwind.colors.${color}`) === "string") {
-        const colorMap = theme(`nightwind.colors.${color}`)
-        colorValue = theme(`colors.${colorMap}.${invertWeight}`) || theme(`colors.${colorMap}`) || theme(`colors.${color}.${invertWeight}`) || colorMap
+        const colorMapSetting = theme(`nightwind.colors.${color}`)
+        colorValue = theme(`colors.${colorMapSetting}.${invertWeight}`) || theme(`colors.${colorMapSetting}`) || theme(`colors.${color}.${invertWeight}`) || colorMapSetting
       }
 
       return { colorValue, defaultColorValue: defaultValue }
     }
 
-    // Generate transition classes
     let transitionDurationValue = "400ms"
     if (theme("nightwind.transitionDuration") === false || theme("transitionDuration.nightwind") === false) {
       transitionDurationValue = ""
@@ -113,183 +102,102 @@ const nightwind = plugin(
     }
 
     if (transitionDurationValue) {
-      const transitionPrefixes = []
-      if (transitionConfig === "full") transitionPrefixes.push(...prefixes)
-      else if (typeof transitionConfig === "object" || (typeof transitionConfig === "string" && prefixes.includes(transitionConfig))) {
-        typeof transitionConfig === "object" ? transitionPrefixes.push(...transitionConfig) : transitionPrefixes.push(transitionConfig)
-      } else transitionPrefixes.push("text", "bg", "border")
+      addBase({ ":root": { "--nightwind-transition-duration": transitionDurationValue } })
+    }
 
-      Object.keys(colors).forEach((color) => {
-        transitionPrefixes.forEach((prefix) => {
-          if (prefix === "from" || prefix === "via" || prefix === "to") return
-          if (color == "transparent" || color == "current" || color == "white" || color == "black") {
-            const tc = {
-              [`${config("important") ? importantSelector : ""}.nightwind .${prefix}-${color}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
-              [`${config("important") ? importantSelector : ""}.nightwind .dark\\:${prefix}-${color}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
-            }
-            transitionClasses.push(tc)
-          } else {
-            weights.forEach((weight) => {
-              const tc = {
-                [`${config("important") ? importantSelector : ""}.nightwind .${prefix}-${color}-${weight}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
-                [`${config("important") ? importantSelector : ""}.nightwind .dark\\:${prefix}-${color}-${weight}`]: { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" },
-              }
-              transitionClasses.push(tc)
-            })
-          }
-        })
-      })
+    const prefixes = ["text", "bg", "border", "ring", "ring-offset", "divide", "placeholder", "outline", "decoration", "accent", "caret", "fill", "stroke", "shadow", "from", "via", "to"]
+    const variantsList = ["", "hover", "focus", "active", "focus-within", "focus-visible", "disabled", "group-hover", "peer-focus"]
+
+    const properties = {
+      text: { prop: "color", opacity: "--tw-text-opacity" },
+      bg: { prop: "backgroundColor", opacity: "--tw-bg-opacity" },
+      border: { prop: "borderColor", opacity: "--tw-border-opacity" },
+      ring: { prop: "--tw-ring-color", opacity: "--tw-ring-opacity" },
+      "ring-offset": { prop: "--tw-ring-offset-color" },
+      outline: { prop: "outlineColor" },
+      decoration: { prop: "textDecorationColor" },
+      accent: { prop: "accentColor" },
+      caret: { prop: "caretColor" },
+      fill: { prop: "fill" },
+      stroke: { prop: "stroke" },
+      shadow: { prop: "--tw-shadow-color" },
+      divide: { prop: "borderColor", suffix: " > :not([hidden]) ~ :not([hidden])", opacity: "--tw-divide-opacity" },
+      placeholder: { prop: "color", suffix: "::placeholder", opacity: "--tw-placeholder-opacity" },
+      from: { prop: "--tw-gradient-from", stops: true },
+      via: { prop: "--tw-gradient-stops", via: true },
+      to: { prop: "--tw-gradient-to" }
     }
 
-    // Compose colors
-    prefixes.forEach((prefix) => {
-      Object.keys(colors).forEach((color) => {
-        if (color == "white" || color == "black") {
-          colorClasses.push(`${prefix}-${color}`)
-          colorVariants.forEach(v => colorClasses.push(`${v}\\:${prefix}-${color}`))
-        } else if (typeof colors[color] === "object") {
-          weights.forEach((weight) => {
-            colorClasses.push(`${prefix}-${color}-${weight}`)
-            colorVariants.forEach(v => colorClasses.push(`${v}\\:${prefix}-${color}-${weight}`))
+    const nightwindClasses = {}
+
+    Object.keys(colors).forEach(c => {
+      const isStandard = !["transparent", "current", "inherit", "white", "black"].includes(c)
+      const weightsToProcess = isStandard ? weights : ["DEFAULT"]
+
+      weightsToProcess.forEach(w => {
+        const colorClass = isStandard ? `${c}-${w}` : c
+        const invertResults = invertColor(colorClass)
+        if (!invertResults.colorValue) return
+
+        prefixes.forEach(p => {
+          const config = properties[p]
+          if (!config) return
+          const val = config.opacity ? hexToRGB(invertResults.colorValue, `var(${config.opacity}, 1)`) : invertResults.colorValue
+          const defVal = config.opacity ? hexToRGB(invertResults.defaultColorValue, `var(${config.opacity}, 1)`) : invertResults.defaultColorValue
+
+          variantsList.forEach(v => {
+            const baseClass = `${p}-${colorClass}`
+            let selector = ""
+            if (v === "") selector = `.${baseClass}`
+            else if (v.startsWith("group-")) selector = `.group:${v.replace("group-", "")} .${v}\\:${baseClass}`
+            else if (v.startsWith("peer-")) selector = `.peer:${v.replace("peer-", "")} ~ .${v}\\:${baseClass}`
+            else selector = `.${v}\\:${baseClass}:${v}`
+
+            if (config.suffix) selector += config.suffix
+
+            const s = `${importantSelector}${darkSelector} ${selector}`
+            const preventS = `${s}.${fixedElementClass}, ${importantSelector}${darkSelector} .${fixedBlockClass} ${selector}`
+
+            if (config.stops) {
+              nightwindClasses[s] = { "--tw-gradient-from": val + importantProperty, "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(val, "0")})` + importantProperty }
+              nightwindClasses[preventS] = { "--tw-gradient-from": defVal + importantProperty, "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(defVal, "0")})` + importantProperty }
+            } else if (config.via) {
+              nightwindClasses[s] = { "--tw-gradient-stops": `var(--tw-gradient-from), ${val}, var(--tw-gradient-to, ${hexToRGB(val, "0")})` + importantProperty }
+              nightwindClasses[preventS] = { "--tw-gradient-stops": `var(--tw-gradient-from), ${defVal}, var(--tw-gradient-to, ${hexToRGB(defVal, "0")})` + importantProperty }
+            } else {
+              nightwindClasses[s] = { [config.prop]: val + importantProperty }
+              nightwindClasses[preventS] = { [config.prop]: defVal + importantProperty }
+            }
+
+            // Transition classes
+            if (v === "" && transitionDurationValue && (transitionConfig === "full" || (Array.isArray(transitionConfig) && transitionConfig.includes(p)) || (transitionConfig === "default" && ["text", "bg", "border"].includes(p)))) {
+              const transS = `${importantSelector}.nightwind .${baseClass}, ${importantSelector}.nightwind .dark\\:${baseClass}`
+              nightwindClasses[transS] = { transitionDuration: transitionDurationValue, transitionProperty: theme("transitionProperty.colors"), transitionTimingFunction: "ease-in-out" }
+            }
           })
-        }
+        })
       })
     })
 
-    const nightwindClasses = colorClasses.map((colorClass) => {
-      let pseudoVariant = ""
-      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 })
-
-      const invertResults = invertColor(colorClass)
-      let colorValue = invertResults.colorValue
-      let defaultColorValue = invertResults.defaultColorValue
-      if (!colorValue) return null
-
-      let cleanClass = colorClass.replace(/\\/g, "")
-
-      const generateClass = (prefix, property, selectorSuffix = "") => {
-        const twOpacityVar = `var(--tw-${prefix}, 1)`
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${selectorSuffix}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${selectorSuffix}`
-        return {
-          [selector]: { [property]: hexToRGB(colorValue, twOpacityVar) + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}${selectorSuffix}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}${selectorSuffix}`]: { [property]: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}${selectorSuffix}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}${selectorSuffix}`]: { [property]: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty }
-        }
-      }
+    addComponents(nightwindClasses)
 
-      if (colorClass.includes("ring-offset-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "--tw-ring-offset-color": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-ring-offset-color": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-ring-offset-color": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("ring-")) return generateClass("ring-opacity", "--tw-ring-color")
-      if (colorClass.includes("divide-")) {
-        const twOpacityVar = `var(--tw-divide-opacity, 1)`
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant} > :not([hidden]) ~ :not([hidden])`
-        return {
-          [selector]: { borderColor: hexToRGB(colorValue, twOpacityVar) + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass} > :not([hidden]) ~ :not([hidden])`]: { borderColor: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden]), ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]: { borderColor: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty }
-        }
-      }
-      if (colorClass.includes("placeholder-")) {
-        const twOpacityVar = `var(--tw-placeholder-opacity, 1)`
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}::placeholder, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}::placeholder`
-        return {
-          [selector]: { color: hexToRGB(colorValue, twOpacityVar) + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}::placeholder, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}::placeholder`]: { color: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}::placeholder, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}::placeholder`]: { color: hexToRGB(defaultColorValue, twOpacityVar) + importantProperty }
-        }
-      }
-      if (colorClass.includes("text-")) return generateClass("text-opacity", "color")
-      if (colorClass.includes("bg-")) return generateClass("bg-opacity", "backgroundColor")
-      if (colorClass.includes("border-")) return generateClass("border-opacity", "borderColor")
-      if (colorClass.includes("ring-")) return generateClass("ring-opacity", "--tw-ring-color")
-      if (colorClass.includes("outline-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "outlineColor": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "outlineColor": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "outlineColor": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("decoration-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "textDecorationColor": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "textDecorationColor": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "textDecorationColor": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("accent-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "accentColor": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "accentColor": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "accentColor": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("caret-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "caretColor": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "caretColor": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "caretColor": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("fill-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "fill": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "fill": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "fill": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("stroke-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "stroke": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "stroke": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "stroke": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("shadow-")) {
-        const selector = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [selector]: { "--tw-shadow-color": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-shadow-color": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-shadow-color": defaultColorValue + importantProperty }
-        }
-      }
-      if (colorClass.includes("from-")) {
-        const s = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [s]: { "--tw-gradient-from": colorValue + importantProperty, "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(colorValue, "0")})` + importantProperty },
-          [`${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 },
-          [`${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 }
-        }
-      }
-      if (colorClass.includes("via-")) {
-        const s = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [s]: { "--tw-gradient-stops": `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(colorValue, "0")})` + importantProperty },
-          [`${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 },
-          [`${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 }
-        }
-      }
-      if (colorClass.includes("to-")) {
-        const s = `${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}`
-        return {
-          [s]: { "--tw-gradient-to": colorValue + importantProperty },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}, ${importantSelector}${darkSelector} [class*="${cleanClass}/"]${pseudoVariant}${fixedElementClass}`]: { "--tw-gradient-to": defaultColorValue + importantProperty },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}, ${importantSelector}${darkSelector} ${fixedBlockClass} [class*="${cleanClass}/"]${pseudoVariant}`]: { "--tw-gradient-to": defaultColorValue + importantProperty }
-        }
-      }
-      return null
-    }).filter(Boolean)
+    // Arbitrary colors support - Dynamic
+    const arbitraryPrefixes = {
+      text: "color", bg: "backgroundColor", border: "borderColor", ring: "--tw-ring-color", outline: "outlineColor", decoration: "textDecorationColor", accent: "accentColor", caret: "caretColor", fill: "fill", stroke: "stroke"
+    }
+    Object.keys(arbitraryPrefixes).forEach((prefix) => {
+      matchUtilities(
+        {
+          [prefix]: (value) => {
+            if (typeof value !== "string") return null
+            const inverted = invertColorValue(value)
+            if (inverted === value) return null
+            return { [`${darkSelector} &`]: { [arbitraryPrefixes[prefix]]: inverted + importantProperty } }
+          },
+        },
+        { values: {}, type: "color" }
+      )
+    })
 
     if (theme("nightwind.typography")) {
       Object.keys(theme("typography") || {}).forEach((modifier) => {
@@ -298,31 +206,16 @@ const nightwind = plugin(
           Object.keys(n).forEach(classname => {
             const colorProp = Object.keys(n[classname]).find(p => p.includes("color") || p.includes("Color"))
             if (colorProp) {
-              const colorVal = hexToTailwind(n[classname][colorProp])
-              if (!typographyValues[modifier]) typographyValues[modifier] = {}
-              if (!typographyValues[modifier][classname]) typographyValues[modifier][classname] = {}
-              typographyValues[modifier][classname][colorProp] = colorVal
+              const invertResults = invertColor(n[classname][colorProp])
+              const colorValue = invertResults.colorValue || n[classname][colorProp]
+              const defaultColorValue = invertResults.defaultColorValue
+              const s = `${importantSelector}${darkSelector} .${classname}${modifier !== "DEFAULT" ? `-${modifier}` : ""}`
+              addComponents({ [s]: { [colorProp]: colorValue }, [`${s}.${fixedElementClass}`]: { [colorProp]: defaultColorValue } })
             }
           })
         })
       })
-
-      Object.keys(typographyValues).forEach((modifier) => {
-        Object.keys(typographyValues[modifier]).forEach((classname) => {
-          Object.keys(typographyValues[modifier][classname]).forEach((property) => {
-            const invertResults = invertColor(typographyValues[modifier][classname][property])
-            const colorValue = invertResults.colorValue || typographyValues[modifier][classname][property]
-            const defaultColorValue = invertResults.defaultColorValue
-            const s = `${importantSelector}${darkSelector} .${classname}${modifier !== "DEFAULT" ? `-${modifier}` : ""}`
-            typographyClasses.push({ [s]: { [property]: colorValue }, [`${s}${fixedElementClass}`]: { [property]: defaultColorValue } })
-          })
-        })
-      })
     }
-
-    addComponents(nightwindClasses)
-    addComponents(typographyClasses)
-    theme("nightwind.importantNode") ? addComponents(transitionClasses) : addUtilities(transitionClasses)
   },
   { theme: { extend: { transitionDuration: { 0: "0ms" } } } }
 )