postcss-value-parser

plugins/postcss-color-functional-notation/.tape.js

@@ -1,11 +1,18 @@
 module.exports = {
 	'basic': {
 		message: 'supports basic usage',
-		warnings: 1,
 	},
 	'basic:preserve-true': {
 		message: 'supports { preserve: true } usage',
-		warnings: 1,
+		options: {
+			preserve: true
+		}
+	},
+	'variables': {
+		message: 'supports variables',
+	},
+	'variables:preserve-true': {
+		message: 'supports variables with { preserve: true } usage',
 		options: {
 			preserve: true
 		}

plugins/postcss-color-functional-notation/package.json

@@ -8,6 +8,7 @@
   "bugs": "https://github.com/csstools/postcss-plugins/issues",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "CHANGELOG.md",
     "INSTALL.md",
@@ -20,16 +21,16 @@
   },
   "scripts": {
     "prepublishOnly": "npm run build && npm run test",
-    "lint": "eslint src/**/*.js",
+    "lint": "eslint src/**/*.ts",
     "test": "postcss-tape --ci",
-    "build": "rollup -c ../../rollup/default.js",
+    "build": "rollup -c ../../rollup/default.ts.js",
     "stryker": "stryker run --logLevel error"
   },
   "engines": {
     "node": "^12 || ^14 || >=16"
   },
   "dependencies": {
-    "postcss-values-parser": "^6.0.1"
+    "postcss-value-parser": "^4.2.0"
   },
   "devDependencies": {
     "postcss": "^8.3.6",

plugins/postcss-color-functional-notation/src/has-supports-at-rule-ancestor.ts

@@ -0,0 +1,19 @@
+import type { Node, AtRule } from 'postcss';
+
+export function hasSupportsAtRuleAncestor(node: Node): boolean {
+	let parent = node.parent;
+	while (parent) {
+		if (parent.type !== 'atrule') {
+			parent = parent.parent;
+			continue;
+		}
+
+		if ((parent as AtRule).name === 'supports' && (parent as AtRule).params.indexOf('(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))') !== -1) {
+			return true;
+		}
+
+		parent = parent.parent;
+	}
+
+	return false;
+}

plugins/postcss-color-functional-notation/src/index.ts

@@ -0,0 +1,102 @@
+import valueParser from 'postcss-value-parser';
+import type { ParsedValue, FunctionNode } from 'postcss-value-parser';
+import type { Declaration, Postcss, Result } from 'postcss';
+import onCSSFunction from './on-css-function';
+
+import type { PluginCreator } from 'postcss';
+import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor';
+
+/** Transform lab() and lch() functions in CSS. */
+const postcssPlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => {
+	const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
+
+	return {
+		postcssPlugin: 'postcss-color-functional-notation',
+		Declaration: (decl: Declaration, { result, postcss }: { result: Result, postcss: Postcss }) => {
+			if (preserve && hasSupportsAtRuleAncestor(decl)) {
+				return;
+			}
+
+			const originalValue = decl.value;
+			if (!(/(^|[^\w-])(hsla?|rgba?)\(/i.test(originalValue))) {
+				return;
+			}
+
+			let valueAST: ParsedValue|undefined;
+
+			try {
+				valueAST = valueParser(originalValue);
+			} catch (error) {
+				decl.warn(
+					result,
+					`Failed to parse value '${originalValue}' as a hsl or rgb function. Leaving the original value intact.`,
+				);
+			}
+
+			if (typeof valueAST === 'undefined') {
+				return;
+			}
+
+			valueAST.walk((node) => {
+				if (!node.type || node.type !== 'function') {
+					return;
+				}
+
+				if (
+					node.value !== 'hsl' &&
+					node.value !== 'hsla' &&
+					node.value !== 'rgb' &&
+					node.value !== 'rgba'
+				) {
+					return;
+				}
+
+				onCSSFunction(node as FunctionNode);
+			});
+			const modifiedValue = String(valueAST);
+
+			if (modifiedValue === originalValue) {
+				return;
+			}
+
+			if (preserve && decl.variable) {
+				const parent = decl.parent;
+				const atSupportsParams = '(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))';
+				const atSupports = postcss.atRule({ name: 'supports', params: atSupportsParams, source: decl.source });
+
+				const parentClone = parent.clone();
+				parentClone.removeAll();
+
+				parentClone.append(decl.clone());
+				atSupports.append(parentClone);
+
+				// Ensure correct order of @supports rules
+				// Find the last one created by us or the current parent and insert after.
+				let insertAfter = parent;
+				let nextInsertAfter = parent.next();
+				while (
+					insertAfter &&
+					nextInsertAfter &&
+					nextInsertAfter.type === 'atrule' &&
+					nextInsertAfter.name === 'supports' &&
+					nextInsertAfter.params === atSupportsParams
+				) {
+					insertAfter = nextInsertAfter;
+					nextInsertAfter = nextInsertAfter.next();
+				}
+
+				insertAfter.after(atSupports);
+
+				decl.value = modifiedValue;
+			} else if (preserve) {
+				decl.cloneBefore({ value: modifiedValue });
+			} else {
+				decl.value = modifiedValue;
+			}
+		},
+	};
+};
+
+postcssPlugin.postcss = true;
+
+export default postcssPlugin;