Update PostCSS (#38)

* migrate to postcss 8.0

* bump travis node version

Author: peilingjiang

.gitignore

@@ -3,6 +3,7 @@ index.*.*
 package-lock.json
 *.log*
 *.result.css
+test/postcss-color-mod-function.css
 .*
 !.appveyor.yml
 !.editorconfig

.tape.js

@@ -1,91 +1,89 @@
 module.exports = {
-	'postcss-color-mod-function': {
-		'basic': {
-			message: 'supports basic usage'
-		},
-		'basic:colors': {
-			message: 'supports { stringifier } usage',
-			options: {
-				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: {
-				unresolved: 'warn'
-			},
-			warning: 43,
-			expect: 'warn.css'
-		},
-		'hex': {
-			message: 'supports hex usage'
+	'basic': {
+		message: 'supports basic usage'
+	},
+	'basic:colors': {
+		message: 'supports { stringifier } usage',
+		options: {
+			stringifier: color => color.toString()
+		}
+	},
+	'basic:transformvars': {
+		message: 'supports { transformVars: false } usage',
+		options: {
+			transformVars: false
 		},
-		'import': {
-			message: 'supports { importFrom: "test/import-root.css" } usage',
-			options: {
-				importFrom: 'test/import-root.css'
-			}
+		error: {
+			reason: 'Expected a color'
+		}
+	},
+	'warn': {
+		message: 'supports { unresolved } usage',
+		options: {
+			unresolved: 'warn'
 		},
-		'import:array': {
-			message: 'supports { importFrom: ["test/import-root.css"] } usage',
-			options: {
-				importFrom: ['test/import-root.css']
-			},
-			expect: 'import.expect.css',
-			result: 'import.result.css'
+		warnings: 43,
+		expect: 'warn.css'
+	},
+	'hex': {
+		message: 'supports hex usage'
+	},
+	'import': {
+		message: 'supports { importFrom: "test/import-root.css" } usage',
+		options: {
+			importFrom: 'test/import-root.css'
+		}
+	},
+	'import:array': {
+		message: 'supports { importFrom: ["test/import-root.css"] } usage',
+		options: {
+			importFrom: ['test/import-root.css']
 		},
-		'import:array-array': {
-			message: 'supports { importFrom: [["css", "test/import-root.css" ]] } usage',
-			options: {
-				importFrom: { from: 'test/import-root.css', type: 'css' }
-			},
-			expect: 'import.expect.css',
-			result: 'import.result.css'
+		expect: 'import.expect.css',
+		result: 'import.result.css'
+	},
+	'import:array-array': {
+		message: 'supports { importFrom: [["css", "test/import-root.css" ]] } usage',
+		options: {
+			importFrom: { from: 'test/import-root.css', type: 'css' }
 		},
-		'import:js': {
-			message: 'supports { importFrom: "test/import-root.js" } usage',
-			options: {
-				importFrom: 'test/import-root.js'
-			},
-			expect: 'import.expect.css',
-			result: 'import.result.css'
+		expect: 'import.expect.css',
+		result: 'import.result.css'
+	},
+	'import:js': {
+		message: 'supports { importFrom: "test/import-root.js" } usage',
+		options: {
+			importFrom: 'test/import-root.js'
 		},
-		'import:json': {
-			message: 'supports { importFrom: "test/import-root.json" } usage',
-			options: {
-				importFrom: 'test/import-root.json'
-			},
-			expect: 'import.expect.css',
-			result: 'import.result.css'
+		expect: 'import.expect.css',
+		result: 'import.result.css'
+	},
+	'import:json': {
+		message: 'supports { importFrom: "test/import-root.json" } usage',
+		options: {
+			importFrom: 'test/import-root.json'
 		},
-		'import:object': {
-			message: 'supports { importFrom: { customProperties: {} } } usage',
-			options: {
-				importFrom: [
-					{
-						customProperties: {
-							'--color': 'var(--color-blue)'
-						}
-					},
-					{
-						customProperties: {
-							'--color-blue': 'blue',
-							'--color-red': 'red'
-						}
+		expect: 'import.expect.css',
+		result: 'import.result.css'
+	},
+	'import:object': {
+		message: 'supports { importFrom: { customProperties: {} } } usage',
+		options: {
+			importFrom: [
+				{
+					customProperties: {
+						'--color': 'var(--color-blue)'
 					}
-				]
-			},
-			expect: 'import.expect.css',
-			result: 'import.result.css'
-		}
+				},
+				{
+					customProperties: {
+						'--color-blue': 'blue',
+						'--color-red': 'red'
+					}
+				}
+			]
+		},
+		expect: 'import.expect.css',
+		result: 'import.result.css'
 	}
 };

.travis.yml

@@ -3,7 +3,7 @@
 language: node_js
 
 node_js:
-  - 6
+  - 12
 
 install:
   - npm install --ignore-scripts

INSTALL.md

@@ -10,7 +10,7 @@
 Add [PostCSS color-mod() Function] to your project:
 
 ```bash
-npm install postcss-color-mod-function --save-dev
+npm install postcss postcss-color-mod-function --save-dev
 ```
 
 Use [PostCSS color-mod() Function] to process your CSS:

README.md

@@ -67,7 +67,7 @@ Properties are found in a `:root` rule, or if a fallback value is specified.
 Add [PostCSS color-mod() Function] to your project:
 
 ```bash
-npm install postcss-color-mod-function --save-dev
+npm install postcss postcss-color-mod-function --save-dev
 ```
 
 Use [PostCSS color-mod() Function] to process your CSS:

index.js

@@ -1,10 +1,9 @@
 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 => {
+module.exports = (opts = {}) => {
 	// how unresolved functions and arguments should be handled (default: "throw")
 	const unresolvedOpt = String(Object(opts).unresolved || 'throw').toLowerCase();
 
@@ -14,41 +13,46 @@ export default postcss.plugin('postcss-color-mod-function', opts => {
 	// sources to import custom selectors from
 	const importFrom = [].concat(Object(opts).importFrom || []);
 
-	//  whether var() within color-mod() should use Custom Properties or var() fallback
+	// 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,
-			getCustomProperties(root, { preserve: true })
-		);
-
-		root.walkDecls(decl => {
-			const originalValue = decl.value;
-
-			if (colorModFunctionMatch.test(originalValue)) {
-				const ast = parser(originalValue, { loose: true }).parse();
-
-				transformAST(ast, {
-					unresolved: unresolvedOpt,
-					stringifier: stringifierOpt,
-					transformVars: transformVarsOpt,
-					decl,
-					result,
-					customProperties
-				});
-
-				const modifiedValue = ast.toString();
-
-				if (originalValue !== modifiedValue) {
-					decl.value = modifiedValue;
+	return {
+		postcssPlugin: 'postcss-color-mod-function',
+		async Once (root, { result }) {
+			const customProperties = Object.assign(
+				await customPropertiesPromise,
+				getCustomProperties(root, { preserve: true })
+			);
+	
+			root.walkDecls(decl => {
+				const originalValue = decl.value;
+	
+				if (colorModFunctionMatch.test(originalValue)) {
+					const ast = parser(originalValue, { loose: true }).parse();
+	
+					transformAST(ast, {
+						unresolved: unresolvedOpt,
+						stringifier: stringifierOpt,
+						transformVars: transformVarsOpt,
+						decl,
+						result,
+						customProperties
+					});
+	
+					const modifiedValue = ast.toString();
+	
+					if (originalValue !== modifiedValue) {
+						decl.value = modifiedValue;
+					}
 				}
-			}
-		});
+			});
+		}
 	};
-});
+};
+
+module.exports.postcss = true;
 
 const colorModFunctionMatch = /(^|[^\w-])color-mod\(/i;

package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@csstools/convert-colors": "^1.4.0",
-    "postcss": "^7.0.2",
     "postcss-values-parser": "^2.0.0"
   },
   "devDependencies": {
@@ -37,11 +36,15 @@
     "babel-eslint": "^9.0.0",
     "eslint": "^5.6.0",
     "eslint-config-dev": "^2.0.0",
-    "postcss-tape": "^2.2.0",
+    "postcss": "^8.2.15",
+    "postcss-tape": "^6.0.1",
     "pre-commit": "^1.2.2",
     "rollup": "^0.66.2",
     "rollup-plugin-babel": "^4.0.3"
   },
+  "peerDependencies": {
+    "postcss": "^8.2.15"
+  },
   "eslintConfig": {
     "extends": "dev",
     "parser": "babel-eslint",