@thiagormoreira/nightwind 1.1.13 → 1.2.9

package/.github/workflows/ci.yml

@@ -0,0 +1,55 @@
+name: CI Workflow
+
+on:
+  push:
+    branches:
+      - main
+      - master
+    tags:
+      - 'v*.*.*'
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run Tests
+        run: npm run test
+
+  publish:
+    needs: test
+    if: startsWith(github.ref, 'refs/tags/v')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 80
+}

package/README.md

@@ -1,5 +1,9 @@
 ![Nightwind cover image](https://github.com/jjranalli/nightwind-demo/raw/master/nightwindcss.com/public/nightwind-logotext.png)
 
+IMPORTANT: This repository is a maintained fork of the original "nightwind" project (https://github.com/jjranalli/nightwind). The original package was abandoned by its author. I (thiagormoreira) forked the project and will continue maintaining and publishing updates, fixes and compatibility improvements here.
+
+---
+
 A Tailwind CSS plugin that gives you an **out-of-the-box, customisable, overridable dark mode.**
 
 ---
@@ -123,7 +127,7 @@ export default function Navbar() {
 
 ### BeforeTransition
 
-Nightwind also exports a `beforeTransition` function that you can leverage in case you prefer to build your own toggle functions. It prevents unwanted transitions as a side-effect of having nightwind class in the html tag.
+Nightwind also exports a `beforeTransition` function that you can leverage in case you prefer to build your own toggle functions. It prevents unwanted transitions as a side-effect of having nightwind [...]
 
 Check out the `toggle` function in the [Nextjs example below](#examples) for an example of how this could be implemented.
 
@@ -227,11 +231,10 @@ export default function Navbar() {
 
 </details>
 
-
 <details>
   <summary>Pure JavaScript or Alpine.js</summary>
   
-The whole idea is to deconstruct helper.js, converting it from a module to a var. And unpacking the 'init' function from within helper to be its own script body to execut at DOM render. Here is the code for that at the time of writing (Oct 14th 2021). As long as the classes made it to tailwind.css (did you configure the plugins right?) then this will enable `nightwind.toggle()` and `nightwind.enable()`
+  The whole idea is to deconstruct helper.js, converting it from a module to a var. And unpacking the 'init' function from within helper to be its own script body to execut at DOM render. Here is the co[...] 
    
 ```js
 <script>
@@ -248,20 +251,20 @@ var nightwind = {
     }
   },
 
-  toggle: () => {
-    nightwind.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');
-    }
-  },
+toggle: () => {
+nightwind.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');
+}
+},
 
-  enable: (dark) => {
-    const mode = dark ? "dark" : "light";
-    const opposite = dark ? "light" : "dark";
+enable: (dark) => {
+const mode = dark ? "dark" : "light";
+const opposite = dark ? "light" : "dark";
 
     nightwind.beforeTransition();
 
@@ -270,9 +273,11 @@ var nightwind = {
     }
     document.documentElement.classList.add(mode);
     window.localStorage.setItem('nightwind-mode', mode);
-  },
- }
+
+},
+}
 </script>
+
 <script>
 (function() {
   function getInitialColorMode() {
@@ -291,7 +296,8 @@ var nightwind = {
   getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark');
 })()
 </script>
-```
+
+````
 
 </details>
 
@@ -323,7 +329,7 @@ You can also extend Nightwind to other classes and variants:
 
 Nightwind switches between opposite color weights when switching to dark mode. So a -50 color gets switched with a -900 color, -100 with -800 and so forth.
 
-> Note: Except for the -50 and -900 weights, the sum of opposite weights is always 900. To customise how Nightwind inverts colors by default, see [how to set up a custom color scale](#custom-color-scale)
+> Note: Except for the -50 and -900 weights, the sum of opposite weights is always 900. To customise how Nightwind inverts colors by default, see [how to set up a custom color scale](#custom-color-sca[...])
 
 If you add your custom colors in tailwind.config.js using number notation, Nightwind will treat them the same way as Tailwind's colors when switching into dark mode.
 
@@ -343,7 +349,7 @@ module.exports = {
     },
   },
 }
-```
+````
 
 Check out [**color mappings**](#color-mappings) to see how to further customize your dark theme.
 
@@ -381,7 +387,7 @@ If you want an element to remain exactly the same in both light and dark modes,
 
 > Note: if you only want some of the colors to remain unchanged, consider using [overrides](#overrides).
 
-To prevent all children of an element to remain unchanged in dark mode, you can add the **'nightwind-prevent-block'** class to the element. All descandant nodes of the element will be prevented from switching.
+To prevent all children of an element to remain unchanged in dark mode, you can add the **'nightwind-prevent-block'** class to the element. All descandant nodes of the element will be prevented from s[...]  
 
 You can customize the name of both classes in your tailwind.config.js file
 
@@ -433,7 +439,7 @@ module.exports = {
 
 Nightwind by default generates transition classes for 'text', 'bg' and 'border' color classes. This should make most elements transition smoothly without affecting performances.
 
-In your configuration file you can also set the **transitionClasses** property to 'full' to enable generation of transition classes for all color classes used throughout your website (i.e. rings, divide and placeholder).
+In your configuration file you can also set the **transitionClasses** property to 'full' to enable generation of transition classes for all color classes used throughout your website (i.e. rings, divi[...] 
 
 ```js
 // tailwind.config.js
@@ -656,60 +662,4 @@ module.exports = {
     },
   },
 }
-```
-
-## Overrides
-
-The default dark variant allows you to write classes like 'dark:bg-gray-200' (not necessarily related to color classes) that only gets applied when you switch into dark mode.
-
-The 'dark' variant can be used to override the automatic Nightwind classes.
-
-```html
-<h2 class="text-gray-900 dark:text-yellow-200">I'm yellow in dark mode</h2>
-```
-
-> Note: The 'dark' variant can also be concatenated with both screens and other variants, so you can write classes like 'sm:dark:hover:text-yellow-200'.
-
-Please refer to the [Tailwind official documentation](https://tailwindcss.com/docs/dark-mode) to learn more about the 'dark' variant.
-
-## Typography
-
-If you're using the [Typography plugin](https://github.com/tailwindlabs/tailwindcss-typography), you can let Nightwind build an automatic dark mode of all typography color styles.
-
-> Note: It will respect all customizations and [color mappings](#color-mappings) specified in your nightwind configuration.
-
-Simply add the following line in your Nightwind theme configuration:
-
-```js
-// tailwind.config.js
-module.exports = {
-  theme: {
-    nightwind: {
-      typography: true,
-    },
-  },
-}
-```
-
-To fine-tune your typography dark mode, you can define the single classes by using the [individual color syntax](#individual-colors) (either hex or tailwind-based color codes).
-
-```js
-// tailwind.config.js
-module.exports = {
-  theme: {
-    nightwind: {
-      typography: {
-        color: "blue.400",
-        h1: {
-          color: "#90e0ef",
-        },
-        indigo: {
-          a: {
-            color: "purple.300",
-          },
-        },
-      },
-    },
-  },
-}
-```
+```

package/__tests__/helper.test.js

@@ -0,0 +1,100 @@
+const helper = require("../helper.js")
+
+describe("nightwind/helper", () => {
+  let originalMatchMedia
+  let originalLocalStorage
+
+  beforeEach(() => {
+    // Mock for localStorage
+    const localStorageMock = (() => {
+      let store = {}
+      return {
+        getItem: (key) => store[key] || null,
+        setItem: (key, value) => {
+          store[key] = value.toString()
+        },
+        clear: () => {
+          store = {}
+        },
+      }
+    })()
+
+    // Mock for matchMedia
+    const matchMediaMock = jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    }))
+
+    originalMatchMedia = window.matchMedia
+    originalLocalStorage = window.localStorage
+
+    Object.defineProperty(window, "localStorage", {
+      value: localStorageMock,
+      writable: true,
+    })
+    Object.defineProperty(window, "matchMedia", {
+      value: matchMediaMock,
+      writable: true,
+    })
+
+    document.documentElement.className = ""
+  })
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia
+    window.localStorage = originalLocalStorage
+    jest.clearAllMocks()
+  })
+
+  describe("init()", () => {
+    it("should return the initialization script logic", () => {
+      const script = helper.init()
+      expect(typeof script).toBe("string")
+      expect(script).toContain("getInitialColorMode")
+    })
+  })
+
+  describe("toggle()", () => {
+    it("should toggle to 'dark' when current is not 'dark'", () => {
+      helper.toggle()
+      expect(document.documentElement.classList.contains("dark")).toBe(true)
+      expect(window.localStorage.getItem("nightwind-mode")).toBe("dark")
+    })
+
+    it("should toggle to 'light' when current is 'dark'", () => {
+      document.documentElement.classList.add("dark")
+      helper.toggle()
+      expect(document.documentElement.classList.contains("dark")).toBe(false)
+      expect(window.localStorage.getItem("nightwind-mode")).toBe("light")
+    })
+
+    it("should add nightwind transition class", () => {
+      helper.toggle()
+      expect(document.documentElement.classList.contains("nightwind")).toBe(
+        true
+      )
+    })
+  })
+
+  describe("enable()", () => {
+    it("should enable 'dark' mode", () => {
+      helper.enable(true)
+      expect(document.documentElement.classList.contains("dark")).toBe(true)
+      expect(window.localStorage.getItem("nightwind-mode")).toBe("dark")
+    })
+
+    it("should enable 'light' mode", () => {
+      document.documentElement.classList.add("dark")
+      helper.enable(false)
+      expect(document.documentElement.classList.contains("light")).toBe(true)
+      expect(document.documentElement.classList.contains("dark")).toBe(false)
+      expect(window.localStorage.getItem("nightwind-mode")).toBe("light")
+    })
+  })
+})

