final typescript conversions

e2e/browserslist/package-json/.gitignore

@@ -0,0 +1 @@
+

e2e/browserslist/package-json/index.mjs

@@ -0,0 +1,18 @@
+import assert from 'assert';
+import plugin from 'postcss-preset-env';
+import postcss from 'postcss';
+
+const result = await postcss([plugin()]).process(':any-link { color: blue; }').css;
+
+if (process.env.BROWSERSLIST_ENV === 'production') {
+	assert.equal(
+		result,
+		':link, :visited, area[href] { color: blue; }\n' +
+		':-moz-any-link { color: blue; }\n' +
+		':any-link { color: blue; }',
+	);
+}
+
+if (process.env.BROWSERSLIST_ENV === 'development') {
+	assert.equal(result, ':any-link { color: blue; }');
+}

e2e/browserslist/package-json/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@csstools/e2e--browserslist--package-json",
+	"version": "0.0.0",
+	"private": true,
+	"description": "Can you use PostCSS Preset Env with a browserslist in package.json?",
+	"scripts": {
+		"test": "BROWSERSLIST_ENV=development node ./index.mjs && BROWSERSLIST_ENV=production node ./index.mjs"
+	},
+	"devDependencies": {
+		"postcss": "^8.4.19",
+		"postcss-preset-env": "^7.8.3"
+	},
+	"browserslist": {
+		"development": [
+			"chrome > 100"
+		],
+		"production": [
+			"last 1 version",
+			"> 1%",
+			"not dead"
+		]
+	}
+}

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

@@ -1,5 +1,11 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased
+
+- Added: TypeScript support.
+- Added `@csstools/postcss-media-queries-aspect-ratio-number-values` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values#readme) for usage details.
+- Fixed: `all-property` and `overflow-wrap-property` now follow the `preserve` plugin option
+
 ### (8.0.0-alpha.1) (November 14, 2022)
 
 - Updated Support for Node v14+ (major).

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

