oklchtohex 0.1.0 → 0.2.0

package/README.md

@@ -20,60 +20,48 @@ A build-time package is the most practical fix:
 npm i -D oklchtohex
 ```
 
-## CLI usage
+## JS API
 
-Convert one value:
+```js
+import { oklchToHex, replaceOklchInText, convertTailwindCssToHex } from "oklchtohex";
 
-```bash
-npx oklchtohex --value "oklch(70.4% 0.191 22.216)"
+const hex = oklchToHex("oklch(70.4% 0.191 22.216)");
+const css = replaceOklchInText("color: oklch(70.4% 0.191 22.216);");
+const convertedTailwindCss = convertTailwindCssToHex(css);
 ```
 
-Convert a CSS file and write to a new file:
+### Conversion behavior
 
-```bash
-npx oklchtohex ./dist/app.css -o ./dist/app.hex.css
-```
+- Known Tailwind default variables like `--color-red-500` are replaced with exact Tailwind HEX palette values.
+- Unknown variables and raw `oklch(...)` values use functional conversion.
+- `gamut` option supports `clip` (default) and `fit`.
 
-Print transformed CSS to stdout:
+## Tailwind v4 build integration (package-only)
 
-```bash
-npx oklchtohex ./dist/app.css --stdout
-```
+Create a small Node script in your app, for example `scripts/convert-tailwind-to-hex.mjs`:
 
-### Options
+```js
+import fs from "node:fs/promises";
+import { convertTailwindCssToHex } from "oklchtohex";
 
-- `--gamut fit|clip`  
-  `clip` (default) hard-clamps channels; `fit` reduces chroma to stay in sRGB.
-- `--alpha auto|always|never`  
-  defaults to `auto`.
-- `--upper`  
-  outputs uppercase HEX.
+const inputPath = "./dist/tailwind.css";
+const outputPath = "./dist/tailwind.css"; // in-place rewrite
 
-When converting Tailwind CSS, known default variables like `--color-red-500` are replaced with the exact Tailwind HEX palette value first. Unknown variables and raw `oklch(...)` values use functional conversion.
+const css = await fs.readFile(inputPath, "utf8");
+const converted = convertTailwindCssToHex(css, { gamut: "clip" });
+await fs.writeFile(outputPath, converted, "utf8");
+```
 
-## Tailwind v4 integration (Inspect Element workflow)
+Then call it in your app `package.json`:
 
 ```json
 {
   "scripts": {
     "build:css": "tailwindcss -i ./src/input.css -o ./dist/tailwind.css",
-    "build:css:hex": "oklchtohex ./dist/tailwind.css -o ./dist/tailwind.css",
+    "build:css:hex": "node ./scripts/convert-tailwind-to-hex.mjs",
     "build": "npm run build:css && npm run build:css:hex"
   }
 }
 ```
 
-This rewrites Tailwind output in-place, so your existing HTML `<link>` remains unchanged and DevTools "Styles" pane shows HEX declarations.
-
-If you want two files instead, output to `./dist/tailwind.hex.css` and link that file.
-
-Note: some browsers still show `rgb(...)` in the "Computed" pane. The "Styles" pane reflects your source declaration format.
-
-## JS API
-
-```js
-import { oklchToHex, replaceOklchInText } from "oklchtohex";
-
-const hex = oklchToHex("oklch(70.4% 0.191 22.216)");
-const css = replaceOklchInText("color: oklch(70.4% 0.191 22.216);");
-```
+This keeps the package library-only while still giving build-time conversion.

package/package.json

