Avaray / vite-oklch-to-rgb

Vite Plugin for OKLCH to RGB Conversion

🤹 Vite Plugin for OKLCH to RGB Conversion

This Vite plugin converts oklch() color notation to RGB values during the build process. It is designed for projects that need to support users on older web browsers that do not yet support OKLCH. You can check the current browser compatibility for OKLCH here.

The plugin is compatible with frameworks such as Astro or Svelte.
It is helpful for projects using frameworks like TailwindCSS or libraries like daisyUI.

Plugin status: Work In Progess

• Fix oklchRegex and test it. Regex should be like /oklch\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g
• Replace color-mix from oklch/oklab to srgb or hsl

Usage in Vite

import { defineConfig } from "vite";
import oklchToRgb from "vite-oklch-to-rgb";

export default defineConfig({
  plugins: [oklchToRgb],
});

Usage in Astro

import { defineConfig } from "astro/config";
import oklchToRgb from "vite-oklch-to-rgb";

export default defineConfig({
  vite: {
    plugins: [oklchToRgb],
  },
});