Button: Constructed stylesheet doesn't rewrite nesting selector (&)

[Maximilian-R]

Bug already reported?

• I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

Core

Component name

button

Description

the button component styles includes some nested rules, eg:

The css is using the nesting selelctor which only is supported from iOS 17.2, causing lower version to not apply the styles.

Steps To Reproduce

Reproduce with Constructed Stylesheet

1. with browserstack, open a device with iOS < 17.2 to make sure constructed stylesheets will be used.
2. go to https://seb.se/juridik-och-sakerhet/sa-har-anvander-vi-kakor
3. scroll to the button for "Ändra inställningar och samtycke för kakor"
4. inspect the element - nested rules won't appear in the element style tab.

Reproduce with Inline Stylestags (polyfill for Constructed Stylesheet)

1. with browserstack, open a device with iOS < 16.4 to make sure constructed stylesheets will be replaced by inline style tags.
2. go to https://seb.se/juridik-och-sakerhet/sa-har-anvander-vi-kakor
3. scroll to the button for "Ändra inställningar och samtycke för kakor"
4. inspect the element - nested rules can be found in the last inline style-tag but it won't appear in the element style tab.

Current Behaviour

Missing styles. Eg no focus/hover/active state nor text-overflow on text for the Button component for iOS <17.2

Expected Behaviour

css-styles should be compiled to support at least iOS 15.