ignore-colors-that-contain-custom-properties

Converter should not try to convert colors with custom properties as it converts custom properties.

src/index.js

@@ -7,36 +7,34 @@ const pc = require("picocolors");
 const plugin = require("./plugin");
 
 program
-  .name("convert-to-oklch")
-  .description(
-    "CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.",
-  )
-  .version(packageVersion);
+	.name("convert-to-oklch")
+	.description(
+		"CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.",
+	)
+	.version(packageVersion);
 
 program.argument("<path>", "path to css files");
 program.parse();
 
-const { args } = program;
+const { args: cssFilePaths } = program;
 
 const convertColors = async (path) => {
-  if (!fs.existsSync(path)) {
-    console.error(pc.bgRed(pc.black("File doesn't exist: " + path)));
-    process.exit(1);
-  }
+	if (!fs.existsSync(path)) {
+		console.error(pc.bgRed(pc.black("File doesn't exist: " + path)));
+		process.exit(1);
+	}
 
-  const css = fs.readFileSync(path, "utf-8");
+	const css = fs.readFileSync(path, "utf-8");
 
-  const result = await postcss([plugin])
-    .process(css, { from: path })
-    .toString();
+	const result = await postcss([plugin])
+		.process(css, { from: path })
+		.toString();
 
-  await fs.writeFile(path, result, (err) => {
-    if (err) console.error(pc.bgRed(err));
-
-    console.log(pc.bgGreen(pc.black("Done! " + path)));
-  });
+	await fs.writeFile(path, result, (err) => {
+		if (err) console.error(pc.bgRed(err));
+	});
 };
 
-for (const path of args) {
-  convertColors(path);
-}
+cssFilePaths.forEach(convertColors);
+
+console.log(pc.bgGreen(pc.black("Done!")));

src/plugin.js

@@ -1,17 +1,48 @@
 const Color = require("colorjs.io").default;
 const colorsRegex = new RegExp(/(^#[0-9a-f]{3,8}$|(hsla?|rgba?)\([^)]+\))/gi);
+const pc = require("picocolors");
 
 module.exports = () => ({
-  postcssPlugin: "postcss-convert-to-oklch",
-  Declaration(decl) {
-    const colors = decl.value.match(colorsRegex);
-    if (colors) {
-      for (const color of colors) {
-        const oklch = new Color(color).to("oklch").toString();
-        decl.value = decl.value.replace(color, oklch);
-      }
-    }
-  },
+	postcssPlugin: "postcss-convert-to-oklch",
+	Declaration(decl) {
+		const originalColors = decl.value.match(colorsRegex);
+		if (!originalColors) return;
+
+		const colorsToConvert = originalColors.filter(
+			(originalColor) => !originalColor.includes("var(--"),
+		);
+
+		const convertedAndOriginalColors = colorsToConvert.map(
+			(originalColor) => {
+				try {
+					const converted = getConvertedColor(originalColor);
+					return { converted, original: originalColor };
+				} catch (e) {
+					console.error(
+						pc.bgRed(
+							`Error during color ${originalColor} conversion: ${e}. It will not be converted.`,
+						),
+					);
+				}
+			},
+		);
+
+		convertedAndOriginalColors.forEach(({ converted, original }) => {
+			try {
+				decl.value = decl.value.replace(original, converted);
+			} catch (e) {
+				console.error(
+					pc.bgRed(
+						`Error during replacing ${original} with ${converted}: ${e}`,
+					),
+				);
+			}
+		});
+	},
 });
 
+function getConvertedColor(color) {
+	return new Color(color).to("oklch").toString();
+}
+
 module.exports.postcss = true;