postcss-preset-env: add @csstools/postcss-property-rule-prelude-list, @csstools/postcss-syntax-descriptor-syntax-production (#1748)

Author: romainmenke

package-lock.json

@@ -1,5 +1,11 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased (minor)
+
+- Added `@csstools/postcss-property-rule-prelude-list` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-property-rule-prelude-list#readme) for usage details.
+- Added `@csstools/postcss-syntax-descriptor-syntax-production` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-syntax-descriptor-syntax-production#readme) for usage details.
+- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`8.6.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#860-december-26-2025)
+
 ### 10.5.0
 
 _December 4, 2025_

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

@@ -59,12 +59,14 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/place-properties.svg" height="18">](https://cssdb.org/#place-properties) | `place-properties` | Place Properties | [example](https://preset-env.cssdb.org/features/#place-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/position-area-property.svg" height="18">](https://cssdb.org/#position-area-property) | `position-area-property` | `position-area` property | [example](https://preset-env.cssdb.org/features/#position-area-property) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-position-area-property#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/prefers-color-scheme-query.svg" height="18">](https://cssdb.org/#prefers-color-scheme-query) | `prefers-color-scheme-query` | `prefers-color-scheme` Media Query | [example](https://preset-env.cssdb.org/features/#prefers-color-scheme-query) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme#readme) |
+| [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/property-rule-prelude-list.svg" height="18">](https://cssdb.org/#property-rule-prelude-list) | `property-rule-prelude-list` | `@property` prelude list | [example](https://preset-env.cssdb.org/features/#property-rule-prelude-list) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-property-rule-prelude-list#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/random-function.svg" height="18">](https://cssdb.org/#random-function) | `random-function` | `random()` function | [example](https://preset-env.cssdb.org/features/#random-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-random-function#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/rebeccapurple-color.svg" height="18">](https://cssdb.org/#rebeccapurple-color) | `rebeccapurple-color` | `rebeccapurple` Color | [example](https://preset-env.cssdb.org/features/#rebeccapurple-color) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/relative-color-syntax.svg" height="18">](https://cssdb.org/#relative-color-syntax) | `relative-color-syntax` | Relative Colors | [example](https://preset-env.cssdb.org/features/#relative-color-syntax) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/scope-pseudo-class.svg" height="18">](https://cssdb.org/#scope-pseudo-class) | `scope-pseudo-class` | `:scope()` Reference Element Pseudo-class | [example](https://preset-env.cssdb.org/features/#scope-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-scope-pseudo-class#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/sign-functions.svg" height="18">](https://cssdb.org/#sign-functions) | `sign-functions` | `abs()` and `sign()` functions | [example](https://preset-env.cssdb.org/features/#sign-functions) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-sign-functions#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/stepped-value-functions.svg" height="18">](https://cssdb.org/#stepped-value-functions) | `stepped-value-functions` | `round()`, `mod()` and `rem()` functions | [example](https://preset-env.cssdb.org/features/#stepped-value-functions) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions#readme) |
+| [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/syntax-descriptor-syntax-production.svg" height="18">](https://cssdb.org/#syntax-descriptor-syntax-production) | `syntax-descriptor-syntax-production` | `<syntax>` production in `syntax` descriptors | [example](https://preset-env.cssdb.org/features/#syntax-descriptor-syntax-production) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-syntax-descriptor-syntax-production#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/system-ui-font-family.svg" height="18">](https://cssdb.org/#system-ui-font-family) | `system-ui-font-family` | `system-ui` Font Family | [example](https://preset-env.cssdb.org/features/#system-ui-font-family) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-system-ui-font-family#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/text-decoration-shorthand.svg" height="18">](https://cssdb.org/#text-decoration-shorthand) | `text-decoration-shorthand` | `text-decoration` shorthand | [example](https://preset-env.cssdb.org/features/#text-decoration-shorthand) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-text-decoration-shorthand#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/trigonometric-functions.svg" height="18">](https://cssdb.org/#trigonometric-functions) | `trigonometric-functions` | `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` and `atan2()` functions | [example](https://preset-env.cssdb.org/features/#trigonometric-functions) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions#readme) |

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

@@ -46,17 +46,19 @@ import type { pluginOptions as pluginOptions_49 } from 'postcss-place';
 import type { pluginOptions as pluginOptions_5 } from 'css-blank-pseudo';
 import type { pluginOptions as pluginOptions_50 } from '@csstools/postcss-position-area-property';
 import type { pluginOptions as pluginOptions_51 } from 'css-prefers-color-scheme';
-import type { pluginOptions as pluginOptions_52 } from '@csstools/postcss-random-function';
-import type { pluginOptions as pluginOptions_53 } from 'postcss-color-rebeccapurple';
-import type { pluginOptions as pluginOptions_54 } from '@csstools/postcss-relative-color-syntax';
-import type { pluginOptions as pluginOptions_55 } from '@csstools/postcss-scope-pseudo-class';
-import type { pluginOptions as pluginOptions_56 } from '@csstools/postcss-sign-functions';
-import type { pluginOptions as pluginOptions_57 } from '@csstools/postcss-stepped-value-functions';
-import type { pluginOptions as pluginOptions_58 } from '@csstools/postcss-system-ui-font-family';
-import type { pluginOptions as pluginOptions_59 } from '@csstools/postcss-text-decoration-shorthand';
+import type { pluginOptions as pluginOptions_52 } from '@csstools/postcss-property-rule-prelude-list';
+import type { pluginOptions as pluginOptions_53 } from '@csstools/postcss-random-function';
+import type { pluginOptions as pluginOptions_54 } from 'postcss-color-rebeccapurple';
+import type { pluginOptions as pluginOptions_55 } from '@csstools/postcss-relative-color-syntax';
+import type { pluginOptions as pluginOptions_56 } from '@csstools/postcss-scope-pseudo-class';
+import type { pluginOptions as pluginOptions_57 } from '@csstools/postcss-sign-functions';
+import type { pluginOptions as pluginOptions_58 } from '@csstools/postcss-stepped-value-functions';
+import type { pluginOptions as pluginOptions_59 } from '@csstools/postcss-syntax-descriptor-syntax-production';
 import type { pluginOptions as pluginOptions_6 } from '@csstools/postcss-cascade-layers';
-import type { pluginOptions as pluginOptions_60 } from '@csstools/postcss-trigonometric-functions';
-import type { pluginOptions as pluginOptions_61 } from '@csstools/postcss-unset-value';
+import type { pluginOptions as pluginOptions_60 } from '@csstools/postcss-system-ui-font-family';
+import type { pluginOptions as pluginOptions_61 } from '@csstools/postcss-text-decoration-shorthand';
+import type { pluginOptions as pluginOptions_62 } from '@csstools/postcss-trigonometric-functions';
+import type { pluginOptions as pluginOptions_63 } from '@csstools/postcss-unset-value';
 import type { pluginOptions as pluginOptions_7 } from 'postcss-attribute-case-insensitive';
 import type { pluginOptions as pluginOptions_8 } from '@csstools/postcss-color-function';
 import type { pluginOptions as pluginOptions_9 } from '@csstools/postcss-color-function-display-p3-linear';
@@ -267,26 +269,30 @@ export declare type pluginsOptions = {
     'position-area-property'?: subPluginOptions<pluginOptions_50>;
     /** plugin options for "css-prefers-color-scheme" */
     'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_51>;
+    /** plugin options for "@csstools/postcss-property-rule-prelude-list" */
+    'property-rule-prelude-list'?: subPluginOptions<pluginOptions_52>;
     /** plugin options for "@csstools/postcss-random-function" */
-    'random-function'?: subPluginOptions<pluginOptions_52>;
+    'random-function'?: subPluginOptions<pluginOptions_53>;
     /** plugin options for "postcss-color-rebeccapurple" */
-    'rebeccapurple-color'?: subPluginOptions<pluginOptions_53>;
+    'rebeccapurple-color'?: subPluginOptions<pluginOptions_54>;
     /** plugin options for "@csstools/postcss-relative-color-syntax" */
-    'relative-color-syntax'?: subPluginOptions<pluginOptions_54>;
+    'relative-color-syntax'?: subPluginOptions<pluginOptions_55>;
     /** plugin options for "@csstools/postcss-scope-pseudo-class" */
-    'scope-pseudo-class'?: subPluginOptions<pluginOptions_55>;
+    'scope-pseudo-class'?: subPluginOptions<pluginOptions_56>;
     /** plugin options for "@csstools/postcss-sign-functions" */
-    'sign-functions'?: subPluginOptions<pluginOptions_56>;
+    'sign-functions'?: subPluginOptions<pluginOptions_57>;
     /** plugin options for "@csstools/postcss-stepped-value-functions" */
-    'stepped-value-functions'?: subPluginOptions<pluginOptions_57>;
+    'stepped-value-functions'?: subPluginOptions<pluginOptions_58>;
+    /** plugin options for "@csstools/postcss-syntax-descriptor-syntax-production" */
+    'syntax-descriptor-syntax-production'?: subPluginOptions<pluginOptions_59>;
     /** plugin options for "@csstools/postcss-system-ui-font-family" */
-    'system-ui-font-family'?: subPluginOptions<pluginOptions_58>;
+    'system-ui-font-family'?: subPluginOptions<pluginOptions_60>;
     /** plugin options for "@csstools/postcss-text-decoration-shorthand" */
-    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_59>;
+    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_61>;
     /** plugin options for "@csstools/postcss-trigonometric-functions" */
-    'trigonometric-functions'?: subPluginOptions<pluginOptions_60>;
+    'trigonometric-functions'?: subPluginOptions<pluginOptions_62>;
     /** plugin options for "@csstools/postcss-unset-value" */
-    'unset-value'?: subPluginOptions<pluginOptions_61>;
+    'unset-value'?: subPluginOptions<pluginOptions_63>;
 };
 
 /** postcss-clamp plugin options */

plugin-packs/postcss-preset-env/dist/index.cjs

@@ -81,11 +81,13 @@
 		"@csstools/postcss-oklab-function": "^4.0.12",
 		"@csstools/postcss-position-area-property": "^1.0.0",
 		"@csstools/postcss-progressive-custom-properties": "^4.2.1",
+		"@csstools/postcss-property-rule-prelude-list": "^1.0.0",
 		"@csstools/postcss-random-function": "^2.0.1",
 		"@csstools/postcss-relative-color-syntax": "^3.0.12",
 		"@csstools/postcss-scope-pseudo-class": "^4.0.1",
 		"@csstools/postcss-sign-functions": "^1.1.4",
 		"@csstools/postcss-stepped-value-functions": "^4.0.9",
+		"@csstools/postcss-syntax-descriptor-syntax-production": "^1.0.0",
 		"@csstools/postcss-system-ui-font-family": "^1.0.0",
 		"@csstools/postcss-text-decoration-shorthand": "^4.0.3",
 		"@csstools/postcss-trigonometric-functions": "^4.0.9",
@@ -95,7 +97,7 @@
 		"css-blank-pseudo": "^7.0.1",
 		"css-has-pseudo": "^7.0.3",
 		"css-prefers-color-scheme": "^10.0.0",
-		"cssdb": "^8.5.2",
+		"cssdb": "^8.6.0",
 		"postcss-attribute-case-insensitive": "^7.0.1",
 		"postcss-clamp": "^4.1.0",
 		"postcss-color-functional-notation": "^7.0.12",

plugin-packs/postcss-preset-env/dist/index.d.ts

@@ -324,6 +324,16 @@
 		"id": "random-function",
 		"importName": "postcssRandomFunction"
 	},
+	{
+		"packageName": "@csstools/postcss-property-rule-prelude-list",
+		"id": "property-rule-prelude-list",
+		"importName": "postcssPropertyRulePreludeList"
+	},
+	{
+		"packageName": "@csstools/postcss-syntax-descriptor-syntax-production",
+		"id": "syntax-descriptor-syntax-production",
+		"importName": "postcssSyntaxDescriptorSyntaxProduction"
+	},
 	{
 		"packageName": "@csstools/postcss-progressive-custom-properties",
 		"id": "progressive-custom-properties",

plugin-packs/postcss-preset-env/dist/index.mjs

@@ -56,6 +56,8 @@ export default [
 	'opacity-percentage',
 	'text-decoration-shorthand',
 	'unset-value',
+	'property-rule-prelude-list',
+	'syntax-descriptor-syntax-production',
 
 	// Math functions.
 	'random-function',

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

@@ -54,12 +54,14 @@ import postcssPlace from 'postcss-place';
 import postcssPositionAreaProperty from '@csstools/postcss-position-area-property';
 import postcssPrefersColorScheme from 'css-prefers-color-scheme';
 import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
+import postcssPropertyRulePreludeList from '@csstools/postcss-property-rule-prelude-list';
 import postcssRandomFunction from '@csstools/postcss-random-function';
 import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
 import postcssRelativeColorSyntax from '@csstools/postcss-relative-color-syntax';
 import postcssScopePseudoClass from '@csstools/postcss-scope-pseudo-class';
 import postcssSignFunctions from '@csstools/postcss-sign-functions';
 import postcssSteppedValueFunctions from '@csstools/postcss-stepped-value-functions';
+import postcssSyntaxDescriptorSyntaxProduction from '@csstools/postcss-syntax-descriptor-syntax-production';
 import postcssSystemUIFontFamily from '@csstools/postcss-system-ui-font-family';
 import postcssTextDecorationShorthand from '@csstools/postcss-text-decoration-shorthand';
 import postcssTrigonometricFunctions from '@csstools/postcss-trigonometric-functions';
@@ -124,12 +126,14 @@ export const pluginsById = new Map(
 		['position-area-property', postcssPositionAreaProperty],
 		['prefers-color-scheme-query', postcssPrefersColorScheme],
 		['progressive-custom-properties', postcssProgressiveCustomProperties],
+		['property-rule-prelude-list', postcssPropertyRulePreludeList],
 		['random-function', postcssRandomFunction],
 		['rebeccapurple-color', postcssColorRebeccapurple],
 		['relative-color-syntax', postcssRelativeColorSyntax],
 		['scope-pseudo-class', postcssScopePseudoClass],
 		['sign-functions', postcssSignFunctions],
 		['stepped-value-functions', postcssSteppedValueFunctions],
+		['syntax-descriptor-syntax-production', postcssSyntaxDescriptorSyntaxProduction],
 		['system-ui-font-family', postcssSystemUIFontFamily],
 		['text-decoration-shorthand', postcssTextDecorationShorthand],
 		['trigonometric-functions', postcssTrigonometricFunctions],