CSS optimization breaks when :host-context is included #18672

mcalmus · 2020-09-01T14:13:46Z

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Description

A clear and concise description of the problem...

I have a CSS file that is shared between two components, one that uses default encapsulation and one that uses NONE. I have two lines in the CSS as follows:

.darkMode .myLogo {
  color: white;
}
:host-context(.darkMode) .myLogo {
  color: white;
}

This works fine with dev/unoptimized builds. However, when done with a prod/optimized build the resulting CSS combines the two selectors:

.darkMode .myLogo,:host-context(.darkMode) .myLogo{color:white}

The selector is essentially ignored by the browser.

For the component using default encapsulation it similarly works fine regardless of whether optimized or not.

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment




Angular CLI: 10.0.8
node: 10.16.3
OS: win32 x64
Angular: 10.0.14

Anything else relevant?

All that I've tried exhibit same issue.

no.

alan-agius4 · 2020-09-01T16:15:25Z

Caused by cssnano/cssnano#730

nomeaning777 · 2020-09-09T02:30:49Z

I faced the same issue. Workaround is adding an important comment to the :host-context.

.darkMode .myLogo {
    color: white;
}
:host-context(.darkMode) .myLogo {
    /*! Dummy comment to avoid merge host-context and other by cssnano */
    color: white;
}

alan-agius4 added blocked on upstream comp: devkit/build-angular devkit/build-angular: browser freq1: low type: bug/fix labels Sep 1, 2020

ngbot bot modified the milestone: needsTriage Sep 1, 2020

alan-agius4 added the severity3: broken label Sep 1, 2020

ngbot bot modified the milestones: needsTriage, Backlog Sep 1, 2020

angular / angular-cli

CSS optimization breaks when :host-context is included #18672

CSS optimization breaks when :host-context is included #18672

mcalmus commented Sep 1, 2020

alan-agius4 commented Sep 1, 2020

nomeaning777 commented Sep 9, 2020

angular / angular-cli

Join GitHub today

CSS optimization breaks when :host-context is included #18672

CSS optimization breaks when :host-context is included #18672

Comments

mcalmus commented Sep 1, 2020

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented Sep 1, 2020

nomeaning777 commented Sep 9, 2020

Essential cookies

Always active

Analytics cookies

Command (mark with an `x`)