final typescript conversions (#712)

* final typescript conversions

* postcss-dir-pseudo-class

* export plugin types

* fix

* fix

* fix

* postcss-gap-properties

* lint

* postcss-overflow-shorthand

* postcss-place

* fix

* postcss-pseudo-class-any-link

* one more

* more fixes and typings

* wip

* docs

* typed options for postcss-preset-env

* final fixes

* add to list of plugins in execution order

* clean up

* Update index.ts

* update cssdb

* update CHANGELOG

Author: romainmenke

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"
+		]
+	}
+}

package-lock.json

@@ -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/CHANGELOG.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/README.md

@@ -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/package.json

@@ -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/generate-plugins-data.mjs

@@ -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/scripts/plugins-data.json

@@ -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;