package/__tests__/index.test.js

@@ -0,0 +1,60 @@
+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: {
+              50: "#fef2f2",
+              300: "#fca5a5",
+              600: "#dc2626",
+              900: "#7f1d1d",
+            },
+            blue: {
+              300: "#93c5fd",
+              500: "#3b82f6",
+              600: "#2563eb",
+            },
+          },
+        },
+      },
+      plugins: [nightwind],
+      ...config,
+    }),
+  ]).process("@tailwind utilities; @tailwind components;", {
+    from: undefined,
+  })
+  return result.css
+}
+
+describe("nightwind plugin", () => {
+  it("should invert background classes", async () => {
+    const css = await generateCss('<div class="bg-red-600"></div>')
+    expect(css).toContain(".dark .bg-red-600")
+    // For tailwind 3.x with JIT, it generates the specific utility and the dark version
+  })
+
+  it("should invert text classes", async () => {
+    const css = await generateCss('<div class="text-blue-300"></div>')
+    expect(css).toContain(".dark .text-blue-300")
+  })
+
+  it("should handle white and black backgrounds", async () => {
+    const css = await generateCss('<div class="bg-white text-black"></div>')
+    expect(css).toContain(".dark .bg-white")
+    expect(css).toContain(".dark .text-black")
+  })
+
+  it("should generate prevent switch classes", async () => {
+    const css = await generateCss(
+      '<div class="bg-red-600 nightwind-prevent"></div>'
+    )
+    expect(css).toContain(".nightwind-prevent")
+  })
+})

