postcss-preset-env: add position-area-property (#1732)

romainmenke · web-flow · commit 660336a35444 · 2025-12-04T20:17:35.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md
@@ -1,11 +1,14 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased (minor)
+
+- Added `@csstools/postcss-position-area-property` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-position-area-property#readme) for usage details.
+- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`8.5.1`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#851-december-3-2025) (patch)
+
 ### 10.4.0
 
 _September 21, 2025_
 
-_August 22, 2025_
-
 - Added `@csstools/postcss-contrast-color-function` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-contrast-color-function#readme) for usage details.
 - Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`4.2.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#421) (patch)
 
diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md
@@ -57,6 +57,7 @@ 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/overflow-property.svg" height="18">](https://cssdb.org/#overflow-property) | `overflow-property` | `overflow` Shorthand Property | [example](https://preset-env.cssdb.org/features/#overflow-property) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-overflow-shorthand#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/overflow-wrap-property.svg" height="18">](https://cssdb.org/#overflow-wrap-property) | `overflow-wrap-property` | `overflow-wrap` Property | [example](https://preset-env.cssdb.org/features/#overflow-wrap-property) | [docs](https://github.com/mattdimu/postcss-replace-overflow-wrap#readme) |
 | [<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/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) |
diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs
diff --git a/plugin-packs/postcss-preset-env/dist/index.d.ts b/plugin-packs/postcss-preset-env/dist/index.d.ts
@@ -44,17 +44,18 @@ import type { pluginOptions as pluginOptions_47 } from '@csstools/postcss-oklab-
 import type { pluginOptions as pluginOptions_48 } from 'postcss-overflow-shorthand';
 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 'css-prefers-color-scheme';
-import type { pluginOptions as pluginOptions_51 } from '@csstools/postcss-random-function';
-import type { pluginOptions as pluginOptions_52 } from 'postcss-color-rebeccapurple';
-import type { pluginOptions as pluginOptions_53 } from '@csstools/postcss-relative-color-syntax';
-import type { pluginOptions as pluginOptions_54 } from '@csstools/postcss-scope-pseudo-class';
-import type { pluginOptions as pluginOptions_55 } from '@csstools/postcss-sign-functions';
-import type { pluginOptions as pluginOptions_56 } from '@csstools/postcss-stepped-value-functions';
-import type { pluginOptions as pluginOptions_57 } from '@csstools/postcss-text-decoration-shorthand';
-import type { pluginOptions as pluginOptions_58 } from '@csstools/postcss-trigonometric-functions';
-import type { pluginOptions as pluginOptions_59 } from '@csstools/postcss-unset-value';
+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-text-decoration-shorthand';
+import type { pluginOptions as pluginOptions_59 } from '@csstools/postcss-trigonometric-functions';
 import type { pluginOptions as pluginOptions_6 } from '@csstools/postcss-cascade-layers';
+import type { pluginOptions as pluginOptions_60 } 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';
@@ -261,28 +262,30 @@ export declare type pluginsOptions = {
     'overflow-wrap-property'?: subPluginOptions<postcssReplaceOverflowWrapOptions>;
     /** plugin options for "postcss-place" */
     'place-properties'?: subPluginOptions<pluginOptions_49>;
+    /** plugin options for "@csstools/postcss-position-area-property" */
+    'position-area-property'?: subPluginOptions<pluginOptions_50>;
     /** plugin options for "css-prefers-color-scheme" */
-    'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_50>;
+    'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_51>;
     /** plugin options for "@csstools/postcss-random-function" */
-    'random-function'?: subPluginOptions<pluginOptions_51>;
+    'random-function'?: subPluginOptions<pluginOptions_52>;
     /** plugin options for "postcss-color-rebeccapurple" */
-    'rebeccapurple-color'?: subPluginOptions<pluginOptions_52>;
+    'rebeccapurple-color'?: subPluginOptions<pluginOptions_53>;
     /** plugin options for "@csstools/postcss-relative-color-syntax" */
-    'relative-color-syntax'?: subPluginOptions<pluginOptions_53>;
+    'relative-color-syntax'?: subPluginOptions<pluginOptions_54>;
     /** plugin options for "@csstools/postcss-scope-pseudo-class" */
-    'scope-pseudo-class'?: subPluginOptions<pluginOptions_54>;
+    'scope-pseudo-class'?: subPluginOptions<pluginOptions_55>;
     /** plugin options for "@csstools/postcss-sign-functions" */
-    'sign-functions'?: subPluginOptions<pluginOptions_55>;
+    'sign-functions'?: subPluginOptions<pluginOptions_56>;
     /** plugin options for "@csstools/postcss-stepped-value-functions" */
-    'stepped-value-functions'?: subPluginOptions<pluginOptions_56>;
+    'stepped-value-functions'?: subPluginOptions<pluginOptions_57>;
     /** plugin options for "postcss-system-ui-font-family" */
     'system-ui-font-family'?: subPluginOptions<postcssFontFamilySystemUIOptions>;
     /** plugin options for "@csstools/postcss-text-decoration-shorthand" */
-    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_57>;
+    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_58>;
     /** plugin options for "@csstools/postcss-trigonometric-functions" */
-    'trigonometric-functions'?: subPluginOptions<pluginOptions_58>;
+    'trigonometric-functions'?: subPluginOptions<pluginOptions_59>;
     /** plugin options for "@csstools/postcss-unset-value" */
-    'unset-value'?: subPluginOptions<pluginOptions_59>;
+    'unset-value'?: subPluginOptions<pluginOptions_60>;
 };
 
 /** postcss-clamp plugin options */
diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs
diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json
@@ -79,6 +79,7 @@
 		"@csstools/postcss-nested-calc": "^4.0.0",
 		"@csstools/postcss-normalize-display-values": "^4.0.0",
 		"@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-random-function": "^2.0.1",
 		"@csstools/postcss-relative-color-syntax": "^3.0.12",
diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json
@@ -254,6 +254,11 @@
 		"id": "break-properties",
 		"importName": "postcssPageBreak"
 	},
+	{
+		"packageName": "@csstools/postcss-position-area-property",
+		"id": "position-area-property",
+		"importName": "postcssPositionAreaProperty"
+	},
 	{
 		"packageName": "postcss-place",
 		"id": "place-properties",
diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs
@@ -51,6 +51,7 @@ import postcssOpacityPercentage from 'postcss-opacity-percentage';
 import postcssOverflowShorthand from 'postcss-overflow-shorthand';
 import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
 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 postcssRandomFunction from '@csstools/postcss-random-function';
@@ -120,6 +121,7 @@ export const pluginsById = new Map(
 		['overflow-property', postcssOverflowShorthand],
 		['overflow-wrap-property', postcssReplaceOverflowWrap],
 		['place-properties', postcssPlace],
+		['position-area-property', postcssPositionAreaProperty],
 		['prefers-color-scheme-query', postcssPrefersColorScheme],
 		['progressive-custom-properties', postcssProgressiveCustomProperties],
 		['random-function', postcssRandomFunction],
diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs
@@ -254,6 +254,11 @@ export default [
 		'id': 'break-properties',
 		'importName': 'postcssPageBreak',
 	},
+	{
+		'packageName': '@csstools/postcss-position-area-property',
+		'id': 'position-area-property',
+		'importName': 'postcssPositionAreaProperty',
+	},
 	{
 		'packageName': 'postcss-place',
 		'id': 'place-properties',
diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts
@@ -51,6 +51,7 @@ import type { postcssOpacityPercentageOptions } from '../types/postcss-opacity-p
 import type { pluginOptions as postcssOverflowShorthandOptions } from 'postcss-overflow-shorthand';
 import type { postcssReplaceOverflowWrapOptions } from '../types/postcss-replace-overflow-wrap/plugin-options';
 import type { pluginOptions as postcssPlaceOptions } from 'postcss-place';
+import type { pluginOptions as postcssPositionAreaPropertyOptions } from '@csstools/postcss-position-area-property';
 import type { pluginOptions as postcssPrefersColorSchemeOptions } from 'css-prefers-color-scheme';
 import type { pluginOptions as postcssRandomFunctionOptions } from '@csstools/postcss-random-function';
 import type { pluginOptions as postcssColorRebeccapurpleOptions } from 'postcss-color-rebeccapurple';
@@ -172,6 +173,8 @@ export type pluginsOptions = {
 	'overflow-wrap-property'?: subPluginOptions<postcssReplaceOverflowWrapOptions>
 	/** plugin options for "postcss-place" */
 	'place-properties'?: subPluginOptions<postcssPlaceOptions>
+	/** plugin options for "@csstools/postcss-position-area-property" */
+	'position-area-property'?: subPluginOptions<postcssPositionAreaPropertyOptions>
 	/** plugin options for "css-prefers-color-scheme" */
 	'prefers-color-scheme-query'?: subPluginOptions<postcssPrefersColorSchemeOptions>
 	/** plugin options for "@csstools/postcss-random-function" */
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -759,5 +759,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css
@@ -764,5 +764,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css
@@ -782,5 +782,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch126.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch126.expect.css
@@ -593,5 +593,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
@@ -671,5 +671,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css b/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css
@@ -753,5 +753,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css
@@ -777,5 +777,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css
@@ -773,5 +773,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css
@@ -767,5 +767,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css
@@ -885,5 +885,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css
@@ -1291,5 +1291,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -773,5 +773,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css
@@ -656,5 +656,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css
@@ -754,5 +754,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css
@@ -754,5 +754,6 @@
 }
 
 .position-area {
+	inset-area: start;
 	position-area: start;
 }
diff --git a/plugins/postcss-position-area-property/README.md b/plugins/postcss-position-area-property/README.md
@@ -1,6 +1,6 @@
 # PostCSS Position Area Property [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
-[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-position-area-property.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg?branch=main" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/position-area.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/position-area.svg" height="20">][css-url] 
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-position-area-property.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg?branch=main" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/position-area-property.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/position-area-property.svg" height="20">][css-url] 
 
 ```bash
 npm install @csstools/postcss-position-area-property --save-dev
@@ -52,7 +52,7 @@ instructions for:
 - [Grunt](INSTALL.md#grunt)
 
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
-[css-url]: https://cssdb.org/#position-area
+[css-url]: https://cssdb.org/#position-area-property
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/@csstools/postcss-position-area-property
 
diff --git a/plugins/postcss-position-area-property/package.json b/plugins/postcss-position-area-property/package.json
@@ -72,7 +72,7 @@
 		"postcss-plugin"
 	],
 	"csstools": {
-		"cssdbId": "position-area",
+		"cssdbId": "position-area-property",
 		"exportName": "postcssPositionAreaProperty",
 		"humanReadableName": "PostCSS Position Area Property",
 		"specUrl": "https://drafts.csswg.org/css-anchor-position/#position-area"
