Css generated for Firefox ReadOnly to -moz-readonly does not work after upgrading angular 8 to 9

[albanlorillard]

🐞 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?

Yes, after upgrading from Angular 8 to 9, dedicated css for firefox about "ReadOnly" when associate with other rules is not well generated during ng serve.

Description

This issue appear only on Firefox.
In Angular 8, a piece of style (from SCSS) code is automatically generated to ensure the compatibility with firefox about :read-only. Code is duplicated with :-moz-read-only . (with firefox prefixe equivalent)

In Angular 9, this piece of style code is duplicated alone, in consequence, all the css block code is not duplicated, then, not interpreted.
(I supposed first that was due to browserslist package, but package version is equal)

To illustrate, this code :

.element1:focus,
.element1:read-only {
  background-color: red;
}

Is perfectly generated in angular cli 8:

.element1[_ngcontent-rga-c0]:-moz-read-only,
.element1[_ngcontent-rga-c0]:focus {
 background-color:red
}
.element1[_ngcontent-rga-c0]:focus,
.element1[_ngcontent-rga-c0]:read-only {
 background-color:red
}

But wrongly generated in angular cli 9

.element1[_ngcontent-wxy-c0]:-moz-read-only {
 background-color:red
}
.element1[_ngcontent-wxy-c0]:focus,
.element1[_ngcontent-wxy-c0]:read-only {
 background-color:red
}

In consequence, the other css style associate to the same css rule, :focus, is never interpreted on firefox due to :read-only which is unknown for this browser.

🔬 Minimal Reproduction

Here is a repository with angular 9, where the bug appear :
https://github.com/albanlorillard/angular9-readonly-bug

Here is a repository with angular 8, where the bug NOT appear :
https://github.com/albanlorillard/angular8-readonly-bug

In both case,
use ng serve --prod
and run with Firefox
inspect in the style editor.

🔥 Exception or Error

No exception.

🌍 Your Environment

Angular CLI: 9.1.0
Node: 12.14.1
OS: win32 x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?
Specific on Firefox browser.
I test on Firefox developer 75.0b9 (64 bits)
And Firefox 73.0 (64-bit)

[alan-agius4]

Hi @albanlorillard,

I'm sorry, but this issue is not caused by Angular CLI. Please contact the author(s) of the autoprefixer project or file an issue on their issue tracker.

You can try to reproduce the issue using: https://autoprefixer.github.io, as a workaround you should be able to write the expected prefixed output directly.

[albanlorillard]

Hi @alan-agius4 ,
Thanks for your answer, I reported to them (postcss/autoprefixer#1301)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}