2.3.0

Author: jonathantneal

.tape.js

@@ -9,6 +9,15 @@ module.exports = {
 				stringifier: color => color.toString()
 			}
 		},
+		'basic:transformvars': {
+			message: 'supports { transformVars: false } usage',
+			options: {
+				transformVars: false
+			},
+			error: {
+				reason: 'Expected a color'
+			}
+		},
 		'warn': {
 			message: 'supports { unresolved } usage',
 			options: {

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes to PostCSS color-mod() Function
 
+### 2.3.0 (February 16, 2018)
+
+- Added build-time support for Custom Properties and Variables
+- Updated `@csstools/convert-colors` to 1.4 (minor update)
+- Updated tests to reflect variable support
+
 ### 2.3.0 (January 25, 2018)
 
 - Updated `@csstools/convert-colors` to 1.3 (minor update)

README.md

@@ -37,17 +37,14 @@ function in CSS, following the [CSS Color Module Level 4] specification.
 
 ## Supported Colors
 
-The `color-mod()` function accepts `rgb()`, legacy `rgb()`, `rgba()`, `hsl()`,
-legacy `hsl()`, `hsla()`, `hwb()`, and `color-mod()` colors, as well as 3, 4,
-6, and 8 digit hex colors, and named colors without the need for additional
-plugins.
+The `color-mod()` function accepts `rgb()`, legacy comma-separated `rgb()`,
+`rgba()`, `hsl()`, legacy comma-separated `hsl()`, `hsla()`, `hwb()`, and
+`color-mod()` colors, as well as 3, 4, 6, and 8 digit hex colors, and named
+colors without the need for additional plugins.
 
 Implemention details are available in
 [the specification](https://drafts.csswg.org/css-color/#funcdef-color-mod).
 
-*Because CSS variables (`var()`) cannot not be inferred at compilation, they
-will need to be compiled beforehand.*
-
 ## Supported Color Adjusters
 
 The `color-mod()` function accepts `red()`, `green()`, `blue()`, `a()` /
@@ -58,6 +55,11 @@ The `color-mod()` function accepts `red()`, `green()`, `blue()`, `a()` /
 Implemention details are available in
 [the specification](https://drafts.csswg.org/css-color/#typedef-color-adjuster).
 
+## Supported Variables
+
+By default, `var()` variables will be used if their corresponding Custom
+Properties are found in a `:root` rule, or if a fallback value is specified.
+
 ---
 
 ## Usage
@@ -183,6 +185,17 @@ postcssColorMod({
 });
 ```
 
+### transformVars
+
+The `transformVars` option defines whether `var()` variables used within
+`color-mod()` should be transformed into their corresponding Custom Properties
+available in `:root`, or their fallback value if it is specified. By default,
+`var()` variables will be transformed.
+
+However, because these transformations occur at build time, they cannot be
+considered accurate. Accurately resolving cascading variables relies on
+knowledge of the living DOM tree.
+
 [npm-url]: https://www.npmjs.com/package/postcss-color-mod-function
 [npm-img]: https://img.shields.io/npm/v/postcss-color-mod-function.svg
 [cli-url]: https://travis-ci.org/jonathantneal/postcss-color-mod-function

index.js

@@ -7,6 +7,7 @@ import transformAST from './lib/transform';
 export default postcss.plugin('postcss-color-mod-function', opts => {
 	const unresolvedOpt = String(Object(opts).unresolved || 'throw').toLowerCase();
 	const stringifierOpt = Object(opts).stringifier || (color => color.toLegacy());
+	const transformVarsOpt = 'transformVars' in Object(opts) ? opts.transformVars : true;
 
 	return (root, result) => {
 		root.walkDecls(decl => {
@@ -15,7 +16,13 @@ export default postcss.plugin('postcss-color-mod-function', opts => {
 			if (colorModFunctionMatch.test(originalValue)) {
 				const ast = parser(originalValue, { loose: true }).parse();
 
-				transformAST(ast, { unresolved: unresolvedOpt, stringifier: stringifierOpt, decl, result });
+				transformAST(ast, {
+					unresolved: unresolvedOpt,
+					stringifier: stringifierOpt,
+					transformVars: transformVarsOpt,
+					decl,
+					result
+				});
 
 				const modifiedValue = ast.toString();
 

lib/transform.js

@@ -10,6 +10,11 @@ import parser from 'postcss-values-parser';
 export default function transformAST(node, opts) {
 	node.nodes.slice(0).forEach(child => {
 		if (isColorModFunction(child)) {
+			// transform any variables within the color-mod() function
+			if (opts.transformVars) {
+				transformVariables(child, opts);
+			}
+
 			// transform any color-mod() functions
 			const color = transformColorModFunction(child, opts);
 
@@ -27,6 +32,50 @@ export default function transformAST(node, opts) {
 	});
 }
 
+/* Transform <var> functions
+/* ========================================================================== */
+
+function transformVariables(node, opts) {
+	node.walk(
+		child => {
+			if (isVariable(child)) {
+				const [variableName, fallbackNode] = transformArgsByParams(child, [
+					// <value> , [ <fallback> ]?
+					[transformWord, isComma, transformNode]
+				]);
+
+				if (variableName) {
+					let variableNode;
+
+					opts.result.root.walkRules(':root', rule => {
+						rule.nodes.filter(
+							rootChild => rootChild.prop === variableName
+						).slice(-1).forEach(
+							rootChild => {
+								const rootChildValue = rootChild.value;
+
+								const rootChildAST = parser(rootChildValue, { loose: true }).parse();
+
+								transformVariables(rootChildAST, opts);
+
+								variableNode = rootChildAST.nodes[0];
+							}
+						);
+					});
+
+					if (variableNode) {
+						child.replaceWith(...variableNode.nodes);
+					}
+				} else if (fallbackNode) {
+					transformVariables(fallbackNode, opts);
+
+					child.replaceWith(...fallbackNode.nodes[0].nodes);
+				}
+			}
+		}
+	);
+}
+
 /* Transform <color> functions
 /* ========================================================================== */
 
@@ -501,6 +550,21 @@ function transformMinusPlusTimesOperator(node, opts) {
 	}
 }
 
+/* Additional transforms
+/* ========================================================================== */
+
+function transformWord(node, opts) {
+	if (isWord(node)) {
+		return node.value;
+	} else {
+		return manageUnresolved(node, opts, node.value, `Expected a valid word`);
+	}
+}
+
+function transformNode(node) {
+	return Object(node);
+}
+
 /* Transform helper
 /* ========================================================================== */
 
@@ -516,6 +580,15 @@ function transformArgsByParams(node, params) {
 	))[0] || [];
 }
 
+/* Variable validators
+/* ========================================================================== */
+
+// return whether the node is a var function
+function isVariable(node) {
+	// var()
+	return Object(node).type === 'func' && varMatch.test(node.value);
+}
+
 /* Adjustment validators
 /* ========================================================================== */
 
@@ -647,6 +720,12 @@ function isPercentage(node) {
 	return Object(node).type === 'number' && (node.unit === '%' || node.value === '0');
 }
 
+// return whether the node is a word
+function isWord(node) {
+	// <word>
+	return Object(node).type === 'word';
+}
+
 /* Matchers
 /* ========================================================================== */
 
@@ -667,4 +746,5 @@ const minusPlusTimesMatch = /^[*+-]$/;
 const rgbMatch = /^rgb$/i;
 const rgbaMatch = /^rgba?$/i;
 const shadeTintMatch = /^(shade|tint)$/i;
+const varMatch = /^var$/i;
 const timesMatch = /^[*]$/;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-color-mod-function",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Modify colors using the color-mod() function in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
@@ -26,7 +26,7 @@
     "node": ">=4.0.0"
   },
   "dependencies": {
-    "@csstools/convert-colors": "^1.3",
+    "@csstools/convert-colors": "^1.4",
     "postcss": "^6.0",
     "postcss-values-parser": "^1.3"
   },
@@ -35,11 +35,11 @@
     "babel-eslint": "^8.2",
     "babel-preset-env": "^1.6",
     "echint": "^4.0",
-    "eslint": "^4.16",
+    "eslint": "^4.17",
     "eslint-config-dev": "2.0",
     "postcss-tape": "2.2",
     "pre-commit": "^1.2",
-    "rollup": "^0.55",
+    "rollup": "^0.56",
     "rollup-plugin-babel": "^3.0"
   },
   "eslintConfig": {

test/basic.colors.expect.css

@@ -119,3 +119,11 @@ test-sameness {
 	color: rgb(96.0784313725% 96.0784313725% 86.2745098039%);
 	color: hsl(60 55.5555555556% 91.1764705882%);
 }
+
+:root {
+	--color: blue;
+}
+
+test-var {
+	color: rgb(0% 0% 100%);
+}

test/basic.css

@@ -119,3 +119,11 @@ test-sameness {
 	color: color-mod(beige alpha(+ 0%));
 	color: color-mod(beige blend(beige 0% hsl));
 }
+
+:root {
+	--color: blue;
+}
+
+test-var {
+	color: color-mod(var(--color));
+}

test/basic.expect.css

@@ -119,3 +119,11 @@ test-sameness {
 	color: rgb(245, 245, 220);
 	color: hsl(60, 55.5555555556%, 91.1764705882%);
 }
+
+:root {
+	--color: blue;
+}
+
+test-var {
+	color: rgb(0, 0, 255);
+}