oklchtohex 0.7.1 → 0.7.3

package/README.md

@@ -4,10 +4,12 @@
 [![license](https://img.shields.io/npm/l/oklchtohex.svg)](https://www.npmjs.com/package/oklchtohex)
 [![npm downloads](https://img.shields.io/npm/dm/oklchtohex.svg)](https://www.npmjs.com/package/oklchtohex)
 
-Tailwind v4 outputs many colors as `oklch(...)`.  
-That is great for color quality, but inconvenient when teams want HEX in generated CSS (QA, clients, design handoff).
+`oklchtohex` converts `oklch(...)` color values to HEX in emitted CSS.
 
-`oklchtohex` converts those values to HEX automatically.
+It provides:
+- A Vite plugin (`oklchtohex/vite`)
+- A Next.js webpack wrapper (`oklchtohex/next`)
+- Direct converter utilities (`oklchtohex` or `oklchtohex/converter`)
 
 ## Install
 
@@ -24,78 +26,78 @@ import { defineConfig } from "vite";
 import { oklchToHexVitePlugin } from "oklchtohex/vite";
 
 export default defineConfig({
-  plugins: [
-    // ...existing plugins
-    oklchToHexVitePlugin()
-  ]
+  plugins: [oklchToHexVitePlugin()]
 });
 ```
 
-No command changes needed. Your normal `vite dev` and `vite build` continue to work.
-
-### Next.js
+### Next.js (CJS)
 
 ```js
 const { withOklchToHexNext } = require("oklchtohex/next");
 
-module.exports = withOklchToHexNext(
-  {
-    // your existing Next config
-  },
-  {
-    gamut: "clip"
-  }
-);
+module.exports = withOklchToHexNext({
+  // your next config
+});
 ```
 
-For ESM `next.config.mjs`:
+### Next.js (ESM)
 
 ```js
 import { withOklchToHexNext } from "oklchtohex/next";
 
-export default withOklchToHexNext(
-  {
-    // your existing Next config
-  },
-  {
-    gamut: "clip"
-  }
-);
+export default withOklchToHexNext({
+  // your next config
+});
 ```
 
-No command changes needed. Keep `next dev`, `next build`, `next start`.
-
-## Common Options
+## JavaScript API
 
 ```js
-{
-  gamut: "clip",        // default, closest practical output
-  includeAlpha: "auto", // include alpha only when needed
-  uppercase: false,
-  onError: "preserve"
-}
+import {
+  parseOklch,
+  oklchToHex,
+  replaceOklchInText,
+  convertTailwindCssToHex
+} from "oklchtohex";
+
+parseOklch("oklch(50% 0 0 / 60%)");
+// => { l: 0.5, c: 0, h: 0, alpha: 0.6 }
+
+oklchToHex("oklch(0 0 0)");
+// => #000000
+
+replaceOklchInText(".btn{color:oklch(0 0 0 / 50%)}");
+// => .btn{color:#00000080}
+
+convertTailwindCssToHex(":root{--x:oklch(1 0 0)}");
+// => :root{--x:#ffffff}
 ```
 
-## What It Handles
+Use `oklchtohex/converter` if you only want converter functions.
 
-- `oklch(...)` -> HEX
-- Tailwind default palette vars (`--color-red-500`, etc.)
-- Slash opacity utilities like `border-red-500/30`
-- Custom theme color utilities like `border-aurora/40` (when emitted via CSS variables)
+## Options
 
-## Notes
+These options are accepted by converter functions and plugin integrations unless marked otherwise.
 
-- DevTools `Styles` shows what your source CSS contains (HEX after conversion).
-- DevTools `Computed` may still normalize to `rgb(...)` in some browsers.
-- Node.js `>=18` is required.
+| Option | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `gamut` | `"clip" \| "fit"` | `"clip"` | `"clip"` clamps channels, `"fit"` reduces chroma to fit sRGB. |
+| `includeAlpha` | `"auto" \| "always" \| "never" \| boolean` | `"auto"` | `"auto"` adds alpha only when `< 1`. |
+| `uppercase` | `boolean` | `false` | Outputs uppercase HEX. |
+| `onError` | `"preserve" \| "throw"` | `"preserve"` | `"preserve"` keeps original token on parse/convert failure. |
+| `convertDev` | `boolean` | `true` | Vite + Next only. Disable conversion in dev mode. |
+| `convertBuild` | `boolean` | `true` | Vite + Next only. Disable conversion in build mode. |
+| `include` | `RegExp \| (id: string) => boolean` | `/\.(css\|pcss\|postcss\|scss\|sass\|less\|styl\|stylus)(?:$\|\?)/i` | Vite only. File filter. |
+| `exclude` | `RegExp \| (id: string) => boolean` | `undefined` | Vite only. Skip filter. |
 
-## FAQ
+## Tailwind-Specific Handling
 
-### Do I need to change build/dev commands?
-No. Add plugin/config once, keep your existing commands.
+`replaceOklchInText` also supports common Tailwind CSS output patterns:
+- Replaces known default palette variables like `--color-red-500` with mapped HEX.
+- Converts `color-mix(in oklab, var(--color-... ) N%, transparent)` into HEX with alpha.
+- Handles slash opacity output such as `border-red-500/30` when emitted through CSS variables.
 
-### Why do I still see `rgb(...)` sometimes?
-That is usually in DevTools `Computed` view. Check `Styles` or emitted CSS for HEX.
+## Compatibility
 
-### What if parsing fails for a color token?
-By default (`onError: "preserve"`), the original token is kept.
+- Node.js `>=18`
+- Next.js integration is webpack-based and processes emitted `.css` assets

package/dist/next-plugin.cjs

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

package/dist/next-plugin.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oklchtohex",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Convert OKLCH colors to HEX as a JavaScript package.",
   "type": "module",
   "main": "./dist/index.js",