Update to PostCSS 8

index.js

@@ -3,18 +3,13 @@
 const { validateArguments } = require("@validatem/core");
 const ValidationError = require("@validatem/error");
 const isBoolean = require("@validatem/is-boolean");
+const isPostcssPlugin = require("@validatem/is-postcss-plugin");
 const isString = require("@validatem/is-string");
 const required = require("@validatem/required");
 const arrayOf = require("@validatem/array-of");
 const oneOf = require("@validatem/one-of");
 const allowExtraProperties = require("@validatem/allow-extra-properties");
 
-function isPostcssPlugin(value) {
-	if (value.postcssPlugin == null || value.postcssVersion == null || typeof value !== "function") {
-		throw new ValidationError(`Must be a PostCSS plugin`);
-	}
-}
-
 // FIXME: When there's >1 icssify instance set up on the Browserify instance (can this happen when a module specifies its own dependency on icssify?), either throw an error (if incompatible?) or merge the two somehow, so that there's only one resulting .css file
 
 module.exports = function (browserify, options) {

package.json

@@ -27,6 +27,7 @@
     "@validatem/core": "^0.3.15",
     "@validatem/error": "^1.1.0",
     "@validatem/is-boolean": "^0.1.1",
+    "@validatem/is-postcss-plugin": "^0.2.0",
     "@validatem/is-string": "^1.0.0",
     "@validatem/one-of": "^0.1.1",
     "@validatem/required": "^0.1.1",
@@ -39,15 +40,18 @@
     "insert-css": "^2.0.0",
     "map-obj": "^4.1.0",
     "object.fromentries": "^2.0.1",
-    "postcss": "^6.0.9",
+    "postcss-modules-extract-imports": "^3.0.0",
-    "postcss-modules-extract-imports": "^2.0.0",
+    "postcss-modules-local-by-default": "^4.0.0",
-    "postcss-modules-local-by-default": "^3.0.2",
+    "postcss-modules-scope": "^3.0.0",
-    "postcss-modules-scope": "^2.1.0",
+    "postcss-modules-values": "^4.0.0",
-    "postcss-modules-values": "^3.0.0",
     "through2": "^2.0.3"
   },
   "devDependencies": {
     "@joepie91/eslint-config": "^1.1.0",
-    "eslint": "^6.8.0"
+    "eslint": "^6.8.0",
+    "postcss": "^8.0.0"
+  },
+  "peeerDependencies": {
+    "postcss": "^8.0.0"
   }
 }

src/postcss/postcss-icss-find-imports.js

@@ -11,28 +11,32 @@ Licensed under:
 	MIT (https://opensource.org/licenses/MIT)
 */
 
-const postcss = require("postcss");
 const icssUtils = require("icss-utils");
 const loaderUtils = require("loader-utils");
 
 const pluginName = 'postcss-icss-find-imports';
 
-module.exports = postcss.plugin(pluginName, (_options = {}) => {
+module.exports = (_options = {}) => {
-	return function process(css, result) {
+	return {
-		let discoveredImports = new Set();
+		postcssPlugin: pluginName,
-
+		Once(root, { result }) {
-		let { icssImports } = icssUtils.extractICSS(css, false);
+			let discoveredImports = new Set();
-		
+
-		for (let importUrl of Object.keys(icssImports)) {
+			let { icssImports } = icssUtils.extractICSS(css, false);
-			discoveredImports.add(loaderUtils.parseString(importUrl));
+			
-		}
+			for (let importUrl of Object.keys(icssImports)) {
-
+				discoveredImports.add(loaderUtils.parseString(importUrl));
-		for (let url of discoveredImports) {
+			}
-			result.messages.push({
+
-				pluginName: pluginName,
+			for (let url of discoveredImports) {
-				type: "import",
+				result.messages.push({
-				url: url
+					pluginName: pluginName,
-			});
+					type: "import",
-		}
+					url: url
+				});
+			}
+		},
 	};
-});
+};
+
+module.exports.postcss = true;

src/postcss/postcss-icss-parser.js

@@ -11,7 +11,6 @@ Licensed under:
 	MIT (https://opensource.org/licenses/MIT)
 */
 
-const postcss = require("postcss");
 const icssUtils = require("icss-utils");
 const loaderUtils = require("loader-utils");
 const { validateOptions } = require("@validatem/core");
@@ -21,60 +20,65 @@ const isFunction = require("@validatem/is-function");
 
 const pluginName = 'postcss-icss-parser';
 
-module.exports = postcss.plugin(pluginName, (options = {}) => {
+module.exports = (options = {}) => {
 	validateOptions([options], {
 		keyReplacer: [ required, isFunction ],
 		autoExportImports: [ isBoolean ]
 	});
 
-	return function process(css, result) {
+	return {
-		const importReplacements = Object.create(null);
+		postcssPlugin: pluginName,
-		const { icssImports, icssExports } = icssUtils.extractICSS(css);
+		Once(css, { result }) {
+			const importReplacements = Object.create(null);
+			const { icssImports, icssExports } = icssUtils.extractICSS(css);
 
-		let index = 0;
+			let index = 0;
 
-		for (const [ importUrl, imports ] of Object.entries(icssImports)) {
+			for (const [ importUrl, imports ] of Object.entries(icssImports)) {
-			const url = loaderUtils.parseString(importUrl);
+				const url = loaderUtils.parseString(importUrl);
-			
-			for (const [ localKey, remoteKey ] of Object.entries(imports)) {
-				index += 1;
 				
-				let newKey = options.keyReplacer({ localKey, remoteKey, index, url });
+				for (const [ localKey, remoteKey ] of Object.entries(imports)) {
-				importReplacements[localKey] = newKey;
+					index += 1;
+					
+					let newKey = options.keyReplacer({ localKey, remoteKey, index, url });
+					importReplacements[localKey] = newKey;
 
-				result.messages.push({
-					pluginName,
-					type: 'icss-import',
-					item: { url, localKey, remoteKey, newKey, index },
-				});
-				
-				if (options.autoExportImports !== false) {
 					result.messages.push({
-						pluginName: pluginName,
+						pluginName,
-						type: "icss-export",
+						type: 'icss-import',
-						item: {
+						item: { url, localKey, remoteKey, newKey, index },
-							name: localKey,
-							value: newKey
-						}
 					});
+					
+					if (options.autoExportImports !== false) {
+						result.messages.push({
+							pluginName: pluginName,
+							type: "icss-export",
+							item: {
+								name: localKey,
+								value: newKey
+							}
+						});
+					}
 				}
 			}
-		}
 
-		icssUtils.replaceSymbols(css, importReplacements);
+			icssUtils.replaceSymbols(css, importReplacements);
 
-		for (const [ name, value ] of Object.entries(icssExports)) {
+			for (const [ name, value ] of Object.entries(icssExports)) {
-			/* This is to handle re-exports of imported items */
+				/* This is to handle re-exports of imported items */
-			const parsedValue = icssUtils.replaceValueSymbols(
+				const parsedValue = icssUtils.replaceValueSymbols(
-				value,
+					value,
-				importReplacements
+					importReplacements
-			);
+				);
 
-			result.messages.push({
+				result.messages.push({
-				pluginName: pluginName,
+					pluginName: pluginName,
-				type: "icss-export",
+					type: "icss-export",
-				item: { name, value: parsedValue }
+					item: { name, value: parsedValue }
-			});
+				});
-		}
+			}
+		},
 	};
-});
+};
+
+module.exports.postcss = true;