postcss-preset-env: add postcss-mixins

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

@@ -1,5 +1,10 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased (minor)
+
+- Added `@csstools/postcss-mixins` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-mixins#readme) for usage details.
+- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`8.7.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#870-january-14-2026)
+
 ### 11.0.1
 
 _January 14, 2026_

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

@@ -49,6 +49,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/logical-viewport-units.svg" height="18">](https://cssdb.org/#logical-viewport-units) | `logical-viewport-units` | Logical Viewport Units | [example](https://preset-env.cssdb.org/features/#logical-viewport-units) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/media-queries-aspect-ratio-number-values.svg" height="18">](https://cssdb.org/#media-queries-aspect-ratio-number-values) | `media-queries-aspect-ratio-number-values` | Aspect-Ratio number values | [example](https://preset-env.cssdb.org/features/#media-queries-aspect-ratio-number-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/media-query-ranges.svg" height="18">](https://cssdb.org/#media-query-ranges) | `media-query-ranges` | Media Query Ranges | [example](https://preset-env.cssdb.org/features/#media-query-ranges) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax#readme) |
+| [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/mixins.svg" height="18">](https://cssdb.org/#mixins) | `mixins` | `@mixin` | [example](https://preset-env.cssdb.org/features/#mixins) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-mixins#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/nested-calc.svg" height="18">](https://cssdb.org/#nested-calc) | `nested-calc` | Nested `calc()` | [example](https://preset-env.cssdb.org/features/#nested-calc) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nested-calc#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/nesting-rules.svg" height="18">](https://cssdb.org/#nesting-rules) | `nesting-rules` | Nesting Rules | [example](https://preset-env.cssdb.org/features/#nesting-rules) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/not-pseudo-class.svg" height="18">](https://cssdb.org/#not-pseudo-class) | `not-pseudo-class` | `:not()` Negation List Pseudo-Class | [example](https://preset-env.cssdb.org/features/#not-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-selector-not#readme) |

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

@@ -37,28 +37,29 @@ import type { pluginOptions as pluginOptions_40 } from '@csstools/postcss-logica
 import type { pluginOptions as pluginOptions_41 } from '@csstools/postcss-logical-viewport-units';
 import type { pluginOptions as pluginOptions_42 } from '@csstools/postcss-media-queries-aspect-ratio-number-values';
 import type { pluginOptions as pluginOptions_43 } from '@csstools/postcss-media-minmax';
-import type { pluginOptions as pluginOptions_44 } from '@csstools/postcss-nested-calc';
-import type { pluginOptions as pluginOptions_45 } from 'postcss-nesting';
-import type { pluginOptions as pluginOptions_46 } from 'postcss-selector-not';
-import type { pluginOptions as pluginOptions_47 } from '@csstools/postcss-oklab-function';
-import type { pluginOptions as pluginOptions_48 } from 'postcss-overflow-shorthand';
-import type { pluginOptions as pluginOptions_49 } from 'postcss-place';
+import type { pluginOptions as pluginOptions_44 } from '@csstools/postcss-mixins';
+import type { pluginOptions as pluginOptions_45 } from '@csstools/postcss-nested-calc';
+import type { pluginOptions as pluginOptions_46 } from 'postcss-nesting';
+import type { pluginOptions as pluginOptions_47 } from 'postcss-selector-not';
+import type { pluginOptions as pluginOptions_48 } from '@csstools/postcss-oklab-function';
+import type { pluginOptions as pluginOptions_49 } from 'postcss-overflow-shorthand';
 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-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_50 } from 'postcss-place';
+import type { pluginOptions as pluginOptions_51 } from '@csstools/postcss-position-area-property';
+import type { pluginOptions as pluginOptions_52 } from 'css-prefers-color-scheme';
+import type { pluginOptions as pluginOptions_53 } from '@csstools/postcss-property-rule-prelude-list';
+import type { pluginOptions as pluginOptions_54 } from '@csstools/postcss-random-function';
+import type { pluginOptions as pluginOptions_55 } from 'postcss-color-rebeccapurple';
+import type { pluginOptions as pluginOptions_56 } from '@csstools/postcss-relative-color-syntax';
+import type { pluginOptions as pluginOptions_57 } from '@csstools/postcss-scope-pseudo-class';
+import type { pluginOptions as pluginOptions_58 } from '@csstools/postcss-sign-functions';
+import type { pluginOptions as pluginOptions_59 } from '@csstools/postcss-stepped-value-functions';
 import type { pluginOptions as pluginOptions_6 } from '@csstools/postcss-cascade-layers';
-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_60 } from '@csstools/postcss-syntax-descriptor-syntax-production';
+import type { pluginOptions as pluginOptions_61 } from '@csstools/postcss-system-ui-font-family';
+import type { pluginOptions as pluginOptions_62 } from '@csstools/postcss-text-decoration-shorthand';
+import type { pluginOptions as pluginOptions_63 } from '@csstools/postcss-trigonometric-functions';
+import type { pluginOptions as pluginOptions_64 } 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';
@@ -250,50 +251,52 @@ export declare type pluginsOptions = {
     'media-queries-aspect-ratio-number-values'?: subPluginOptions<pluginOptions_42>;
     /** plugin options for "@csstools/postcss-media-minmax" */
     'media-query-ranges'?: subPluginOptions<pluginOptions_43>;
+    /** plugin options for "@csstools/postcss-mixins" */
+    'mixins'?: subPluginOptions<pluginOptions_44>;
     /** plugin options for "@csstools/postcss-nested-calc" */
-    'nested-calc'?: subPluginOptions<pluginOptions_44>;
+    'nested-calc'?: subPluginOptions<pluginOptions_45>;
     /** plugin options for "postcss-nesting" */
-    'nesting-rules'?: subPluginOptions<pluginOptions_45>;
+    'nesting-rules'?: subPluginOptions<pluginOptions_46>;
     /** plugin options for "postcss-selector-not" */
-    'not-pseudo-class'?: subPluginOptions<pluginOptions_46>;
+    'not-pseudo-class'?: subPluginOptions<pluginOptions_47>;
     /** plugin options for "@csstools/postcss-oklab-function" */
-    'oklab-function'?: subPluginOptions<pluginOptions_47>;
+    'oklab-function'?: subPluginOptions<pluginOptions_48>;
     /** plugin options for "postcss-opacity-percentage" */
     'opacity-percentage'?: subPluginOptions<postcssOpacityPercentageOptions>;
     /** plugin options for "postcss-overflow-shorthand" */
-    'overflow-property'?: subPluginOptions<pluginOptions_48>;
+    'overflow-property'?: subPluginOptions<pluginOptions_49>;
     /** plugin options for "postcss-replace-overflow-wrap" */
     'overflow-wrap-property'?: subPluginOptions<postcssReplaceOverflowWrapOptions>;
     /** plugin options for "postcss-place" */
-    'place-properties'?: subPluginOptions<pluginOptions_49>;
+    'place-properties'?: subPluginOptions<pluginOptions_50>;
     /** plugin options for "@csstools/postcss-position-area-property" */
-    'position-area-property'?: subPluginOptions<pluginOptions_50>;
+    'position-area-property'?: subPluginOptions<pluginOptions_51>;
     /** plugin options for "css-prefers-color-scheme" */
-    'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_51>;
+    'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_52>;
     /** plugin options for "@csstools/postcss-property-rule-prelude-list" */
-    'property-rule-prelude-list'?: subPluginOptions<pluginOptions_52>;
+    'property-rule-prelude-list'?: subPluginOptions<pluginOptions_53>;
     /** plugin options for "@csstools/postcss-random-function" */
-    'random-function'?: subPluginOptions<pluginOptions_53>;
+    'random-function'?: subPluginOptions<pluginOptions_54>;
     /** plugin options for "postcss-color-rebeccapurple" */
-    'rebeccapurple-color'?: subPluginOptions<pluginOptions_54>;
+    'rebeccapurple-color'?: subPluginOptions<pluginOptions_55>;
     /** plugin options for "@csstools/postcss-relative-color-syntax" */
-    'relative-color-syntax'?: subPluginOptions<pluginOptions_55>;
+    'relative-color-syntax'?: subPluginOptions<pluginOptions_56>;
     /** plugin options for "@csstools/postcss-scope-pseudo-class" */
-    'scope-pseudo-class'?: subPluginOptions<pluginOptions_56>;
+    'scope-pseudo-class'?: subPluginOptions<pluginOptions_57>;
     /** plugin options for "@csstools/postcss-sign-functions" */
-    'sign-functions'?: subPluginOptions<pluginOptions_57>;
+    'sign-functions'?: subPluginOptions<pluginOptions_58>;
     /** plugin options for "@csstools/postcss-stepped-value-functions" */
-    'stepped-value-functions'?: subPluginOptions<pluginOptions_58>;
+    'stepped-value-functions'?: subPluginOptions<pluginOptions_59>;
     /** plugin options for "@csstools/postcss-syntax-descriptor-syntax-production" */
-    'syntax-descriptor-syntax-production'?: subPluginOptions<pluginOptions_59>;
+    'syntax-descriptor-syntax-production'?: subPluginOptions<pluginOptions_60>;
     /** plugin options for "@csstools/postcss-system-ui-font-family" */
-    'system-ui-font-family'?: subPluginOptions<pluginOptions_60>;
+    'system-ui-font-family'?: subPluginOptions<pluginOptions_61>;
     /** plugin options for "@csstools/postcss-text-decoration-shorthand" */
-    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_61>;
+    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_62>;
     /** plugin options for "@csstools/postcss-trigonometric-functions" */
-    'trigonometric-functions'?: subPluginOptions<pluginOptions_62>;
+    'trigonometric-functions'?: subPluginOptions<pluginOptions_63>;
     /** plugin options for "@csstools/postcss-unset-value" */
-    'unset-value'?: subPluginOptions<pluginOptions_63>;
+    'unset-value'?: subPluginOptions<pluginOptions_64>;
 };
 
 /** postcss-clamp plugin options */

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

@@ -69,6 +69,7 @@
 		"@csstools/postcss-logical-viewport-units": "^4.0.0",
 		"@csstools/postcss-media-minmax": "^3.0.0",
 		"@csstools/postcss-media-queries-aspect-ratio-number-values": "^4.0.0",
+		"@csstools/postcss-mixins": "^1.0.0",
 		"@csstools/postcss-nested-calc": "^5.0.0",
 		"@csstools/postcss-normalize-display-values": "^5.0.0",
 		"@csstools/postcss-oklab-function": "^5.0.0",

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

@@ -219,6 +219,11 @@
 		"id": "media-queries-aspect-ratio-number-values",
 		"importName": "postcssMediaQueriesAspectRatioNumberValues"
 	},
+	{
+		"packageName": "@csstools/postcss-mixins",
+		"id": "mixins",
+		"importName": "postcssMixins"
+	},
 	{
 		"packageName": "postcss-nesting",
 		"id": "nesting-rules",

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

@@ -1,5 +1,7 @@
 // ids ordered by required execution, then alphabetically
 export default [
+	'mixins',
+
 	'custom-media-queries',
 	'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

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

@@ -43,6 +43,7 @@ import postcssLogicalResize from '@csstools/postcss-logical-resize';
 import postcssLogicalViewportUnits from '@csstools/postcss-logical-viewport-units';
 import postcssMediaQueriesAspectRatioNumberValues from '@csstools/postcss-media-queries-aspect-ratio-number-values';
 import postcssMediaMinmax from '@csstools/postcss-media-minmax';
+import postcssMixins from '@csstools/postcss-mixins';
 import postcssNestedCalc from '@csstools/postcss-nested-calc';
 import postcssNesting from 'postcss-nesting';
 import postcssSelectorNot from 'postcss-selector-not';
@@ -115,6 +116,7 @@ export const pluginsById = new Map(
 		['logical-viewport-units', postcssLogicalViewportUnits],
 		['media-queries-aspect-ratio-number-values', postcssMediaQueriesAspectRatioNumberValues],
 		['media-query-ranges', postcssMediaMinmax],
+		['mixins', postcssMixins],
 		['nested-calc', postcssNestedCalc],
 		['nesting-rules', postcssNesting],
 		['not-pseudo-class', postcssSelectorNot],

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

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

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

@@ -43,6 +43,7 @@ import type { pluginOptions as postcssLogicalResizeOptions } from '@csstools/pos
 import type { pluginOptions as postcssLogicalViewportUnitsOptions } from '@csstools/postcss-logical-viewport-units';
 import type { pluginOptions as postcssMediaQueriesAspectRatioNumberValuesOptions } from '@csstools/postcss-media-queries-aspect-ratio-number-values';
 import type { pluginOptions as postcssMediaMinmaxOptions } from '@csstools/postcss-media-minmax';
+import type { pluginOptions as postcssMixinsOptions } from '@csstools/postcss-mixins';
 import type { pluginOptions as postcssNestedCalcOptions } from '@csstools/postcss-nested-calc';
 import type { pluginOptions as postcssNestingOptions } from 'postcss-nesting';
 import type { pluginOptions as postcssSelectorNotOptions } from 'postcss-selector-not';
@@ -159,6 +160,8 @@ export type pluginsOptions = {
 	'media-queries-aspect-ratio-number-values'?: subPluginOptions<postcssMediaQueriesAspectRatioNumberValuesOptions>
 	/** plugin options for "@csstools/postcss-media-minmax" */
 	'media-query-ranges'?: subPluginOptions<postcssMediaMinmaxOptions>
+	/** plugin options for "@csstools/postcss-mixins" */
+	'mixins'?: subPluginOptions<postcssMixinsOptions>
 	/** plugin options for "@csstools/postcss-nested-calc" */
 	'nested-calc'?: subPluginOptions<postcssNestedCalcOptions>
 	/** plugin options for "postcss-nesting" */

plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css

@@ -745,12 +745,19 @@
 
 .random {
 	color: rgb(
-		35,
-		180,
-		215
+		85,
+		75,
+		85
 	);
 
-	border-color: rgb(239, 141, 154);
+	border-color: rgb(0, 5, 2);
+}
+
+@media (color-gamut: p3) {
+.random {
+
+	border-color: color(display-p3 0 0.02032 0.00493);
+}
 }
 
 .contrast-color {
@@ -774,3 +781,20 @@
 	initial-value: black;
 	syntax: "<color>";
 }
+
+.apply {
+	width: 10px;
+	color: lime;
+}
+
+@media screen {
+
+.apply {
+		color: green;
+}
+	}
+
+.apply {
+
+	height: 20px;
+}

plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css

@@ -750,12 +750,19 @@
 
 .random {
 	color: rgb(
-		35,
-		180,
-		215
+		85,
+		75,
+		85
 	);
 
-	border-color: rgb(239, 141, 154);
+	border-color: rgb(0, 5, 2);
+}
+
+@media (color-gamut: p3) {
+.random {
+
+	border-color: color(display-p3 0 0.02032 0.00493);
+}
 }
 
 .contrast-color {
@@ -779,3 +786,20 @@
 	initial-value: black;
 	syntax: "<color>";
 }
+
+.apply {
+	width: 10px;
+	color: lime;
+}
+
+@media screen {
+
+.apply {
+		color: green;
+}
+	}
+
+.apply {
+
+	height: 20px;
+}

plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css

@@ -768,12 +768,19 @@
 
 .random {
 	color: rgb(
-		35,
-		180,
-		215
+		85,
+		75,
+		85
 	);
 
-	border-color: rgb(239, 141, 154);
+	border-color: rgb(0, 5, 2);
+}
+
+@media (color-gamut: p3) {
+.random {
+
+	border-color: color(display-p3 0 0.02032 0.00493);
+}
 }
 
 .contrast-color {
@@ -797,3 +804,20 @@
 	initial-value: black;
 	syntax: "<color>";
 }
+
+.apply {
+	width: 10px;
+	color: lime;
+}
+
+@media screen {
+
+.apply {
+		color: green;
+}
+	}
+
+.apply {
+
+	height: 20px;
+}