postcss-migrate-colors-to-vars

Will:

• find all colors inside of a css file
• compare them to a Object of css vars, and their values
• replace the color with the css-var of your choosing based on the nearest delta
  • based on Delta E2000

Usage

1import postcss from "postcss";
2import migrateColorsPlugin from "@wesgro/postcss-migrate-colors-to-vars";
3import fs from "node:fs";
4
5const COLORS = {
6    "--color__selection__base": "#1a1918",
7    "--color__selection__base--state-1": "#393633",
8    "--color__selection__base--state-2": "#44403d",
9}
10const input = `
11h1{
12    color:#1a1914; 
13    background-color:#393633; 
14    outline: var(--not-me-bro__other__color, #44403d);
15}`;
16
17const output = postcss(
18  migrateColorsPlugin({
19    ignoreRule: (node) => {
20      return (
21        node.type === "function" &&
22        node.nodes.some((node) => node.value.startsWith("--not-me-bro"))
23      );
24    },
25
26    replacementColors: COLORS,
27  })
28).process(input).css;
29console.log(output)
30//