package/eslint.config.js

@@ -0,0 +1,24 @@
+const jestPlugin = require("eslint-plugin-jest");
+
+module.exports = [
+    jestPlugin.configs["flat/recommended"],
+    {
+        languageOptions: {
+            ecmaVersion: 2021,
+            sourceType: "commonjs",
+            globals: {
+                require: true,
+                module: true,
+                window: true,
+                document: true,
+                console: true,
+                __dirname: true
+            }
+        },
+        rules: {
+            "no-unused-vars": "warn",
+            "no-undef": "error",
+            "jest/expect-expect": "warn"
+        }
+    }
+];

package/helper.js

@@ -17,84 +17,43 @@ module.exports = {
         }
         getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark');
       })()
-    `;
-    return codeToRunOnClient;
+    `
+    return codeToRunOnClient
   },
-  
+
   beforeTransition: () => {
-    const doc = document.documentElement;
+    const doc = document.documentElement
     const onTransitionDone = () => {
-      doc.classList.remove('nightwind');
-      doc.removeEventListener('transitionend', onTransitionDone);
+      doc.classList.remove("nightwind")
+      doc.removeEventListener("transitionend", onTransitionDone)
     }
-    doc.addEventListener('transitionend', onTransitionDone);
-    if (!doc.classList.contains('nightwind')) {
-      doc.classList.add('nightwind');
+    doc.addEventListener("transitionend", onTransitionDone)
+    if (!doc.classList.contains("nightwind")) {
+      doc.classList.add("nightwind")
     }
   },
 
   toggle: () => {
-    module.exports.beforeTransition();
-    if (!document.documentElement.classList.contains('dark')) {
-      document.documentElement.classList.add('dark');
-      window.localStorage.setItem('nightwind-mode', 'dark');
+    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');
+      document.documentElement.classList.remove("dark")
+      window.localStorage.setItem("nightwind-mode", "light")
     }
   },
-  
+
   enable: (dark) => {
-    const mode = dark ? "dark" : "light";
-    const opposite = dark ? "light" : "dark";
+    const mode = dark ? "dark" : "light"
+    const opposite = dark ? "light" : "dark"
 
-    module.exports.beforeTransition();
+    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);
-  },
-
-  // Old
-
-  checkNightMode: () => {
-    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-  },
-
-  watchNightMode: () => {
-    if (!window.matchMedia) return;
-    window.matchMedia('(prefers-color-scheme: dark)').addListener(module.exports.addNightModeSelector());
-  },
-
-  addNightModeSelector: () => {
-    if (module.exports.checkNightMode()) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  },
-
-  addNightTransitions: () => {
-    if (!document.documentElement.classList.contains('nightwind')) {
-      document.documentElement.classList.add('nightwind');
-    }
-  },
-
-  initNightwind: () => {
-    module.exports.watchNightMode();
-    module.exports.addNightModeSelector();
-    module.exports.addNightTransitions();
-  },
-
-  toggleNightMode: () => {
-    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');
+      document.documentElement.classList.remove(opposite)
     }
