Skip to content

Commit a3a3e34

Browse files
romainmenkeromainmenke
authored
postcss-preset-env: add postcss-mixins (#1764)
1 parent be12be0 commit a3a3e34

40 files changed

Lines changed: 762 additions & 137 deletions

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changes to PostCSS Preset Env
22

3+
### Unreleased (minor)
4+
5+
- Added `@csstools/postcss-mixins` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-mixins#readme) for usage details.
6+
- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`8.7.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#870-january-14-2026)
7+
38
### 11.0.1
49

510
_January 14, 2026_

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
4949
| [<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) |
5050
| [<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) |
5151
| [<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) |
52+
| [<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) |
5253
| [<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) |
5354
| [<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) |
5455
| [<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‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,29 @@ import type { pluginOptions as pluginOptions_40 } from '@csstools/postcss-logica
3737
import type { pluginOptions as pluginOptions_41 } from '@csstools/postcss-logical-viewport-units';
3838
import type { pluginOptions as pluginOptions_42 } from '@csstools/postcss-media-queries-aspect-ratio-number-values';
3939
import type { pluginOptions as pluginOptions_43 } from '@csstools/postcss-media-minmax';
40-
import type { pluginOptions as pluginOptions_44 } from '@csstools/postcss-nested-calc';
41-
import type { pluginOptions as pluginOptions_45 } from 'postcss-nesting';
42-
import type { pluginOptions as pluginOptions_46 } from 'postcss-selector-not';
43-
import type { pluginOptions as pluginOptions_47 } from '@csstools/postcss-oklab-function';
44-
import type { pluginOptions as pluginOptions_48 } from 'postcss-overflow-shorthand';
45-
import type { pluginOptions as pluginOptions_49 } from 'postcss-place';
40+
import type { pluginOptions as pluginOptions_44 } from '@csstools/postcss-mixins';
41+
import type { pluginOptions as pluginOptions_45 } from '@csstools/postcss-nested-calc';
42+
import type { pluginOptions as pluginOptions_46 } from 'postcss-nesting';
43+
import type { pluginOptions as pluginOptions_47 } from 'postcss-selector-not';
44+
import type { pluginOptions as pluginOptions_48 } from '@csstools/postcss-oklab-function';
45+
import type { pluginOptions as pluginOptions_49 } from 'postcss-overflow-shorthand';
4646
import type { pluginOptions as pluginOptions_5 } from 'css-blank-pseudo';
47-
import type { pluginOptions as pluginOptions_50 } from '@csstools/postcss-position-area-property';
48-
import type { pluginOptions as pluginOptions_51 } from 'css-prefers-color-scheme';
49-
import type { pluginOptions as pluginOptions_52 } from '@csstools/postcss-property-rule-prelude-list';
50-
import type { pluginOptions as pluginOptions_53 } from '@csstools/postcss-random-function';
51-
import type { pluginOptions as pluginOptions_54 } from 'postcss-color-rebeccapurple';
52-
import type { pluginOptions as pluginOptions_55 } from '@csstools/postcss-relative-color-syntax';
53-
import type { pluginOptions as pluginOptions_56 } from '@csstools/postcss-scope-pseudo-class';
54-
import type { pluginOptions as pluginOptions_57 } from '@csstools/postcss-sign-functions';
55-
import type { pluginOptions as pluginOptions_58 } from '@csstools/postcss-stepped-value-functions';
56-
import type { pluginOptions as pluginOptions_59 } from '@csstools/postcss-syntax-descriptor-syntax-production';
47+
import type { pluginOptions as pluginOptions_50 } from 'postcss-place';
48+
import type { pluginOptions as pluginOptions_51 } from '@csstools/postcss-position-area-property';
49+
import type { pluginOptions as pluginOptions_52 } from 'css-prefers-color-scheme';
50+
import type { pluginOptions as pluginOptions_53 } from '@csstools/postcss-property-rule-prelude-list';
51+
import type { pluginOptions as pluginOptions_54 } from '@csstools/postcss-random-function';
52+
import type { pluginOptions as pluginOptions_55 } from 'postcss-color-rebeccapurple';
53+
import type { pluginOptions as pluginOptions_56 } from '@csstools/postcss-relative-color-syntax';
54+
import type { pluginOptions as pluginOptions_57 } from '@csstools/postcss-scope-pseudo-class';
55+
import type { pluginOptions as pluginOptions_58 } from '@csstools/postcss-sign-functions';
56+
import type { pluginOptions as pluginOptions_59 } from '@csstools/postcss-stepped-value-functions';
5757
import type { pluginOptions as pluginOptions_6 } from '@csstools/postcss-cascade-layers';
58-
import type { pluginOptions as pluginOptions_60 } from '@csstools/postcss-system-ui-font-family';
59-
import type { pluginOptions as pluginOptions_61 } from '@csstools/postcss-text-decoration-shorthand';
60-
import type { pluginOptions as pluginOptions_62 } from '@csstools/postcss-trigonometric-functions';
61-
import type { pluginOptions as pluginOptions_63 } from '@csstools/postcss-unset-value';
58+
import type { pluginOptions as pluginOptions_60 } from '@csstools/postcss-syntax-descriptor-syntax-production';
59+
import type { pluginOptions as pluginOptions_61 } from '@csstools/postcss-system-ui-font-family';
60+
import type { pluginOptions as pluginOptions_62 } from '@csstools/postcss-text-decoration-shorthand';
61+
import type { pluginOptions as pluginOptions_63 } from '@csstools/postcss-trigonometric-functions';
62+
import type { pluginOptions as pluginOptions_64 } from '@csstools/postcss-unset-value';
6263
import type { pluginOptions as pluginOptions_7 } from 'postcss-attribute-case-insensitive';
6364
import type { pluginOptions as pluginOptions_8 } from '@csstools/postcss-color-function';
6465
import type { pluginOptions as pluginOptions_9 } from '@csstools/postcss-color-function-display-p3-linear';
@@ -250,50 +251,52 @@ export declare type pluginsOptions = {
250251
'media-queries-aspect-ratio-number-values'?: subPluginOptions<pluginOptions_42>;
251252
/** plugin options for "@csstools/postcss-media-minmax" */
252253
'media-query-ranges'?: subPluginOptions<pluginOptions_43>;
254+
/** plugin options for "@csstools/postcss-mixins" */
255+
'mixins'?: subPluginOptions<pluginOptions_44>;
253256
/** plugin options for "@csstools/postcss-nested-calc" */
254-
'nested-calc'?: subPluginOptions<pluginOptions_44>;
257+
'nested-calc'?: subPluginOptions<pluginOptions_45>;
255258
/** plugin options for "postcss-nesting" */
256-
'nesting-rules'?: subPluginOptions<pluginOptions_45>;
259+
'nesting-rules'?: subPluginOptions<pluginOptions_46>;
257260
/** plugin options for "postcss-selector-not" */
258-
'not-pseudo-class'?: subPluginOptions<pluginOptions_46>;
261+
'not-pseudo-class'?: subPluginOptions<pluginOptions_47>;
259262
/** plugin options for "@csstools/postcss-oklab-function" */
260-
'oklab-function'?: subPluginOptions<pluginOptions_47>;
263+
'oklab-function'?: subPluginOptions<pluginOptions_48>;
261264
/** plugin options for "postcss-opacity-percentage" */
262265
'opacity-percentage'?: subPluginOptions<postcssOpacityPercentageOptions>;
263266
/** plugin options for "postcss-overflow-shorthand" */
264-
'overflow-property'?: subPluginOptions<pluginOptions_48>;
267+
'overflow-property'?: subPluginOptions<pluginOptions_49>;
265268
/** plugin options for "postcss-replace-overflow-wrap" */
266269
'overflow-wrap-property'?: subPluginOptions<postcssReplaceOverflowWrapOptions>;
267270
/** plugin options for "postcss-place" */
268-
'place-properties'?: subPluginOptions<pluginOptions_49>;
271+
'place-properties'?: subPluginOptions<pluginOptions_50>;
269272
/** plugin options for "@csstools/postcss-position-area-property" */
270-
'position-area-property'?: subPluginOptions<pluginOptions_50>;
273+
'position-area-property'?: subPluginOptions<pluginOptions_51>;
271274
/** plugin options for "css-prefers-color-scheme" */
272-
'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_51>;
275+
'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_52>;
273276
/** plugin options for "@csstools/postcss-property-rule-prelude-list" */
274-
'property-rule-prelude-list'?: subPluginOptions<pluginOptions_52>;
277+
'property-rule-prelude-list'?: subPluginOptions<pluginOptions_53>;
275278
/** plugin options for "@csstools/postcss-random-function" */
276-
'random-function'?: subPluginOptions<pluginOptions_53>;
279+
'random-function'?: subPluginOptions<pluginOptions_54>;
277280
/** plugin options for "postcss-color-rebeccapurple" */
278-
'rebeccapurple-color'?: subPluginOptions<pluginOptions_54>;
281+
'rebeccapurple-color'?: subPluginOptions<pluginOptions_55>;
279282
/** plugin options for "@csstools/postcss-relative-color-syntax" */
280-
'relative-color-syntax'?: subPluginOptions<pluginOptions_55>;
283+
'relative-color-syntax'?: subPluginOptions<pluginOptions_56>;
281284
/** plugin options for "@csstools/postcss-scope-pseudo-class" */
282-
'scope-pseudo-class'?: subPluginOptions<pluginOptions_56>;
285+
'scope-pseudo-class'?: subPluginOptions<pluginOptions_57>;
283286
/** plugin options for "@csstools/postcss-sign-functions" */
284-
'sign-functions'?: subPluginOptions<pluginOptions_57>;
287+
'sign-functions'?: subPluginOptions<pluginOptions_58>;
285288
/** plugin options for "@csstools/postcss-stepped-value-functions" */
286-
'stepped-value-functions'?: subPluginOptions<pluginOptions_58>;
289+
'stepped-value-functions'?: subPluginOptions<pluginOptions_59>;
287290
/** plugin options for "@csstools/postcss-syntax-descriptor-syntax-production" */
288-
'syntax-descriptor-syntax-production'?: subPluginOptions<pluginOptions_59>;
291+
'syntax-descriptor-syntax-production'?: subPluginOptions<pluginOptions_60>;
289292
/** plugin options for "@csstools/postcss-system-ui-font-family" */
290-
'system-ui-font-family'?: subPluginOptions<pluginOptions_60>;
293+
'system-ui-font-family'?: subPluginOptions<pluginOptions_61>;
291294
/** plugin options for "@csstools/postcss-text-decoration-shorthand" */
292-
'text-decoration-shorthand'?: subPluginOptions<pluginOptions_61>;
295+
'text-decoration-shorthand'?: subPluginOptions<pluginOptions_62>;
293296
/** plugin options for "@csstools/postcss-trigonometric-functions" */
294-
'trigonometric-functions'?: subPluginOptions<pluginOptions_62>;
297+
'trigonometric-functions'?: subPluginOptions<pluginOptions_63>;
295298
/** plugin options for "@csstools/postcss-unset-value" */
296-
'unset-value'?: subPluginOptions<pluginOptions_63>;
299+
'unset-value'?: subPluginOptions<pluginOptions_64>;
297300
};
298301

299302
/** postcss-clamp plugin options */

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

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"@csstools/postcss-logical-viewport-units": "^4.0.0",
7070
"@csstools/postcss-media-minmax": "^3.0.0",
7171
"@csstools/postcss-media-queries-aspect-ratio-number-values": "^4.0.0",
72+
"@csstools/postcss-mixins": "^1.0.0",
7273
"@csstools/postcss-nested-calc": "^5.0.0",
7374
"@csstools/postcss-normalize-display-values": "^5.0.0",
7475
"@csstools/postcss-oklab-function": "^5.0.0",

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,11 @@
219219
"id": "media-queries-aspect-ratio-number-values",
220220
"importName": "postcssMediaQueriesAspectRatioNumberValues"
221221
},
222+
{
223+
"packageName": "@csstools/postcss-mixins",
224+
"id": "mixins",
225+
"importName": "postcssMixins"
226+
},
222227
{
223228
"packageName": "postcss-nesting",
224229
"id": "nesting-rules",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// ids ordered by required execution, then alphabetically
22
export default [
3+
'mixins',
4+
35
'custom-media-queries',
46
'environment-variables', // run environment-variables here to access transpiled custom media params and properties
57
'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‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import postcssLogicalResize from '@csstools/postcss-logical-resize';
4343
import postcssLogicalViewportUnits from '@csstools/postcss-logical-viewport-units';
4444
import postcssMediaQueriesAspectRatioNumberValues from '@csstools/postcss-media-queries-aspect-ratio-number-values';
4545
import postcssMediaMinmax from '@csstools/postcss-media-minmax';
46+
import postcssMixins from '@csstools/postcss-mixins';
4647
import postcssNestedCalc from '@csstools/postcss-nested-calc';
4748
import postcssNesting from 'postcss-nesting';
4849
import postcssSelectorNot from 'postcss-selector-not';
@@ -115,6 +116,7 @@ export const pluginsById = new Map(
115116
['logical-viewport-units', postcssLogicalViewportUnits],
116117
['media-queries-aspect-ratio-number-values', postcssMediaQueriesAspectRatioNumberValues],
117118
['media-query-ranges', postcssMediaMinmax],
119+
['mixins', postcssMixins],
118120
['nested-calc', postcssNestedCalc],
119121
['nesting-rules', postcssNesting],
120122
['not-pseudo-class', postcssSelectorNot],

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,11 @@ export default [
219219
'id': 'media-queries-aspect-ratio-number-values',
220220
'importName': 'postcssMediaQueriesAspectRatioNumberValues',
221221
},
222+
{
223+
'packageName': '@csstools/postcss-mixins',
224+
'id': 'mixins',
225+
'importName': 'postcssMixins',
226+
},
222227
{
223228
'packageName': 'postcss-nesting',
224229
'id': 'nesting-rules',

0 commit comments

Comments
 (0)