@@ -369,8 +369,6 @@ Given they have no support they will always be enabled if they match by Stage:
 
 * `blank-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md)
 * `custom-media-queries`: [Plugin](https://github.com/postcss/postcss-custom-media)
-* `has-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md)
-* `image-set-function`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function)
 * `media-query-ranges`: [Plugin](https://github.com/postcss/postcss-media-minmax)
 * `nesting-rules`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
 

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

@@ -13,6 +13,7 @@
 	},
 	"main": "dist/index.cjs",
 	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
 	"exports": {
 		".": {
 			"import": "./dist/index.mjs",
@@ -33,6 +34,7 @@
 		"@csstools/postcss-hwb-function": "^1.0.2",
 		"@csstools/postcss-ic-unit": "^1.0.1",
 		"@csstools/postcss-is-pseudo-class": "^2.0.7",
+		"@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0",
 		"@csstools/postcss-nested-calc": "^1.0.0",
 		"@csstools/postcss-normalize-display-values": "^1.0.1",
 		"@csstools/postcss-oklab-function": "^1.1.1",
@@ -47,7 +49,7 @@
 		"css-blank-pseudo": "^4.1.1",
 		"css-has-pseudo": "^4.0.1",
 		"css-prefers-color-scheme": "^7.0.1",
-		"cssdb": "^7.1.0",
+		"cssdb": "^7.2.0",
 		"postcss-attribute-case-insensitive": "^5.0.2",
 		"postcss-clamp": "^4.1.0",
 		"postcss-color-functional-notation": "^4.2.4",

plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs

@@ -1,4 +1,7 @@
 import { readFile, writeFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import path from 'path';
+
 const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
 
 const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`;
@@ -27,7 +30,35 @@ export const pluginsById = new Map(
 	return result;
 }
 
+function generatePluginOptions(data) {
+	const plugins = data.slice(0).sort((a, b) => a.id.localeCompare(b.id));
+	let result = '';
+
+	for (let i = 0; i < plugins.length; i++) {
+		const plugin = plugins[i];
+
+		if (existsSync(path.join('./src/types/', plugin.packageName, 'plugin-options.ts'))) {
+			result += `import type { pluginOptions as ${plugin.importName} } from '${path.join('../types/', plugin.packageName, 'plugin-options')}';\n`;
+		} else {
+			result += `import type { pluginOptions as ${plugin.importName} } from '${plugin.packageName}';\n`;
+		}
+	}
+
+	result += '\nexport type pluginsOptions = {\n';
+
+	for (let i = 0; i < plugins.length; i++) {
+		const plugin = plugins[i];
+		result += `\t/** plugin options for "${plugin.packageName}" */\n`;
+		result += `\t'${plugin.id}'?: ${plugin.importName} | boolean\n`;
+	}
+
+	result += '};\n';
+
+	return result;
+}
+
 await Promise.all([
 	writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
 	writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
+	writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)),
 ]);

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

@@ -139,6 +139,11 @@
 		"id": "media-query-ranges",
 		"importName": "postcssMediaMinmax"
 	},
+	{
+		"packageName": "@csstools/postcss-media-queries-aspect-ratio-number-values",
+		"id": "media-queries-aspect-ratio-number-values",
+		"importName": "postcssMediaQueriesAspectRatioNumberValues"
+	},
 	{
 		"packageName": "postcss-nesting",
 		"id": "nesting-rules",

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

@@ -6,9 +6,11 @@ import { initializeSharedOptions } from './lib/shared-options.mjs';
 import { listFeatures } from './lib/list-features.mjs';
 import { newLogger } from './log/helper.mjs';
 import { pluginIdHelp } from './plugins/plugin-id-help.mjs';
+import type { pluginOptions } from './options';
+import type { PluginCreator } from 'postcss';
+export type { pluginOptions } from './options';
 
-
-const plugin = (opts) => {
+const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 	const logger = newLogger();
 
 	// initialize options
@@ -58,6 +60,6 @@ const plugin = (opts) => {
 	};
 };
 
-plugin.postcss = true;
+creator.postcss = true;
 
-export default plugin;
+export default creator;

plugin-packs/postcss-preset-env/src/lib/format-feature.mjs

@@ -54,6 +54,16 @@ export function formatStagedFeature(cssdbList, browsers, features, feature, shar
 	// postcss-preset-env : option overrides
 	options.enableProgressiveCustomProperties = false;
 
+	// https://github.com/maximkoretskiy/postcss-initial#replace
+	if (feature.id === 'all-property' && 'preserve' in options) {
+		options.replace = options.preserve;
+	}
+
+	// https://github.com/MattDiMu/postcss-replace-overflow-wrap/blob/ec9914e0b9473a75a5d1fe32ea4311555eb81b71/index.js#L10
+	if (feature.id === 'overflow-wrap-property' && 'preserve' in options) {
+		options.method = options.preserve ? 'copy' : 'replace';
+	}
+
 	if (feature.plugin.postcss && typeof feature.plugin === 'function') {
 		plugin = feature.plugin(options);
 	} else if (feature.plugin && feature.plugin.default && typeof feature.plugin.default === 'function' && feature.plugin.default.postcss) {

plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs

@@ -5,7 +5,8 @@ export default [
 	'custom-properties',
 	'environment-variables', // run environment-variables here to access transpiled custom media params and properties
 	'image-set-function', // run images-set-function before nesting-rules so that it may fix nested media
-	'media-query-ranges', // run media-query-range and
+	'media-query-ranges', // run media-query-range
+	'media-queries-aspect-ratio-number-values',
 	'prefers-color-scheme-query', // run prefers-color-scheme-query here to prevent duplicate transpilation after nesting-rules
 	'nesting-rules',
 	'custom-selectors', // run custom-selectors after nesting-rules to correctly transpile &:--custom-selector

plugin-packs/postcss-preset-env/src/options.ts

@@ -0,0 +1,76 @@
+import type autoprefixer from 'autoprefixer';
+import { pluginsOptions } from './plugins/plugins-options';
+
+export type pluginOptions = {
+	/**
+	 * Determine which CSS features to polyfill,
+	 * based upon their process in becoming web standards.
+	 * default: 2
+	 */
+	stage?: number
+
+	/**
+	 * Determine which CSS features to polyfill,
+	 * based their implementation status.
+	 * default: 0
+	 */
+	minimumVendorImplementations?: number
+
+	/**
+	 * Enable any feature that would need an extra browser library to be loaded into the page for it to work.
+	 * default: false
+	 */
+	enableClientSidePolyfills?: boolean
+
+	/**
+	 * PostCSS Preset Env supports any standard browserslist configuration,
+	 * which can be a `.browserslistrc` file,
+	 * a `browserslist` key in `package.json`,
+	 * or `browserslist` environment variables.
+	 *
+	 * The `browsers` option should only be used when a standard browserslist configuration is not available.
+	 */
+	browsers?: string | readonly string[] | null
+
+	/**
+	 * Determine whether all plugins should receive a `preserve` option,
+	 * which may preserve or remove the original and now polyfilled CSS.
+	 * Each plugin has it's own default, some true, others false.
+	 * default: _not set_
+	 */
+	preserve?: boolean
+
+	/**
+	 * [Configure autoprefixer](https://github.com/postcss/autoprefixer#options)
+	 */
+	autoprefixer?: autoprefixer.Options
+
+	/**
+	 * Enable or disable specific polyfills by ID.
+	 * Passing `true` to a specific [feature ID](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md) will enable its polyfill,
+	 * while passing `false` will disable it.
+	 *
+	 * Passing an object to a specific feature ID will both enable and configure it.
+	 */
+	features?: pluginsOptions
+
+	/**
+	 * The `insertBefore` key allows you to insert other PostCSS plugins into the chain.
+	 * This is only useful if you are also using sugary PostCSS plugins that must execute before certain polyfills.
+	 * `insertBefore` supports chaining one or multiple plugins.
+	*/
+	insertBefore?: Record<string, unknown>
+
+	/**
+	 * The `insertAfter` key allows you to insert other PostCSS plugins into the chain.
+	 * This is only useful if you are also using sugary PostCSS plugins that must execute after certain polyfills.
+	 * `insertAfter` supports chaining one or multiple plugins.
+	*/
+	insertAfter?: Record<string, unknown>
+
+	/**
+	 * Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why.
+	 * default: false
+	 */
+	debug?: boolean
+}

plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs

@@ -26,6 +26,7 @@ import postcssImageSetFunction from 'postcss-image-set-function';
 import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
 import postcssLabFunction from 'postcss-lab-function';
 import postcssLogical from 'postcss-logical';
+import postcssMediaQueriesAspectRatioNumberValues from '@csstools/postcss-media-queries-aspect-ratio-number-values';
 import postcssMediaMinmax from 'postcss-media-minmax';
 import postcssNestedCalc from '@csstools/postcss-nested-calc';
 import postcssNesting from 'postcss-nesting';
@@ -75,6 +76,7 @@ export const pluginsById = new Map(
 		['is-pseudo-class', postcssIsPseudoClass],
 		['lab-function', postcssLabFunction],
 		['logical-properties-and-values', postcssLogical],
+		['media-queries-aspect-ratio-number-values', postcssMediaQueriesAspectRatioNumberValues],
 		['media-query-ranges', postcssMediaMinmax],
 		['nested-calc', postcssNestedCalc],
 		['nesting-rules', postcssNesting],

plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs

@@ -139,6 +139,11 @@ export default [
 		'id': 'media-query-ranges',
 		'importName': 'postcssMediaMinmax',
 	},
+	{
+		'packageName': '@csstools/postcss-media-queries-aspect-ratio-number-values',
+		'id': 'media-queries-aspect-ratio-number-values',
+		'importName': 'postcssMediaQueriesAspectRatioNumberValues',
+	},
 	{
 		'packageName': 'postcss-nesting',
 		'id': 'nesting-rules',