+    document.documentElement.classList.add(mode)
+    window.localStorage.setItem("nightwind-mode", mode)
   },
 }

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  clearMocks: true,
+  collectCoverage: true,
+  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": "1.1.13",
+  "version": "1.2.9",
   "description": "An automatic, overridable, customisable Tailwind dark mode plugin",
   "main": "src/index.js",
   "repository": {
@@ -27,6 +27,18 @@
   },
   "homepage": "https://github.com/thiagormoreira/nightwind#readme",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest",
+    "lint": "eslint .",
+    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.24",
+    "eslint": "^10.0.0",
+    "eslint-plugin-jest": "^29.15.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "tailwindcss": "^3.4.19"
   }
 }

package/src/index.js

@@ -339,9 +339,8 @@ const nightwind = plugin(
                   if (!typographyValues[`${modifier}`][`${classname}`]) {
                     typographyValues[`${modifier}`][`${classname}`] = {}
                   }
-                  typographyValues[`${modifier}`][`${classname}`][
-                    property
-                  ] = colorValue
+                  typographyValues[`${modifier}`][`${classname}`][property] =
+                    colorValue
                 }
               })
             }
@@ -561,24 +560,27 @@ const nightwind = plugin(
 
       const generateClass = (prefix, property) => {
         return {
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]: {
-            [`${property}`]: colorValue + importantProperty,
-            [`${property}`]:
-              hexToRGB(`${colorValue}`, `var(--tw-${prefix})`) +
-              importantProperty,
-          },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]: {
-            [`${property}`]: defaultColorValue + importantProperty,
-            [`${property}`]:
-              hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
-              importantProperty,
-          },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]: {
-            [`${property}`]: defaultColorValue + importantProperty,
-            [`${property}`]:
-              hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
-              importantProperty,
-          },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
+            {
+              [`${property}`]: colorValue + importantProperty,
+              [`${property}`]:
+                hexToRGB(`${colorValue}`, `var(--tw-${prefix})`) +
+                importantProperty,
+            },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
+            {
+              [`${property}`]: defaultColorValue + importantProperty,
+              [`${property}`]:
+                hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
+                importantProperty,
+            },
+          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
+            {
+              [`${property}`]: defaultColorValue + importantProperty,
+              [`${property}`]:
+                hexToRGB(`${defaultColorValue}`, `var(--tw-${prefix})`) +
+                importantProperty,
+            },
         }
       }
 
