Add option to output styles inline

[filipbech]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Area

- [x] devkit
- [ ] schematics

Desired functionality

It would be cool if there was a build-option that would take the processed/minified css and put it inline in a <style>-element in index.html instead of as a seperate file.
Useful when it doesn't change so often, and the styles are limited.

Rob asked me to make a Feature-request... https://twitter.com/robwormald/status/1012084975766626304

Mention any other details that might be useful

[christianliebel]

Useful for critical/“above-the-fold” CSS. Maybe it’s also possible to process the contents of a style tag in src/index.html?

[slavoroi]

What is the status with this ticket?
It will be amazing if we could have an option:

"styles": [
      "src/styles.scss"
  ],
"inline-styles": [
      "src/inline-styles.scss"
  ]

Or

"styles": [
      { "input": "src/inline-styles.scss", "inline": true }
  ]

And it will add the styles in the index.html inline in the head with
ng build ---prod.

[naveedahmed1]

I would also suggest adding inline and preload options in styles in angular.json file

"styles": [
      { "input": "src/critical-path-styles.scss", "inline": true },
      { "input": "src/lazy-styles.scss", "preload": true }
  ]

With above settings, Angular CLI should inline the contents of critical-path-styles.scss in head tag, and it should generate <link href="/lazy-styles.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'"> for lazy-styles.scss.

[spock123]

Hi, is there any hope of this ever becoming a feature?
Running lighthouse tests just gives red lights all over because of this. It's a pretty common thing to inline resources and it would be a great cli feature.

I would add that inlining the main bundle would also be a great feature.

Thanks again

[alan-agius4]

Hi,

We did an RFC for this see: #18730.

In the prerelease version of Angular CLI v11 inlining of fonts is already available, other parts of the RFC are scheduled to be available in 11.1.

[spock123]

Hi,

We did an RFC for this see: #18730.

In the prerelease version of Angular CLI v11 inlining of fonts is already available, other parts of the RFC are scheduled to be available in 11.1.

Yeah I actually heard @mgechev mention it on the latest Angular podcast - I'm so happy - this is YUUGE guys!
Thank you so much