oklchtohex 0.4.1 → 0.5.1

package/README.md

@@ -29,12 +29,11 @@ Add the plugin to `vite.config.js` or `vite.config.ts`:
 
 ```js
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
 import { oklchToHexVitePlugin } from "oklchtohex/vite";
 
 export default defineConfig({
   plugins: [
-    react(),
+    // ...your existing Vite plugins
     oklchToHexVitePlugin()
   ]
 });
@@ -48,6 +47,49 @@ Default behavior:
 
 No changes are required to your existing `dev` or `build` commands.
 
+## PostCSS Plugin (Next.js and others)
+
+Use the PostCSS plugin when your framework runs PostCSS (Next.js, many Tailwind pipelines).
+
+`postcss.config.mjs`:
+
+```js
+import tailwind from "@tailwindcss/postcss";
+import { oklchToHexPostcssPlugin } from "oklchtohex/postcss";
+
+export default {
+  plugins: [
+    tailwind(),
+    oklchToHexPostcssPlugin({ gamut: "clip" })
+  ]
+};
+```
+
+If your config uses object-style plugins (common in some templates), use:
+
+```js
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    "oklchtohex/postcss": { gamut: "clip" }
+  }
+};
+
+export default config;
+```
+
+For Next.js, keep your standard commands:
+
+```json
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+```
+
 ## Vite Plugin Options
 
 ```js

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "oklchtohex",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Convert OKLCH colors to HEX as a JavaScript package.",
   "type": "module",
   "main": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
     "./vite": "./src/vite-plugin.js",
+    "./postcss": "./src/postcss-plugin.js",
     "./converter": "./src/converter.js"
   },
   "files": [
@@ -20,6 +21,8 @@
     "tailwindcss",
     "vite",
     "vite-plugin",
+    "postcss",
+    "postcss-plugin",
     "color",
     "converter"
   ],

package/src/index.js

@@ -1,3 +1,3 @@
 export * from "./converter.js";
 export { oklchToHexVitePlugin } from "./vite-plugin.js";
-
+export { oklchToHexPostcssPlugin } from "./postcss-plugin.js";

package/src/postcss-plugin.js

@@ -0,0 +1,22 @@
+import { replaceOklchInText } from "./converter.js";
+
+export function oklchToHexPostcssPlugin(options = {}) {
+  return {
+    postcssPlugin: "oklchtohex-postcss-plugin",
+    Once(root) {
+      const originalCss = root.toString();
+      if (!originalCss.toLowerCase().includes("oklch(")) {
+        return;
+      }
+
+      const convertedCss = replaceOklchInText(originalCss, options);
+      if (convertedCss !== originalCss) {
+        root.removeAll();
+        root.append(convertedCss);
+      }
+    }
+  };
+}
+
+oklchToHexPostcssPlugin.postcss = true;
+export default oklchToHexPostcssPlugin;