Invalid CSS syntax in latest builds

[aaronadamsCA]

Summary

Since Polaris v12.22.0, our app builds fail due to invalid CSS syntax in this package.

This file: https://unpkg.com/@shopify/polaris@12.22.1/build/esm/styles.css

Contains this code:

@media (--p-breakpoints-md-up) and print{
    .Polaris-Frame--hasNav .Polaris-Frame__Main{
        padding-left:0;
    }
      }

Expected behavior

The media query should be something valid, like @media print and (min-width: 10px).

Actual behavior

The invalid media query breaks our CSS preprocessing (example).

Steps to reproduce

No response

Are you using React components?

None

Polaris version number

v12.22.1

Browser

No response

Device

No response

[bluedge]

Any update on this?
We cannot upgrade because of this. We have to stick to 12.20.0

[bluedge]

This is still an issue on the last version @shopify/polaris: 13.1.0

[bluedge]

We just tried the v13.1.1 it does not seems to fix the issue. @kyledurand

-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
expected media condition in parentheses.
     ╷
8332 │ @media (--p-breakpoints-md-up) and print{

[kyledurand]

It wasn't included in 13.1.1 because that version needed to ship as a standalone revert. It will be included in the next version which you can follow along with here

[kyledurand]

If you want to test the snapshot that was just created: "@shopify/polaris": "0.0.0-snapshot-20240419190223"

If that works I can ship that as a patch today

[bluedge]

@kyledurand Thank you for the clarification. It works fine with 0.0.0-snapshot-20240419190223

[kyledurand]

Thanks all and sorry this took so long. Didn't see the issue til today. v13.1.2 should be out in < 5 mins and your builds should be 🟢

[bluedge]

@kyledurand v13.1.2 works great - Thank you!

[RenFraser]

For anyone else that stumbles across this, I could use v12 by adjusting my webpack config.

I was using the css-loader and sass-loader for css files and sass/scss. After splitting the into two "test" objects, one for css, one for sass/scss and using the respective loaders, the files could be parsed correctly.