3.0.2

Author: jonathantneal

.tape.js

@@ -46,7 +46,7 @@ module.exports = {
 		'import:array-array': {
 			message: 'supports { importFrom: [["css", "test/import-root.css" ]] } usage',
 			options: {
-				importFrom: [['css', 'test/import-root.css' ]]
+				importFrom: { from: 'test/import-root.css', type: 'css' }
 			},
 			expect: 'import.expect.css',
 			result: 'import.result.css'
@@ -70,13 +70,19 @@ module.exports = {
 		'import:object': {
 			message: 'supports { importFrom: { customProperties: {} } } usage',
 			options: {
-				importFrom: {
-					customProperties: {
-						'--color-blue': 'blue',
-						'--color-red': 'red',
-						'--color': 'var(--color-blue)'
+				importFrom: [
+					{
+						customProperties: {
+							'--color': 'var(--color-blue)'
+						}
+					},
+					{
+						customProperties: {
+							'--color-blue': 'blue',
+							'--color-red': 'red'
+						}
 					}
-				}
+				]
 			},
 			expect: 'import.expect.css',
 			result: 'import.result.css'

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS color-mod() Function
 
+### 3.0.2 (September 23, 2018)
+
+- Fixed an incompatibility with other `importFrom` plugins
+
 ### 3.0.1 (September 18, 2018)
 
 - Fixed an issue with using the `transparent` color keyword

index.js

@@ -1,18 +1,30 @@
-import { importCustomPropertiesFromSources, importCustomPropertiesFromCSSAST } from './lib/import';
+import getCustomProperties from './lib/get-custom-properties';
+import importCustomPropertiesFromSources from './lib/import-from';
 import parser from 'postcss-values-parser';
 import postcss from 'postcss';
 import transformAST from './lib/transform';
 
 export default postcss.plugin('postcss-color-mod-function', opts => {
+	// how unresolved functions and arguments should be handled (default: "throw")
 	const unresolvedOpt = String(Object(opts).unresolved || 'throw').toLowerCase();
+
+	// how transformed colors will be produced in CSS
 	const stringifierOpt = Object(opts).stringifier || (color => color.toLegacy());
+
+	// sources to import custom selectors from
 	const importFrom = [].concat(Object(opts).importFrom || []);
+
+	//  whether var() within color-mod() should use Custom Properties or var() fallback
 	const transformVarsOpt = 'transformVars' in Object(opts) ? opts.transformVars : true;
 
+	// promise any custom selectors are imported
 	const customPropertiesPromise = importCustomPropertiesFromSources(importFrom);
 
 	return async (root, result) => {
-		const customProperties = Object.assign(await customPropertiesPromise, await importCustomPropertiesFromCSSAST(root));
+		const customProperties = Object.assign(
+			await customPropertiesPromise,
+			getCustomProperties(root, { preserve: true })
+		);
 
 		root.walkDecls(decl => {
 			const originalValue = decl.value;

lib/get-custom-properties.js

@@ -0,0 +1,57 @@
+import valueParser from 'postcss-values-parser';
+
+// return custom selectors from the css root, conditionally removing them
+export default function getCustomProperties(root, opts) {
+	// initialize custom selectors
+	const customPropertiesFromHtmlElement = {};
+	const customPropertiesFromRootPsuedo = {};
+
+	// for each html or :root rule
+	root.nodes.slice().forEach(rule => {
+		const customPropertiesObject = isHtmlRule(rule)
+			? customPropertiesFromHtmlElement
+		: isRootRule(rule)
+			? customPropertiesFromRootPsuedo
+		: null;
+
+		// for each custom property
+		if (customPropertiesObject) {
+			rule.nodes.slice().forEach(decl => {
+				if (isCustomDecl(decl)) {
+					const { prop } = decl;
+
+					// write the parsed value to the custom property
+					customPropertiesObject[prop] = valueParser(decl.value).parse();
+
+					// conditionally remove the custom property declaration
+					if (!opts.preserve) {
+						decl.remove();
+					}
+				}
+			});
+
+			// conditionally remove the empty html or :root rule
+			if (!opts.preserve && isEmptyParent(rule)) {
+				rule.remove();
+			}
+		}
+	});
+
+	// return all custom properties, preferring :root properties over html properties
+	return { ...customPropertiesFromHtmlElement, ...customPropertiesFromRootPsuedo };
+}
+
+// match html and :root rules
+const htmlSelectorRegExp = /^html$/i;
+const rootSelectorRegExp = /^:root$/i;
+const customPropertyRegExp = /^--[A-z][\w-]*$/;
+
+// whether the node is an html or :root rule
+const isHtmlRule = node => node.type === 'rule' && htmlSelectorRegExp.test(node.selector) && Object(node.nodes).length;
+const isRootRule = node => node.type === 'rule' && rootSelectorRegExp.test(node.selector) && Object(node.nodes).length;
+
+// whether the node is an custom property
+const isCustomDecl = node => node.type === 'decl' && customPropertyRegExp.test(node.prop);
+
+// whether the node is a parent without children
+const isEmptyParent = node => Object(node.nodes).length === 0;

lib/import-from.js

@@ -0,0 +1,115 @@
+import fs from 'fs';
+import path from 'path';
+import postcss from 'postcss';
+import getCustomProperties from './get-custom-properties';
+
+/* Import Custom Properties from CSS AST
+/* ========================================================================== */
+
+function importCustomPropertiesFromCSSAST(root) {
+	return getCustomProperties(root, { preserve: true });
+}
+
+/* Import Custom Properties from CSS File
+/* ========================================================================== */
+
+async function importCustomPropertiesFromCSSFile(from) {
+	const css = await readFile(path.resolve(from));
+	const root = postcss.parse(css, { from: path.resolve(from) });
+
+	return importCustomPropertiesFromCSSAST(root);
+}
+
+/* Import Custom Properties from Object
+/* ========================================================================== */
+
+function importCustomPropertiesFromObject(object) {
+	const customProperties = Object.assign(
+		{},
+		Object(object).customProperties || Object(object)['custom-properties']
+	);
+
+	return customProperties;
+}
+
+/* Import Custom Properties from JSON file
+/* ========================================================================== */
+
+async function importCustomPropertiesFromJSONFile(from) {
+	const object = await readJSON(path.resolve(from));
+
+	return importCustomPropertiesFromObject(object);
+}
+
+/* Import Custom Properties from JS file
+/* ========================================================================== */
+
+async function importCustomPropertiesFromJSFile(from) {
+	const object = await import(path.resolve(from));
+
+	return importCustomPropertiesFromObject(object);
+}
+
+/* Import Custom Properties from Sources
+/* ========================================================================== */
+
+export default function importCustomPropertiesFromSources(sources) {
+	return sources.map(source => {
+		if (source instanceof Promise) {
+			return source;
+		} else if (source instanceof Function) {
+			return source();
+		}
+
+		// read the source as an object
+		const opts = source === Object(source) ? source : { from: String(source) };
+
+		// skip objects with Custom Properties
+		if (opts.customProperties || opts['custom-properties']) {
+			return opts
+		}
+
+		// source pathname
+		const from = String(opts.from || '');
+
+		// type of file being read from
+		const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
+
+		return { type, from };
+	}).reduce(async (customProperties, source) => {
+		const { type, from } = await source;
+
+		if (type === 'ast') {
+			return Object.assign(await customProperties, importCustomPropertiesFromCSSAST(from));
+		}
+
+		if (type === 'css') {
+			return Object.assign(await customProperties, await importCustomPropertiesFromCSSFile(from));
+		}
+
+		if (type === 'js') {
+			return Object.assign(await customProperties, await importCustomPropertiesFromJSFile(from));
+		}
+
+		if (type === 'json') {
+			return Object.assign(await customProperties, await importCustomPropertiesFromJSONFile(from));
+		}
+
+		return Object.assign(await customProperties, await importCustomPropertiesFromObject(await source));
+	}, {});
+}
+
+/* Helper utilities
+/* ========================================================================== */
+
+const readFile = from => new Promise((resolve, reject) => {
+	fs.readFile(from, 'utf8', (error, result) => {
+		if (error) {
+			reject(error);
+		} else {
+			resolve(result);
+		}
+	});
+});
+
+const readJSON = async from => JSON.parse(await readFile(from));