oklchtohex 0.6.2 → 0.7.0

package/README.md

@@ -12,6 +12,7 @@ Built for teams using Tailwind v4 who want HEX values in generated CSS for QA, c
 
 - Converts `oklch(...)` to HEX (`#RRGGBB` / `#RRGGBBAA`)
 - Works as a Vite plugin (auto-convert in `dev` and `build`)
+- Works with Next.js via `next.config` wrapper
 - Works as a plain JS utility for custom build scripts
 - Handles Tailwind default color variables with exact palette HEX values
 - Handles Tailwind slash opacity utilities like `border-red-500/30`
@@ -47,40 +48,41 @@ Default behavior:
 
 No changes are required to your existing `dev` or `build` commands.
 
-## PostCSS Plugin (Next.js and others)
+## Next.js (`next.config` wrapper)
 
-Use the PostCSS plugin when your framework runs PostCSS (Next.js, many Tailwind pipelines).
+Use the Next wrapper export to auto-convert emitted CSS.
 
-`postcss.config.mjs`:
+`next.config.js`:
 
 ```js
-import tailwind from "@tailwindcss/postcss";
-import { oklchToHexPostcssPlugin } from "oklchtohex/postcss";
-
-export default {
-  plugins: [
-    tailwind(),
-    oklchToHexPostcssPlugin({ gamut: "clip" })
-  ]
-};
+const { withOklchToHexNext } = require("oklchtohex/next");
+
+module.exports = withOklchToHexNext(
+  {
+    // your existing Next config
+  },
+  {
+    gamut: "clip"
+  }
+);
 ```
 
-If your config uses object-style plugins (common in some templates), use:
+or ESM `next.config.mjs`:
 
 ```js
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-    "oklchtohex/postcss": { gamut: "clip" }
+import { withOklchToHexNext } from "oklchtohex/next";
+
+export default withOklchToHexNext(
+  {
+    // your existing Next config
+  },
+  {
+    gamut: "clip"
   }
-};
-
-export default config;
+);
 ```
 