@@ -608,24 +610,27 @@ const nightwind = plugin(
         return generateClass("ring-opacity", "--tw-ring-color")
       } else if (colorClass.includes("divide-")) {
         return {
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]: {
-            borderColor: colorValue + importantProperty,
-            borderColor:
-              hexToRGB(`${colorValue}`, `var(--tw-divide-opacity)`) +
-              importantProperty,
-          },
-          [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]: {
-            borderColor: defaultColorValue + importantProperty,
-            borderColor:
-              hexToRGB(`${defaultColorValue}`, `var(--tw-divide-opacity)`) +
-              importantProperty,
-          },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]: {
-            borderColor: defaultColorValue + importantProperty,
-            borderColor:
-              hexToRGB(`${defaultColorValue}`, `var(--tw-divide-opacity)`) +
-              importantProperty,
-          },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
+            {
+              borderColor: colorValue + importantProperty,
+              borderColor:
+                hexToRGB(`${colorValue}`, `var(--tw-divide-opacity)`) +
+                importantProperty,
+            },
+          [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
+            {
+              borderColor: defaultColorValue + importantProperty,
+              borderColor:
+                hexToRGB(`${defaultColorValue}`, `var(--tw-divide-opacity)`) +
+                importantProperty,
+            },
+          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant} > :not([hidden]) ~ :not([hidden])`]:
+            {
+              borderColor: defaultColorValue + importantProperty,
+              borderColor:
+                hexToRGB(`${defaultColorValue}`, `var(--tw-divide-opacity)`) +
+                importantProperty,
+            },
         }
       } else if (colorClass.includes("placeholder-")) {
         return {
@@ -635,93 +640,107 @@ const nightwind = plugin(
               hexToRGB(`${colorValue}`, `var(--tw-text-opacity)`) +
               importantProperty,
           },
-          [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder`]: {
-            color: defaultColorValue + importantProperty,
-            color:
-              hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
-              importantProperty,
-          },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder`]: {
-            color: defaultColorValue + importantProperty,
-            color:
-              hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
-              importantProperty,
-          },
+          [`${importantSelector}${darkSelector} ${fixedElementClass}.${colorClass}::placeholder`]:
+            {
+              color: defaultColorValue + importantProperty,
+              color:
+                hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
+                importantProperty,
+            },
+          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}::placeholder`]:
+            {
+              color: defaultColorValue + importantProperty,
+              color:
+                hexToRGB(`${defaultColorValue}`, `var(--tw-text-opacity)`) +
+                importantProperty,
+            },
         }
       } else if (colorClass.includes("ring-offset-")) {
         return {
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]: {
-            "--tw-ring-offset-color": colorValue + importantProperty,
-          },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]: {
-            "--tw-ring-offset-color": defaultColorValue + importantProperty,
-          },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]: {
-            "--tw-ring-offset-color": defaultColorValue + importantProperty,
-          },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
+            {
+              "--tw-ring-offset-color": colorValue + importantProperty,
+            },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
+            {
+              "--tw-ring-offset-color": defaultColorValue + importantProperty,
+            },
+          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
+            {
+              "--tw-ring-offset-color": defaultColorValue + importantProperty,
+            },
         }
       } else if (colorClass.includes("from-")) {
         return {
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]: {
-            "--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}`]: {
-            "--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}`]: {
-            "--tw-gradient-from": defaultColorValue + importantProperty,
-            "--tw-gradient-stops":
-              `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
-                `${defaultColorValue}`,
-                "0"
-              )})` + importantProperty,
-          },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
+            {
+              "--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}`]:
+            {
+              "--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}`]:
+            {
+              "--tw-gradient-from": defaultColorValue + importantProperty,
+              "--tw-gradient-stops":
+                `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
+                  `${defaultColorValue}`,
+                  "0"
+                )})` + importantProperty,
+            },
         }
       } else if (colorClass.includes("via-")) {
         return {
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]: {
-            "--tw-gradient-stops":
-              `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
-                `${colorValue}`,
-                "0"
-              )})` + importantProperty,
-          },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]: {
-            "--tw-gradient-stops":
-              `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
-                `${defaultColorValue}`,
-                "0"
-              )})` + importantProperty,
-          },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]: {
-            "--tw-gradient-stops":
-              `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
-                `${defaultColorValue}`,
-                "0"
-              )})` + importantProperty,
-          },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
+            {
+              "--tw-gradient-stops":
+                `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
+                  `${colorValue}`,
+                  "0"
+                )})` + importantProperty,
+            },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
+            {
+              "--tw-gradient-stops":
+                `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
+                  `${defaultColorValue}`,
+                  "0"
+                )})` + importantProperty,
+            },
+          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
+            {
+              "--tw-gradient-stops":
+                `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
+                  `${defaultColorValue}`,
+                  "0"
+                )})` + importantProperty,
+            },
         }
       } else if (colorClass.includes("to-")) {
         return {
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]: {
-            "--tw-gradient-to": colorValue + importantProperty,
-          },
-          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]: {
-            "--tw-gradient-to": defaultColorValue + importantProperty,
-          },
-          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]: {
-            "--tw-gradient-to": defaultColorValue + importantProperty,
-          },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}`]:
+            {
+              "--tw-gradient-to": colorValue + importantProperty,
+            },
+          [`${importantSelector}${darkSelector} .${colorClass}${pseudoVariant}${fixedElementClass}`]:
+            {
+              "--tw-gradient-to": defaultColorValue + importantProperty,
+            },
+          [`${importantSelector}${darkSelector} ${fixedBlockClass} .${colorClass}${pseudoVariant}`]:
+            {
+              "--tw-gradient-to": defaultColorValue + importantProperty,
+            },
         }
       }
     })