@@ -1,22 +1,16 @@
 {
   "name": "oklchtohex",
-  "version": "0.1.0",
-  "description": "Convert OKLCH colors to HEX and rewrite CSS at build time.",
+  "version": "0.2.0",
+  "description": "Convert OKLCH colors to HEX as a JavaScript package.",
   "type": "module",
   "main": "./src/converter.js",
   "exports": {
     ".": "./src/converter.js"
   },
-  "bin": {
-    "oklchtohex": "./src/cli.js"
-  },
   "files": [
     "src",
     "README.md"
   ],
-  "scripts": {
-    "check": "node ./src/cli.js --help"
-  },
   "keywords": [
     "oklch",
     "hex",

package/src/cli.js

@@ -1,152 +0,0 @@
-#!/usr/bin/env node
-
-import fs from "node:fs/promises";
-import path from "node:path";
-import process from "node:process";
-import { oklchToHex, replaceOklchInText } from "./converter.js";
-
-function printHelp() {
-  const help = `
-oklchtohex
-
-Convert OKLCH values to HEX, or rewrite an entire CSS file.
-
-Usage:
-  oklchtohex --value "oklch(70.4% 0.191 22.216)"
-  oklchtohex ./dist/app.css -o ./dist/app.hex.css
-  oklchtohex ./dist/app.css --stdout
-
-Options:
-  --value <oklch>        Convert a single OKLCH value to HEX
-  -o, --output <file>    Output file path for transformed CSS
-  --stdout               Print transformed CSS to stdout
-  --gamut <fit|clip>     Gamut strategy (default: clip)
-  --alpha <auto|always|never>
-                         Include alpha in HEX (default: auto)
-  --upper                Uppercase HEX output
-  -h, --help             Show this help text
-`;
-  process.stdout.write(help);
-}
-
-function parseArgs(argv) {
-  const parsed = {
-    input: undefined,
-    output: undefined,
-    value: undefined,
-    stdout: false,
-    gamut: "clip",
-    includeAlpha: "auto",
-    uppercase: false,
-    help: false
-  };
-
-  for (let i = 0; i < argv.length; i += 1) {
-    const arg = argv[i];
-
-    if (arg === "-h" || arg === "--help") {
-      parsed.help = true;
-      continue;
-    }
-    if (arg === "--value") {
-      parsed.value = argv[i + 1];
-      i += 1;
-      continue;
-    }
-    if (arg === "-o" || arg === "--output") {
-      parsed.output = argv[i + 1];
-      i += 1;
-      continue;
-    }
-    if (arg === "--stdout") {
-      parsed.stdout = true;
-      continue;
-    }
-    if (arg === "--gamut") {
-      parsed.gamut = argv[i + 1];
-      i += 1;
-      continue;
-    }
-    if (arg === "--alpha") {
-      parsed.includeAlpha = argv[i + 1];
-      i += 1;
-      continue;
-    }
-    if (arg === "--upper") {
-      parsed.uppercase = true;
-      continue;
-    }
-    if (!arg.startsWith("-") && !parsed.input) {
-      parsed.input = arg;
-      continue;
-    }
-
-    throw new Error(`Unknown argument: ${arg}`);
-  }
-
-  return parsed;
-}
-
-function normalizeIncludeAlpha(value) {
-  if (!value || value === "auto") {
-    return "auto";
-  }
-  if (value === "always") {
-    return true;
-  }
-  if (value === "never") {
-    return false;
-  }
-  throw new Error(`Invalid --alpha value: ${value}`);
-}
-
-function normalizeGamut(value) {
-  if (value === "fit" || value === "clip") {
-    return value;
-  }
-  throw new Error(`Invalid --gamut value: ${value}`);
-}
-
-async function run() {
-  const args = parseArgs(process.argv.slice(2));
-  if (args.help) {
-    printHelp();
-    return;
-  }
-
-  const options = {
-    gamut: normalizeGamut(args.gamut),
-    includeAlpha: normalizeIncludeAlpha(args.includeAlpha),
-    uppercase: args.uppercase
-  };
-
-  if (args.value) {
-    const hex = oklchToHex(args.value, options);
-    process.stdout.write(`${hex}\n`);
-    return;
-  }
-
-  if (!args.input) {
-    throw new Error("Missing input. Provide --value or a CSS file path.");
-  }
-
-  const inputPath = path.resolve(process.cwd(), args.input);
-  const css = await fs.readFile(inputPath, "utf8");
-  const transformed = replaceOklchInText(css, options);
-
-  if (args.stdout || !args.output) {
-    process.stdout.write(transformed);
-    if (!transformed.endsWith("\n")) {
-      process.stdout.write("\n");
-    }
-    return;
-  }
-
-  const outputPath = path.resolve(process.cwd(), args.output);
-  await fs.writeFile(outputPath, transformed, "utf8");
-}
-
-run().catch((error) => {
-  process.stderr.write(`${error.message}\n`);
-  process.exit(1);
-});