oklchtohex 0.3.0 → 0.3.2

package/README.md

@@ -34,6 +34,7 @@ const convertedTailwindCss = convertTailwindCssToHex(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.
+- Tailwind opacity utilities like `border-red-500/30` and custom theme colors like `border-aurora/40` are handled when emitted as `color-mix(... var(--color-*) ..., transparent)` and converted to 8-digit HEX when the source variable is resolvable.
 - `gamut` option supports `clip` (default) and `fit`.
 
 ## Vite plugin (auto on dev + build)

package/package.json

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

package/src/converter.js

@@ -1,5 +1,7 @@
 import { getTailwindDefaultHexForVar } from "./tailwind-default-hex.js";
 const OKLCH_REGEX = /oklch\(([^)]*)\)/gi;
+const COLOR_MIX_WITH_TRANSPARENT_REGEX =
+  /color-mix\(\s*in\s+oklab\s*,\s*var\(\s*(--[\w-]+)\s*\)\s*([0-9.]+)%\s*,\s*transparent\s*\)/gi;
 
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
@@ -157,6 +159,45 @@ function channelToHex(channel) {
   return byte.toString(16).padStart(2, "0");
 }
 
+function normalizeHexColor(hex) {
+  const trimmed = hex.trim().toLowerCase();
+  if (!trimmed.startsWith("#")) {
+    return null;
+  }
+  const raw = trimmed.slice(1);
+  if (raw.length === 3) {
+    return `#${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`;
+  }
+  if (raw.length === 4) {
+    return `#${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}${raw[3]}${raw[3]}`;
+  }
+  if (raw.length === 6 || raw.length === 8) {
+    return `#${raw}`;
+  }
+  return null;
+}
+
+function splitHexChannels(hex) {
+  const normalized = normalizeHexColor(hex);
+  if (!normalized) {
+    return null;
+  }
+  const raw = normalized.slice(1);
+  const rgbHex = raw.slice(0, 6);
+  const alphaHex = raw.length === 8 ? raw.slice(6, 8) : "ff";
+  return { rgbHex, alphaHex };
+}
+
+function alphaToHex(alpha) {
+  return channelToHex(clamp(alpha, 0, 1));
+}
+
+function combineAlpha(existingAlphaHex, mixPercent) {
+  const baseAlpha = Number.parseInt(existingAlphaHex, 16) / 255;
+  const mixedAlpha = baseAlpha * clamp(mixPercent / 100, 0, 1);
+  return alphaToHex(mixedAlpha);
+}
+
 function normalizeInput(input) {
   if (typeof input === "string") {
     return parseOklch(input);
@@ -219,14 +260,57 @@ function replaceTailwindDefaultColorVariables(text) {
   );
 }
 
+function collectHexVariableDeclarations(text) {
+  const declarationRegex = /(--[\w-]+)\s*:\s*(#[0-9a-fA-F]{3,8})\s*;/g;
+  const map = new Map();
+  let match = declarationRegex.exec(text);
+  while (match) {
+    const variableName = match[1].toLowerCase();
+    const normalized = normalizeHexColor(match[2]);
+    if (normalized) {
+      map.set(variableName, normalized);
+    }
+    match = declarationRegex.exec(text);
+  }
+  return map;
+}
+
+function replaceTailwindColorMixWithHex(text, variableHexMap) {
+  return text.replace(
+    COLOR_MIX_WITH_TRANSPARENT_REGEX,
+    (fullMatch, variableNameRaw, percentRaw) => {
+      const variableName = String(variableNameRaw).toLowerCase();
+      const percent = Number.parseFloat(percentRaw);
+      if (Number.isNaN(percent)) {
+        return fullMatch;
+      }
+
+      const sourceHex =
+        variableHexMap.get(variableName) ??
+        getTailwindDefaultHexForVar(variableName);
+
+      if (!sourceHex) {
+        return fullMatch;
+      }
+
+      const channels = splitHexChannels(sourceHex);
+      if (!channels) {
+        return fullMatch;
+      }
+
+      const alphaHex = combineAlpha(channels.alphaHex, percent);
+      return `#${channels.rgbHex}${alphaHex}`;
+    }
+  );
+}
+
 export function replaceOklchInText(text, options = {}) {
   if (typeof text !== "string") {
     throw new Error("replaceOklchInText expects a string");
   }
   const { onError = "preserve", ...convertOptions } = options;
   const withMappedTailwindDefaults = replaceTailwindDefaultColorVariables(text);
-
-  return withMappedTailwindDefaults.replace(OKLCH_REGEX, (match) => {
+  const withConvertedOklch = withMappedTailwindDefaults.replace(OKLCH_REGEX, (match) => {
     try {
       return oklchToHex(match, convertOptions);
     } catch (error) {
@@ -236,6 +320,9 @@ export function replaceOklchInText(text, options = {}) {
       return match;
     }
   });
+
+  const variableHexMap = collectHexVariableDeclarations(withConvertedOklch);
+  return replaceTailwindColorMixWithHex(withConvertedOklch, variableHexMap);
 }
 
 export function convertTailwindCssToHex(css, options = {}) {