-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Angular: v4.1.13 breaks styling #18964
-
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
Beta Was this translation helpful? Give feedback.
All reactions
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));
Replies: 1 comment 1 reply
-
Hey! Can you share a minimal reproduction repo so we can take a look?
Beta Was this translation helpful? Give feedback.
All reactions
-
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));
Beta Was this translation helpful? Give feedback.