Preset env home revamp

plugin-packs/postcss-preset-env/docs/generate.mjs

@@ -1,4 +1,4 @@
-import { packageNamesToIds } from '../src/plugins/plugins-map.mjs';
+import { getFeaturesIds } from '../src/plugins/plugins-map.mjs';
 import cssdb from 'cssdb';
 import { promises as fsp } from 'fs';
 
@@ -7,7 +7,7 @@ let featuresTable = '';
 featuresTable = featuresTable + '| ID | Feature | example | docs |\n';
 featuresTable = featuresTable + '|:--- |:--- |:--- |:--- |\n';
 
-const ids = Array.from(Object.values(packageNamesToIds));
+const ids = getFeaturesIds();
 ids.sort();
 
 for (const id of ids) {

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

@@ -78,6 +78,7 @@
 		"postcss-simple-vars": "^6.0.3"
 	},
 	"scripts": {
+		"prebuild": "node ./scripts/generate-plugins-data.mjs && eslint --fix ./src/plugins/*.mjs",
 		"build": "rollup -c ../../rollup/default.js",
 		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
 		"docs": "node ./docs/generate.mjs",

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

@@ -0,0 +1,33 @@
+import { readFile, writeFile } from 'fs/promises';
+const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
+
+const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`;
+
+function generatePluginsByID(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];
+		result += `import ${plugin.importName} from '${plugin.importedPackage || plugin.packageName}';\n`;
+	}
+
+	result += `
+// postcss plugins ordered by id
+export const pluginsById = new Map(
+\t[\n`;
+
+	for (let i = 0; i < plugins.length; i++) {
+		const plugin = plugins[i];
+		result += `\t\t['${plugin.id}', ${plugin.importName}],\n`;
+	}
+
+	result += '\t],\n);\n';
+
+	return result;
+}
+
+await Promise.all([
+	writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
+	writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
+]);

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

@@ -0,0 +1,198 @@
+[
+	{
+		"packageName": "css-blank-pseudo",
+		"id": "blank-pseudo-class",
+		"importName": "postcssBlankPseudo"
+	},
+	{
+		"packageName": "css-has-pseudo",
+		"id": "has-pseudo-class",
+		"importName": "postcssHasPseudo"
+	},
+	{
+		"packageName": "css-prefers-color-scheme",
+		"id": "prefers-color-scheme-query",
+		"importName": "postcssPrefersColorScheme"
+	},
+	{
+		"packageName": "postcss-attribute-case-insensitive",
+		"id": "case-insensitive-attributes",
+		"importName": "postcssAttributeCaseInsensitive"
+	},
+	{
+		"packageName": "postcss-clamp",
+		"id": "clamp",
+		"importName": "postcssClamp"
+	},
+	{
+		"packageName": "@csstools/postcss-color-function",
+		"id": "color-function",
+		"importName": "postcssColorFunction"
+	},
+	{
+		"packageName": "postcss-color-functional-notation",
+		"id": "color-functional-notation",
+		"importName": "postcssColorFunctionalNotation"
+	},
+	{
+		"packageName": "postcss-color-hex-alpha",
+		"id": "hexadecimal-alpha-notation",
+		"importName": "postcssColorHexAlpha"
+	},
+	{
+		"packageName": "postcss-color-rebeccapurple",
+		"id": "rebeccapurple-color",
+		"importName": "postcssColorRebeccapurple"
+	},
+	{
+		"packageName": "postcss-custom-media",
+		"id": "custom-media-queries",
+		"importName": "postcssCustomMedia"
+	},
+	{
+		"packageName": "postcss-custom-properties",
+		"id": "custom-properties",
+		"importName": "postcssCustomProperties"
+	},
+	{
+		"packageName": "postcss-custom-selectors",
+		"id": "custom-selectors",
+		"importName": "postcssCustomSelectors"
+	},
+	{
+		"packageName": "postcss-dir-pseudo-class",
+		"id": "dir-pseudo-class",
+		"importName": "postcssDirPseudoClass"
+	},
+	{
+		"packageName": "postcss-double-position-gradients",
+		"id": "double-position-gradients",
+		"importName": "postcssDoublePositionGradients"
+	},
+	{
+		"packageName": "postcss-env-function",
+		"id": "environment-variables",
+		"importName": "postcssEnvFunction"
+	},
+	{
+		"packageName": "postcss-focus-visible",
+		"id": "focus-visible-pseudo-class",
+		"importName": "postcssFocusVisible"
+	},
+	{
+		"packageName": "postcss-focus-within",
+		"id": "focus-within-pseudo-class",
+		"importName": "postcssFocusWithin"
+	},
+	{
+		"packageName": "@csstools/postcss-font-format-keywords",
+		"id": "font-format-keywords",
+		"importName": "postcssFontFormatKeywords"
+	},
+	{
+		"packageName": "postcss-font-variant",
+		"id": "font-variant-property",
+		"importName": "postcssFontVariant"
+	},
+	{
+		"packageName": "postcss-gap-properties",
+		"id": "gap-properties",
+		"importName": "postcssGapProperties"
+	},
+	{
+		"packageName": "@csstools/postcss-hwb-function",
+		"id": "hwb-function",
+		"importName": "postcssHWBFunction"
+	},
+	{
+		"packageName": "@csstools/postcss-ic-unit",
+		"id": "ic-unit",
+		"importName": "postcssICUnit"
+	},
+	{
+		"packageName": "postcss-image-set-function",
+		"id": "image-set-function",
+		"importName": "postcssImageSetFunction"
+	},
+	{
+		"packageName": "postcss-initial",
+		"id": "all-property",
+		"importName": "postcssInitial"
+	},
+	{
+		"packageName": "@csstools/postcss-is-pseudo-class",
+		"id": "is-pseudo-class",
+		"importName": "postcssIsPseudoClass"
+	},
+	{
+		"packageName": "postcss-lab-function",
+		"id": "lab-function",
+		"importName": "postcssLabFunction"
+	},
+	{
+		"packageName": "postcss-logical",
+		"id": "logical-properties-and-values",
+		"importName": "postcssLogical"
+	},
+	{
+		"packageName": "postcss-media-minmax",
+		"id": "media-query-ranges",
+		"importName": "postcssMediaMinmax"
+	},
+	{
+		"packageName": "postcss-nesting",
+		"id": "nesting-rules",
+		"importName": "postcssNesting"
+	},
+	{
+		"packageName": "@csstools/postcss-normalize-display-values",
+		"id": "display-two-values",
+		"importName": "postcssNormalizeDisplayValues"
+	},
+	{
+		"packageName": "@csstools/postcss-oklab-function",
+		"id": "oklab-function",
+		"importName": "postcssOKLabFunction"
+	},
+	{
+		"packageName": "postcss-opacity-percentage",
+		"id": "opacity-percentage",
+		"importName": "postcssOpacityPercentage"
+	},
+	{
+		"packageName": "postcss-overflow-shorthand",
+		"id": "overflow-property",
+		"importName": "postcssOverflowShorthand"
+	},
+	{
+		"packageName": "postcss-page-break",
+		"id": "break-properties",
+		"importName": "postcssPageBreak"
+	},
+	{
+		"packageName": "postcss-place",
+		"id": "place-properties",
+		"importName": "postcssPlace"
+	},
+	{
+		"packageName": "postcss-pseudo-class-any-link",
+		"id": "any-link-pseudo-class",
+		"importName": "postcssPseudoClassAnyLink"
+	},
+	{
+		"packageName": "postcss-replace-overflow-wrap",
+		"id": "overflow-wrap-property",
+		"importName": "postcssReplaceOverflowWrap"
+	},
+	{
+		"packageName": "postcss-selector-not",
+		"id": "not-pseudo-class",
+		"importName": "postcssSelectorNot"
+	},
+	{
+		"packageName": "postcss-system-ui-font-family",
+		"importedPackage": "../patch/postcss-system-ui-font-family.mjs",
+		"id": "system-ui-font-family",
+		"importName": "postcssFontFamilySystemUI"
+	}
+]

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

@@ -1,8 +1,9 @@
-import { idsToPackageNames, packageNamesToIds } from './plugins-map.mjs';
+import { getFeaturesIds, getPackageNames, getPackageNamesToIds } from './plugins-map.mjs';
 
 export function pluginIdHelp(featureNamesInOptions, root, result) {
-	const featureNames = Object.keys(idsToPackageNames);
-	const packageNames = Object.keys(packageNamesToIds);
+	const featureNames = getFeaturesIds();
+	const packageNames = getPackageNames();
+	const packageNamesToIds = getPackageNamesToIds();
 
 	featureNamesInOptions.forEach((featureName) => {
 		if (featureNames.includes(featureName)) {

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

@@ -1,42 +1,42 @@
-import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
+import postcssInitial from 'postcss-initial';
+import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
 import postcssBlankPseudo from 'css-blank-pseudo';
+import postcssPageBreak from 'postcss-page-break';
+import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
+import postcssClamp from 'postcss-clamp';
+import postcssColorFunction from '@csstools/postcss-color-function';
 import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
-import postcssColorHexAlpha from 'postcss-color-hex-alpha';
-import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
 import postcssCustomMedia from 'postcss-custom-media';
 import postcssCustomProperties from 'postcss-custom-properties';
 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';
 import postcssFontVariant from 'postcss-font-variant';
-import postcssFontFamilySystemUi from '../patch/postcss-system-ui-font-family.mjs';
 import postcssGapProperties from 'postcss-gap-properties';
 import postcssHasPseudo from 'css-has-pseudo';
-import postcssImageSetPolyfill from 'postcss-image-set-function';
-import postcssInitial from 'postcss-initial';
+import postcssColorHexAlpha from 'postcss-color-hex-alpha';
+import postcssHWBFunction from '@csstools/postcss-hwb-function';
+import postcssICUnit from '@csstools/postcss-ic-unit';
+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 postcssMediaMinmax from 'postcss-media-minmax';
 import postcssNesting from 'postcss-nesting';
+import postcssSelectorNot from 'postcss-selector-not';
+import postcssOKLabFunction from '@csstools/postcss-oklab-function';
+import postcssOpacityPercentage from 'postcss-opacity-percentage';
 import postcssOverflowShorthand from 'postcss-overflow-shorthand';
-import postcssPageBreak from 'postcss-page-break';
+import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
 import postcssPlace from 'postcss-place';
 import postcssPrefersColorScheme from 'css-prefers-color-scheme';
-import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
-import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
-import postcssSelectorNot from 'postcss-selector-not';
-import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
-import postcssHWBFunction from '@csstools/postcss-hwb-function';
-import postcssOpacityPercentage from 'postcss-opacity-percentage';
-import postcssClamp from 'postcss-clamp';
-import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords';
-import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values';
-import postcssColorFunction from '@csstools/postcss-color-function';
-import postcssOKLabFunction from '@csstools/postcss-oklab-function';
-import postcssICUnit from '@csstools/postcss-ic-unit';
+import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
+import postcssFontFamilySystemUI from '../patch/postcss-system-ui-font-family.mjs';
 
 // postcss plugins ordered by id
 export const pluginsById = new Map(
@@ -61,11 +61,11 @@ export const pluginsById = new Map(
 		['font-format-keywords', postcssFontFormatKeywords],
 		['font-variant-property', postcssFontVariant],
 		['gap-properties', postcssGapProperties],
-		['hwb-function', postcssHWBFunction],
 		['has-pseudo-class', postcssHasPseudo],
 		['hexadecimal-alpha-notation', postcssColorHexAlpha],
+		['hwb-function', postcssHWBFunction],
 		['ic-unit', postcssICUnit],
-		['image-set-function', postcssImageSetPolyfill],
+		['image-set-function', postcssImageSetFunction],
 		['is-pseudo-class', postcssIsPseudoClass],
 		['lab-function', postcssLabFunction],
 		['logical-properties-and-values', postcssLogical],
@@ -79,6 +79,6 @@ export const pluginsById = new Map(
 		['place-properties', postcssPlace],
 		['prefers-color-scheme-query', postcssPrefersColorScheme],
 		['rebeccapurple-color', postcssColorRebeccapurple],
-		['system-ui-font-family', postcssFontFamilySystemUi],
+		['system-ui-font-family', postcssFontFamilySystemUI],
 	],
 );