Duplicate global styles in production build

[JohnKis]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [x] build
• [ ] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] extract-i18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 11.2.10 ### Description Production builds on @angular/cli@12.0.0 generate duplicate global styles in index.html. In addition to this the `` tag loading the stylesheet has an inline event handler which forces users to weaken the app's CSP. ## 🔬 Minimal Reproduction ``` ng new angular12-test cd angular12-test # Create at least one rule in style.css echo "html { position: relative; }" >> src/styles.css ng build --configuration production ``` This generates the following index.html file in the dist folder: ```html ``` Observe the the stylesheet is included: - inlined - as a link for `media="print"` with an inline event handler - in a `

[alan-agius4]

Hi @JohnKis,

This is the expected default behaviour since version 12 and is due to critical css inlining and helps reduce. In version 11, this was opt-in behaviour.

You can read more about this;

• [RFC] Eliminate Render Blocking Requests
• Extract critical CSS

You can opt-out of this feature at any time see: https://angular.io/guide/workspace-config#optimization-configuration

[alan-agius4]

See also: https://github.com/angular/angular-cli/issues/20864

[JohnKis]

Thank you @alan-agius4. I'll apply the configuration change

[angular-automatic-lock-bot[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.}