-If you previously saw `TypeError: require(...) is not a function`, it was caused by CommonJS loading of an ESM-only plugin path. Use `oklchtohex@0.5.2+` and the config above.
-
-For Next.js, keep your standard commands:
+Keep your standard commands:
 
 ```json
 {
@@ -203,7 +205,7 @@ Yes. Custom theme variables are converted first, then opacity utilities emitted
 
 ### Can I use this without Vite?
 
-Yes. Use the JS API (`replaceOklchInText` / `convertTailwindCssToHex`) in any Node-based build step.
+Yes. Use Next wrapper (`oklchtohex/next`) or JS API (`replaceOklchInText` / `convertTailwindCssToHex`) in any Node-based build step.
 
 ### What if a color token cannot be parsed?
 

package/dist/index.js

@@ -1 +1 @@
-export*from"./converter.js";import{oklchToHexVitePlugin as t}from"./vite-plugin.js";import{oklchToHexPostcssPlugin as l}from"./postcss-plugin.js";export{l as oklchToHexPostcssPlugin,t as oklchToHexVitePlugin};
+export*from"./converter.js";import{oklchToHexVitePlugin as t}from"./vite-plugin.js";import{withOklchToHexNext as f}from"./next-plugin.js";export{t as oklchToHexVitePlugin,f as withOklchToHexNext};

package/dist/next-plugin.cjs

@@ -0,0 +1 @@
+var f=Object.create;var u=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var b=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of x(e))!S.call(t,s)&&s!==o&&u(t,s,{get:()=>e[s],enumerable:!(n=w(e,s))||n.enumerable});return t};var m=(t,e,o)=>(o=t!=null?f(g(t)):{},b(e||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t));class d{constructor(e){this.options=e||{}}apply(e){const o="oklchtohex-next-webpack-plugin",{Compilation:n,sources:s}=e.webpack;let i;e.hooks.thisCompilation.tap(o,c=>{c.hooks.processAssets.tapPromise({name:o,stage:n.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE},async h=>{for(const[r,k]of Object.entries(h)){if(!r.endsWith(".css"))continue;const p=k.source().toString();if(!p.toLowerCase().includes("oklch("))continue;i||(i=import("./converter.js"));const l=(await i).replaceOklchInText(p,this.options);l!==p&&c.updateAsset(r,new s.RawSource(l))}})})}}function a(t,e){const o=t||{};return{...o,webpack(n,s){const i=typeof o.webpack=="function"?o.webpack:null,c=i?i(n,s):n;return c.plugins=c.plugins||[],c.plugins.push(new d(e)),c}}}module.exports=a,module.exports.default=a,module.exports.withOklchToHexNext=a;

package/dist/next-plugin.js

@@ -0,0 +1 @@
+import{replaceOklchInText as l}from"./converter.js";class k{constructor(s={}){this.options=s}apply(s){const t="oklchtohex-next-webpack-plugin",{Compilation:c,sources:n}=s.webpack;s.hooks.thisCompilation.tap(t,e=>{e.hooks.processAssets.tap({name:t,stage:c.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE},u=>{for(const[p,r]of Object.entries(u)){if(!p.endsWith(".css"))continue;const i=r.source().toString();if(!i.toLowerCase().includes("oklch("))continue;const a=l(i,this.options);a!==i&&e.updateAsset(p,new n.RawSource(a))}})})}}function w(o={},s={}){return{...o,webpack(t,c){const n=typeof o.webpack=="function"?o.webpack:null,e=n?n(t,c):t;return e.plugins=e.plugins||[],e.plugins.push(new k(s)),e}}}export{w as withOklchToHexNext};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "oklchtohex",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Convert OKLCH colors to HEX as a JavaScript package.",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./vite": "./dist/vite-plugin.js",
-    "./postcss": {
-      "import": "./dist/postcss-plugin.js",
-      "require": "./dist/postcss-plugin.cjs",
-      "default": "./dist/postcss-plugin.js"
+    "./next": {
+      "import": "./dist/next-plugin.js",
+      "require": "./dist/next-plugin.cjs",
+      "default": "./dist/next-plugin.js"
     },
     "./converter": "./dist/converter.js"
   },
@@ -32,8 +32,8 @@
     "tailwindcss",
     "vite",
     "vite-plugin",
-    "postcss",
-    "postcss-plugin",
+    "nextjs",
+    "webpack",
     "color",
     "converter"
   ],

package/dist/postcss-plugin.cjs

@@ -1 +0,0 @@
-var p=Object.create;var i=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var a=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of u(o))!g.call(s,n)&&n!==t&&i(s,n,{get:()=>o[n],enumerable:!(e=r(o,n))||e.enumerable});return s};var d=(s,o,t)=>(t=s!=null?p(a(s)):{},x(o||!s||!s.__esModule?i(t,"default",{value:s,enumerable:!0}):t,s));function c(s){const o=s||{};return{postcssPlugin:"oklchtohex-postcss-plugin",async Once(t){const e=t.toString();if(!e.toLowerCase().includes("oklch("))return;const l=(await import("./converter.js")).replaceOklchInText(e,o);l!==e&&(t.removeAll(),t.append(l))}}}c.postcss=!0,module.exports=c,module.exports.default=c,module.exports.oklchToHexPostcssPlugin=c;

package/dist/postcss-plugin.js

@@ -1 +0,0 @@
-import{replaceOklchInText as c}from"./converter.js";function t(n={}){return{postcssPlugin:"oklchtohex-postcss-plugin",Once(e){const s=e.toString();if(!s.toLowerCase().includes("oklch("))return;const o=c(s,n);o!==s&&(e.removeAll(),e.append(o))}}}t.postcss=!0;var r=t;export{r as default,t as oklchToHexPostcssPlugin};