🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Description

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.

Caused by cssnano/cssnano#730

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;
}