Postcss-gap-properties not working anymore since 2 days on Angular 13.3.8 build

[Alyyc85]

Reproduction link

No response

Bug description

Without any changes on scss files we run into impossibility to serve or build some packages with Angular V 13.3.8 whic use this in webpack process

The error occours in index.cjs file at line 10

if (!o.parent.some((e => "display" === e.prop.toLowerCase() && "grid" === e.value.toLowerCase()))) return;

where e.prop is undefined so it throws error

Here the objects collected from launching script with debugger attached:

Actual Behavior

No response

Expected Behavior

No response

Can you reproduce it with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

No response

npx Output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Gap Properties

Plugin version

3.0.4

What OS are you experiencing this on?

Windows

Node Version

14.18.2

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

@Alyyc85 just to confirm, are you using nested CSS around gap properties?

[Alyyc85]

@Alyyc85 just to confirm, are you using nested CSS around gap properties?

Here a sample of file

@mixin ctrlContainer { .ctrl-container { /* autoprefixer: off */ display: grid; grid-template-rows: minmax($ctrl-height, auto); grid-template-columns: 180px auto; column-gap: $u * 0.5; margin-bottom: 8px; align-items: start; max-width: 650px; &.full-width { max-width: 100%; } &.no-label { grid-template-columns: 1fr; &.column { grid-template-rows: auto; } } &.has-error { margin-bottom: $u * 2; } &.bool { max-width: none; } .controls { position: relative; } .ctrl-label { text-align: right; color: #6e6e6e; position: relative; line-height: 1; padding-right: 2px; padding-top: 9px; span { color: $error; position: absolute; top: 0; right: -2px; } i { left: 0; top: calc(50% - 6px); color: transparentize($info, 0.6); cursor: help; } } }

[romainmenke]

yup, nesting :)

Thank you for the extra info!

[SC-JC]

was about to report the same error, when i debugged it, both e.prop and e.value were undefined, manually adding
"postcss-gap-properties": "3.0.3",
to my package.json temporarily fixes the problem.
The angular-devkit has a dependency on
"postcss-preset-env": "7.2.3",
which has a depdendency on
"postcss-gap-properties": "^3.0.2",
so will automatically install 3.0.4 when you run a fresh npm install

[Antonio-Laguna]

@SC-JC and @Alyyc85 this has just been published as 3.0.5. Could you do a fresh install (or manually bump the dependency of postcss-gap-properties) and test? Hopefully it should be fixed :)

[SC-JC]

@Antonio-Laguna it looks like 3.0.5 resolved the issue :)

[Alyyc85]

@Antonio-Laguna yep with 3.0.5, downloaded in fresh npm install, it works, Thanks!

[romainmenke]

Thank you for reporting this @Alyyc85.