refactor postcss-custom-properties and cleanup in postcss-preset-env (#603)

* postcss-custom-properties

* cleanup more tests

* cleanup

* docs and changelog

* cleanup

* more cleanup

* docs

* Update plugins/postcss-custom-properties/docs/README.md

Co-authored-by: Antonio Laguna <sombragriselros@gmail.com>

* docs

Co-authored-by: Antonio Laguna <sombragriselros@gmail.com>

Author: romainmenke

package-lock.json

@@ -1,6 +1,5 @@
 import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
 import plugin from 'postcss-preset-env';
-import fs from 'fs';
 
 const orderDetectionPlugin = (prop, changeWhenMatches) => {
 	return {
@@ -383,128 +382,6 @@ postcssTape(plugin)({
 			}
 		}
 	},
-	'import': {
-		message: 'supports { importFrom: { customMedia, customProperties, customSelectors, environmentVariables } } usage',
-		warnings: 2,
-		options: {
-			importFrom: {
-				customMedia: {
-					'--narrow-window': '(max-width: env(--sm))'
-				},
-				customProperties: {
-					'--order': '1'
-				},
-				customSelectors: {
-					':--heading': 'h1, h2, h3, h4, h5, h6'
-				},
-				environmentVariables: {
-					'--sm': '40rem'
-				}
-			},
-			stage: 0
-		}
-	},
-	'import:ch87': {
-		message: 'supports { browsers: "chrome >= 87", importFrom: { customMedia, customProperties, customSelectors, environmentVariables } } usage',
-		warnings: 2,
-		options: {
-			browsers: 'chrome >= 87',
-			importFrom: {
-				customMedia: {
-					'--narrow-window': '(max-width: env(--sm))'
-				},
-				customProperties: {
-					'--order': '1'
-				},
-				customSelectors: {
-					':--heading': 'h1, h2, h3, h4, h5, h6'
-				},
-				environmentVariables: {
-					'--sm': '40rem'
-				}
-			},
-			stage: 0
-		}
-	},
-	'import:ch87:array': {
-		message: 'supports { browsers: "chrome >= 87", importFrom: [{ customMedia, customProperties, customSelectors, environmentVariables }] } usage',
-		warnings: 2,
-		options: {
-			browsers: 'chrome >= 87',
-			importFrom: [{
-				customMedia: {
-					'--narrow-window': '(max-width: env(--sm))'
-				},
-				customProperties: {
-					'--order': '1'
-				},
-				customSelectors: {
-					':--heading': 'h1, h2, h3, h4, h5, h6'
-				},
-				environmentVariables: {
-					'--sm': '40rem'
-				}
-			}],
-			stage: 0
-		}
-	},
-	'import:ch87:incorrect-options': {
-		message: 'supports { browsers: "chrome >= 87", importFrom: false } usage',
-		options: {
-			browsers: 'chrome >= 87',
-			importFrom: false,
-			stage: 0
-		}
-	},
-	'basic:export': {
-		message: 'supports { stage: 0 } usage',
-		warnings: 1,
-		options: {
-			stage: 0,
-			exportTo: [
-				'test/generated-custom-exports.css',
-				'test/generated-custom-exports.js',
-				'test/generated-custom-exports.json',
-				'test/generated-custom-exports.mjs'
-			]
-		},
-		expect: 'basic.stage0.expect.css',
-		result: 'basic.stage0.result.css',
-		before() {
-			try {
-				global.__exportTo = {
-					css: fs.readFileSync('test/generated-custom-exports.css', 'utf8'),
-					js: fs.readFileSync('test/generated-custom-exports.js', 'utf8'),
-					json: fs.readFileSync('test/generated-custom-exports.json', 'utf8'),
-					mjs: fs.readFileSync('test/generated-custom-exports.mjs', 'utf8')
-				};
-
-				fs.rmSync('test/generated-custom-exports.css');
-				fs.rmSync('test/generated-custom-exports.js');
-				fs.rmSync('test/generated-custom-exports.json');
-				fs.rmSync('test/generated-custom-exports.mjs');
-			} catch (_) {
-				// ignore errors here.
-				// If the files are removed manually test run will regenerate these.
-				// The after step will still fail.
-				// The real test is in the after step.
-			}
-		},
-		after() {
-			global.__exportAs = {
-				css: fs.readFileSync('test/generated-custom-exports.css', 'utf8'),
-				js: fs.readFileSync('test/generated-custom-exports.js', 'utf8'),
-				json: fs.readFileSync('test/generated-custom-exports.json', 'utf8'),
-				mjs: fs.readFileSync('test/generated-custom-exports.mjs', 'utf8')
-			};
-
-			Object.keys(global.__exportTo).forEach(key => {
-				if (global.__exportTo[key] !== global.__exportAs[key]) {
-					throw new Error(`The original ${key} file did not match the freshly exported copy`);
-				}
-			});
-		}
-	},
 	'progressive-custom-properties': {
 		message: 'supports progressive custom properties plugin',
 		options: {

plugin-packs/postcss-preset-env/.tape.mjs

@@ -3,6 +3,7 @@
 ### Unreleased (8.0.0-alpha.1)
 
 - Updated: Support for Node v14+ (major).
+- Remove `postcss-env-function` (breaking).
 
 ### 8.0.0-alpha.0 (July 8, 2022)
 

plugin-packs/postcss-preset-env/CHANGELOG.md

@@ -19,7 +19,6 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | `dir-pseudo-class` | `:dir` Directionality Pseudo-Class | [example](https://preset-env.cssdb.org/features/#dir-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class#readme) |
 | `display-two-values` | Two values syntax for `display` | [example](https://preset-env.cssdb.org/features/#display-two-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values#readme) |
 | `double-position-gradients` | Double Position Gradients | [example](https://preset-env.cssdb.org/features/#double-position-gradients) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme) |
-| `environment-variables` | Custom Environment Variables | [example](https://preset-env.cssdb.org/features/#environment-variables) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function#readme) |
 | `focus-visible-pseudo-class` | `:focus-visible` Focus-Indicated Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-visible-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme) |
 | `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) |
 | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) |

plugin-packs/postcss-preset-env/FEATURES.md

@@ -326,134 +326,6 @@ postcssPresetEnv({
 });
 ```
 
-### importFrom
-
-The `importFrom` option specifies sources where variables like Custom Media,
-Custom Properties, Custom Selectors, and Environment Variables can be imported
-from, which might be CSS, JS, and JSON files, functions, and directly passed
-objects.
-
-```js
-postcssPresetEnv({
-  /*
-    @custom-media --small-viewport (max-width: 30em);
-    @custom-selector :--heading h1, h2, h3;
-    :root { --color: red; }
-  */
-  importFrom: 'path/to/file.css'
-});
-```
-
-Multiple sources can be passed into this option, and they will be parsed in the
-order they are received. JavaScript files, JSON files, functions, and objects
-will use different namespaces to import different kinds of variables.
-
-```js
-postcssPresetEnv({
-  importFrom: [
-    /*
-      @custom-media --small-viewport (max-width: 30em);
-      @custom-selector :--heading h1, h2, h3;
-      :root { --color: red; }
-    */
-    'path/to/file.css',
-
-    /* module.exports = {
-      customMedia: { '--small-viewport': '(max-width: 30em)' },
-      customProperties: { '--color': 'red' },
-      customSelectors: { ':--heading': 'h1, h2, h3' },
-      environmentVariables: { '--branding-padding': '20px' }
-    } */
-    'and/then/this.js',
-
-    /* {
-      "custom-media": { "--small-viewport": "(max-width: 30em)" }
-      "custom-properties": { "--color": "red" },
-      "custom-selectors": { ":--heading": "h1, h2, h3" },
-      "environment-variables": { "--branding-padding": "20px" }
-    } */
-    'and/then/that.json',
-
-    {
-      customMedia: { '--small-viewport': '(max-width: 30em)' },
-      customProperties: { '--color': 'red' },
-      customSelectors: { ':--heading': 'h1, h2, h3' },
-      environmentVariables: { '--branding-padding': '20px' }
-    },
-    () => {
-      const customMedia = { '--small-viewport': '(max-width: 30em)' };
-      const customProperties = { '--color': 'red' };
-      const customSelectors = { ':--heading': 'h1, h2, h3' };
-      const environmentVariables = { '--branding-padding': '20px' };
-
-      return { customMedia, customProperties, customSelectors, environmentVariables };
-    }
-  ]
-});
-```
-
-### exportTo
-
-The `exportTo` option specifies destinations where variables like Custom Media,
-Custom Properties, Custom Selectors, and Environment Variables can be exported
-to, which might be CSS, JS, and JSON files, functions, and directly passed
-objects.
-
-```js
-postcssPresetEnv({
-  /*
-    @custom-media --small-viewport (max-width: 30em);
-    @custom-selector :--heading h1, h2, h3;
-    :root { --color: red; }
-  */
-  exportTo: 'path/to/file.css'
-});
-```
-
-Multiple destinations can be passed into this option as well, and they will be
-parsed in the order they are received. JavaScript files, JSON files, and
-objects will use different namespaces to import different kinds of variables.
-
-```js
-const cachedObject = {};
-
-postcssPresetEnv({
-  exportTo: [
-    /*
-      @custom-media --small-viewport (max-width: 30em);
-      @custom-selector :--heading h1, h2, h3;
-      :root { --color: red; }
-    */
-    'path/to/file.css',
-
-    /* module.exports = {
-      customMedia: { '--small-viewport': '(max-width: 30em)' },
-      customProperties: { '--color': 'red' },
-      customSelectors: { ':--heading': 'h1, h2, h3' },
-      environmentVariables: { '--branding-padding': '20px' }
-    } */
-    'and/then/this.js',
-
-    /* {
-      "custom-media": { "--small-viewport": "(max-width: 30em)" }
-      "custom-properties": { "--color": "red" },
-      "custom-selectors": { ":--heading": "h1, h2, h3" },
-      "environment-variables": { "--branding-padding": "20px" }
-    } */
-    'and/then/that.json',
-
-    cachedObject,
-    variables => {
-      if ('customProperties' in variables) {
-        // do something special with customProperties
-      }
-
-      Object.assign(cachedObject, variables);
-    }
-  ]
-});
-```
-
 ### debug
 
 The `debug` option enables debugging messages to stdout which should be useful to help you debug which features have been enabled/disabled and why.

plugin-packs/postcss-preset-env/README.md

@@ -57,7 +57,6 @@
 		"postcss-custom-selectors": "^6.0.3",
 		"postcss-dir-pseudo-class": "^6.0.5",
 		"postcss-double-position-gradients": "^3.1.2",
-		"postcss-env-function": "^4.0.6",
 		"postcss-focus-visible": "^7.0.0",
 		"postcss-focus-within": "^6.0.0",
 		"postcss-font-variant": "^5.0.0",

plugin-packs/postcss-preset-env/package.json

@@ -69,11 +69,6 @@
 		"id": "double-position-gradients",
 		"importName": "postcssDoublePositionGradients"
 	},
-	{
-		"packageName": "postcss-env-function",
-		"id": "environment-variables",
-		"importName": "postcssEnvFunction"
-	},
 	{
 		"packageName": "postcss-focus-visible",
 		"id": "focus-visible-pseudo-class",

plugin-packs/postcss-preset-env/scripts/plugins-data.json

@@ -2,7 +2,6 @@ import autoprefixer from 'autoprefixer';
 import cssdb from 'cssdb';
 import logFeaturesList from './log/features-list.mjs';
 import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
-import writeToExports from './side-effects/write-to-exports.mjs';
 import { initializeSharedOptions } from './lib/shared-options.mjs';
 import { listFeatures } from './lib/list-features.mjs';
 import { newLogger } from './log/helper.mjs';
@@ -47,10 +46,6 @@ const plugin = (opts) => {
 
 				// Always reset the logger, if when debug is false
 				logger.resetLogger();
-
-				if (options.exportTo) {
-					writeToExports(sharedOptions.exportTo, opts.exportTo);
-				}
 			},
 		};
 	};

plugin-packs/postcss-preset-env/src/index.js

@@ -1,5 +1,4 @@
 import browserslist from 'browserslist';
-import { pluginHasSideEffects } from '../side-effects/plugins.mjs';
 import { featuresWithClientSide } from '../client-side-polyfills/plugins.mjs';
 import { stageFromOptions } from './stage.mjs';
 import { prepareFeaturesList } from './prepare-features-list.mjs';
@@ -109,10 +108,6 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) {
 			return features[feature.id];
 		}
 
-		if (pluginHasSideEffects(feature)) {
-			return true;
-		}
-
 		const unsupportedBrowsers = browserslist(feature.browsers, {
 			ignoreUnknownVersions: true,
 		});

plugin-packs/postcss-preset-env/src/lib/list-features.mjs

@@ -1,20 +1,7 @@
-
 export function initializeSharedOptions(opts) {
-	if ('importFrom' in opts || 'exportTo' in opts || 'preserve' in opts) {
+	if ('preserve' in opts) {
 		const sharedOptions = {};
 
-		if ('importFrom' in opts) {
-			sharedOptions.importFrom = opts.importFrom;
-		}
-
-		if ('exportTo' in opts) {
-			sharedOptions.exportTo = {
-				customMedia: {},
-				customProperties: {},
-				customSelectors: {},
-			};
-		}
-
 		if ('preserve' in opts) {
 			sharedOptions.preserve = opts.preserve;
 		}

plugin-packs/postcss-preset-env/src/lib/shared-options.mjs

@@ -13,7 +13,6 @@ import postcssCustomSelectors from 'postcss-custom-selectors';
 import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
 import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values';
 import postcssDoublePositionGradients from 'postcss-double-position-gradients';
-import postcssEnvFunction from 'postcss-env-function';
 import postcssFocusVisible from 'postcss-focus-visible';
 import postcssFocusWithin from 'postcss-focus-within';
 import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords';
@@ -62,7 +61,6 @@ export const pluginsById = new Map(
 		['dir-pseudo-class', postcssDirPseudoClass],
 		['display-two-values', postcssNormalizeDisplayValues],
 		['double-position-gradients', postcssDoublePositionGradients],
-		['environment-variables', postcssEnvFunction],
 		['focus-visible-pseudo-class', postcssFocusVisible],
 		['focus-within-pseudo-class', postcssFocusWithin],
 		['font-format-keywords', postcssFontFormatKeywords],