Angular: v4.1.13 breaks styling

[TobyPerplex]

With Angular and Postcss + Tailwind 4, when I upgrade from v4.1.12 to v4.1.13 all styling breaks

On v4.1.12:

<style>
/* src/app/modules/configurator/custom-element/configurator.component.css */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root,
  :host {
  all my vars are here 
  }
}

all my styling is here
</style>

On v4.1.13:

<style>
/* src/app/modules/configurator/custom-element/configurator.component.css */
/*# sourceMappingURL=/configurator.component.css.map */
</style>

Version:

"@tailwindcss/postcss": "4.1.13"
"postcss": "8.5.6"
Angular CLI: 20.3.2
Node: 22.17.0
Package Manager: pnpm 10.2.0
OS: macOS Tahoe 26.0

[RobinMalfait]

Hey! Can you share a minimal reproduction repo so we can take a look?

[TobyPerplex]

Hey, it was due to:

@custom-variant OSdark (@media (prefers-color-scheme: dark));
@custom-variant OSlight (@media (prefers-color-scheme: light));
@custom-variant HDcolor (@media (dynamic-range: high));

which I got from https://github.com/argyleink/open-props/blob/main/src/props.media.css

all I had to do was change the notation:

@custom-variant osDark (@media (prefers-color-scheme: dark));
@custom-variant osLight (@media (prefers-color-scheme: light));
@custom-variant hdColor (@media (dynamic-range: high));