Release updates (#214)

* Updating as per plugin spec

See postcss/postcss-font-variant#15

* Adding all property back

* Updating System UI plugin to be compatible with PostCSS 8

* Removing no longer existing property

* Autoprefixer false doesn't mess with the rest of the file

* Updating with up to spec from image set plugin

* Using last mod since color-mod was rejected and no longer within pack

* Updating main file to be up to PostCSS 8

Author: Antonio-Laguna

.tape.js

@@ -89,29 +89,18 @@ module.exports = {
 		}
 	},
 	'insert:after': {
-		message: 'supports { stage: 1, features: { "color-mod-function": { unresolved: "warn" } }, insertAfter: { "color-mod-function": [ require("postcss-simple-vars")() ] } } usage',
+		message: 'supports { stage: 1, insertAfter: { "color-mod-function": [ require("postcss-simple-vars")() ] } } usage',
 		options: {
 			stage: 1,
-			features: {
-				'color-mod-function': {
-					unresolved: 'warn'
-				}
-			},
 			insertAfter: {
 				'color-mod-function': require('postcss-simple-vars')
 			}
 		},
-		warnings: 2
 	},
 	'insert:after:exec': {
 		message: 'supports { stage: 2, features: { "color-mod-function": { unresolved: "ignore" } }, insertAfter: { "color-mod-function": require("postcss-simple-vars")() } } usage',
 		options: {
 			stage: 2,
-			features: {
-				'color-mod-function': {
-					unresolved: 'ignore'
-				}
-			},
 			insertAfter: {
 				'color-mod-function': require('postcss-simple-vars')()
 			}

package.json

@@ -52,6 +52,7 @@
     "postcss-font-variant": "^5.0.0",
     "postcss-gap-properties": "^3.0.0",
     "postcss-image-set-function": "^4.0.0",
+    "postcss-initial": "^3.0.4",
     "postcss-lab-function": "^4.0.0",
     "postcss-logical": "^5.0.0",
     "postcss-media-minmax": "^5.0.0",

src/lib/plugins-by-id.js

@@ -16,6 +16,7 @@ import postcssFontFamilySystemUi from '../patch/postcss-system-ui-font-family';
 import postcssGapProperties from 'postcss-gap-properties';
 import postcssHasPseudo from 'css-has-pseudo/postcss';
 import postcssImageSetPolyfill from 'postcss-image-set-function';
+import postcssInitial from 'postcss-initial';
 import postcssLabFunction from 'postcss-lab-function';
 import postcssLogical from 'postcss-logical';
 import postcssMediaMinmax from 'postcss-media-minmax';
@@ -30,6 +31,7 @@ import postcssSelectorNot from 'postcss-selector-not';
 
 // postcss plugins ordered by id
 export default {
+	'all-property': postcssInitial,
 	'any-link-pseudo-class': postcssPseudoClassAnyLink,
 	'blank-pseudo-class': postcssBlankPseudo,
 	'break-properties': postcssPageBreak,

src/patch/postcss-system-ui-font-family.js

@@ -3,12 +3,16 @@ export default function postcssSystemUiFont() {
 		postcssPlugin: 'postcss-system-ui-font',
 		Declaration(/** @type {import('postcss').Declaration} */ node) {
 			if (propertyRegExp.test(node.prop)) {
-				node.value = node.value.replace(systemUiMatch, systemUiReplace);
+				if (!node.value.includes(systemUiFamily.join(', '))) {
+					node.value = node.value.replace(systemUiMatch, systemUiReplace);
+				}
 			}
 		}
 	}
 }
 
+postcssSystemUiFont.postcss = true;
+
 const propertyRegExp = /(?:^(?:-|\\002d){2})|(?:^font(?:-family)?$)/i;
 const whitespace = '[\\f\\n\\r\\x09\\x20]';
 const systemUiFamily = [

src/postcss.js

@@ -1,14 +1,13 @@
-import autoprefixer from 'autoprefixer'
+import autoprefixer from 'autoprefixer';
 import browserslist from 'browserslist';
 import cssdb from 'cssdb';
-import postcss from 'postcss';
 import plugins from './lib/plugins-by-id';
 import getTransformedInsertions from './lib/get-transformed-insertions';
 import getUnsupportedBrowsersByFeature from './lib/get-unsupported-browsers-by-feature';
 import idsByExecutionOrder from './lib/ids-by-execution-order';
 import writeToExports from './lib/write-to-exports';
 
-export default postcss.plugin('postcss-preset-env', opts => {
+const plugin = opts => {
 	// initialize options
 	const features = Object(Object(opts).features);
 	const insertBefore = Object(Object(opts).insertBefore);
@@ -17,13 +16,13 @@ export default postcss.plugin('postcss-preset-env', opts => {
 	const stage = 'stage' in Object(opts)
 		? opts.stage === false
 			? 5
-		: parseInt(opts.stage) || 0
-	: 2;
+			: parseInt(opts.stage) || 0
+		: 2;
 	const autoprefixerOptions = Object(opts).autoprefixer;
 	const sharedOpts = initializeSharedOpts(Object(opts));
 	const stagedAutoprefixer = autoprefixerOptions === false
 		? () => {}
-	: autoprefixer(Object.assign({ overrideBrowserslist: browsers }, autoprefixerOptions));
+		: autoprefixer(Object.assign({ overrideBrowserslist: browsers }, autoprefixerOptions));
 
 	// polyfillable features (those with an available postcss plugin)
 	const polyfillableFeatures = cssdb.concat(
@@ -61,26 +60,35 @@ export default postcss.plugin('postcss-preset-env', opts => {
 	const stagedFeatures = polyfillableFeatures.filter(
 		feature => feature.id in features
 			? features[feature.id]
-		: feature.stage >= stage
+			: feature.stage >= stage
 	).map(
-		feature => ({
-			browsers: feature.browsers,
-			plugin: typeof feature.plugin.process === 'function'
-				? features[feature.id] === true
-					? sharedOpts
-						// if the plugin is enabled and has shared options
-						? feature.plugin(Object.assign({}, sharedOpts))
-					// otherwise, if the plugin is enabled
-					: feature.plugin()
-				: sharedOpts
+		feature => {
+			let options;
+			let plugin;
+
+			if (features[feature.id] === true) {
+				// if the plugin is enabled
+				options = sharedOpts ? Object.assign({}, sharedOpts) : undefined;
+			} else {
+				options = sharedOpts
 					// if the plugin has shared options and individual options
-					? feature.plugin(Object.assign({}, sharedOpts, features[feature.id]))
-				// if the plugin has individual options
-				: feature.plugin(Object.assign({}, features[feature.id]))
-			// if the plugin is already initialized
-			: feature.plugin,
-			id: feature.id
-		})
+					? Object.assign({}, sharedOpts, features[feature.id])
+					// if the plugin has individual options
+					: Object.assign({}, features[feature.id]);
+			}
+
+			if (feature.plugin.postcss) {
+				plugin = feature.plugin(options);
+			} else {
+				plugin = feature.plugin;
+			}
+
+			return {
+				browsers: feature.browsers,
+				plugin,
+				id: feature.id
+			};
+		}
 	);
 
 	// browsers supported by the configuration
@@ -90,35 +98,28 @@ export default postcss.plugin('postcss-preset-env', opts => {
 	const supportedFeatures = stagedFeatures.filter(
 		feature => feature.id in features
 			? features[feature.id]
-		: supportedBrowsers.some(
-			supportedBrowser => browserslist(feature.browsers, {
-				ignoreUnknownVersions: true
-			}).some(
-				polyfillBrowser => polyfillBrowser === supportedBrowser
+			: supportedBrowsers.some(
+				supportedBrowser => browserslist(feature.browsers, {
+					ignoreUnknownVersions: true
+				}).some(
+					polyfillBrowser => polyfillBrowser === supportedBrowser
+				)
 			)
-		)
 	);
 
-	return (root, result) => {
-		// polyfills run in execution order
-		const polyfills = supportedFeatures.reduce(
-			(promise, feature) => promise.then(
-				() => feature.plugin(result.root, result)
-			),
-			Promise.resolve()
-		).then(
-			() => stagedAutoprefixer(result.root, result)
-		).then(
-			() => {
-				if (Object(opts).exportTo) {
-					writeToExports(sharedOpts.exportTo, opts.exportTo);
-				}
-			}
-		)
+	const usedPlugins = supportedFeatures.map(feature => feature.plugin);
+	usedPlugins.push(stagedAutoprefixer);
 
-		return polyfills;
+	return {
+		postcssPlugin: 'postcss-preset-env',
+		plugins: usedPlugins,
+		OnceExit: function() {
+			if ( Object( opts ).exportTo ) {
+				writeToExports( sharedOpts.exportTo, opts.exportTo );
+			}
+		}
 	};
-});
+}
 
 const initializeSharedOpts = opts => {
 	if ('importFrom' in opts || 'exportTo' in opts || 'preserve' in opts) {
@@ -145,3 +146,7 @@ const initializeSharedOpts = opts => {
 
 	return false;
 };
+
+plugin.postcss = true;
+
+export default plugin;

test/basic.autoprefixer.expect.css

@@ -108,7 +108,7 @@
 }
 
 .test-font-variant-property {
-	font-feature-settings: "c2sc";
+	font-feature-settings: "smcp";
 	font-variant-caps: small-caps;
 	order: 16;
 }
@@ -132,7 +132,6 @@
 	columns: auto;
 	column-count: auto;
 	column-fill: balance;
-	grid-column-gap: normal;
 	column-gap: normal;
 	column-rule: medium none currentColor;
 	column-span: 1;