Skip to content

Add option to output styles inline #11395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
filipbech opened this issue Jun 28, 2018 · 9 comments · Fixed by #19449
Closed

Add option to output styles inline #11395

filipbech opened this issue Jun 28, 2018 · 9 comments · Fixed by #19449
Assignees
@alan-agius4
Labels
area: @angular-devkit/build-angular devkit/build-angular:browser feature Issue that requests a new feature needs: investigation Requires some digging to determine if action is needed
Milestone
Backlog

Comments

@filipbech
Copy link

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
@clydin clydin added the feature Issue that requests a new feature label Jun 28, 2018
@alan-agius4 alan-agius4 mentioned this issue Sep 21, 2018
Closed
@christianliebel
Copy link
Contributor

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

This was referenced Nov 15, 2018
Closed
Closed
@ngbot ngbot bot added this to the Backlog milestone Jan 4, 2019
@alan-agius4 alan-agius4 mentioned this issue Jan 4, 2019
Closed
@slavoroi
Copy link

slavoroi commented Oct 28, 2019 •
edited
Loading

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.

@kyliau kyliau added triage #1 needs: discussion On the agenda for team meeting to determine next steps devkit/build-angular:browser labels May 27, 2020
@alan-agius4 alan-agius4 mentioned this issue May 29, 2020
Closed
@naveedahmed1
Copy link

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="https://github.com/lazy-styles.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'"> for lazy-styles.scss.

@clydin clydin mentioned this issue May 30, 2020
Closed
@dgp1130 dgp1130 added needs: investigation Requires some digging to determine if action is needed and removed needs: discussion On the agenda for team meeting to determine next steps labels Jun 5, 2020
@spock123
Copy link

spock123 commented Oct 25, 2020 •
edited
Loading

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
Copy link
Collaborator

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.

@alan-agius4 alan-agius4 self-assigned this Oct 25, 2020
@spock123
Copy link

spock123 commented Oct 25, 2020 •
edited
Loading

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

@alan-agius4 alan-agius4 mentioned this issue Nov 20, 2020
Merged
clydin pushed a commit that referenced this issue Dec 4, 2020
@alan-agius4 @clydin
feat(@angular-devkit/build-angular): enable inlining of critical CSS …
eb30a92 
…optimizations

This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (#18730)

Inlining of critical CSS is turned off by default. To opt-in this feature set `inlineCritical` to `true`.

Example:
```json
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": {
      "styles": {
        "minify": true,
        "inlineCritical": true,
       }
    },
```

To learn more about critical CSS see;
https://web.dev/defer-non-critical-css
https://web.dev/extract-critical-css/

In a future version of the Angular CLI `inlineCritical` will be enabled by default.

Closes: #17966
Closes: #11395
Closes: #19445
@naveedahmed1
Copy link

Amazing work @alan-agius4 @clydin 👍

@spock123
Copy link

spock123 commented Dec 5, 2020

I'm gonna pour myself a gin/tonic and celebrate this. Thank you @alan-agius4 !

@hisham hisham mentioned this issue Dec 7, 2020
Closed
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 5, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
area: @angular-devkit/build-angular devkit/build-angular:browser feature Issue that requests a new feature needs: investigation Requires some digging to determine if action is needed
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

feat(@angular-devkit/build-angular): enable inlining of critical CSS optimizations
9 participants
@spock123 @filipbech @kyliau @christianliebel @naveedahmed1 @dgp1130 @slavoroi @alan-agius4 @clydin