Add option to output styles inline #11395

Activity

1. clydin

   added

   featureLabel used to distinguish feature request from other issuesLabel used to distinguish feature request from other issues

   on Jun 28, 2018
2. christianliebel commented on Sep 21, 2018

   

   christianliebel

   on Sep 21, 2018

   Contributor

   More actions

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

   added

   area: @angular-devkit/build-angular

   on Jan 4, 2019
4. ngbot

   added this to the Backlog milestone on Jan 4, 2019
5. slavoroi commented on Oct 28, 2019

   

   slavoroi

   on Oct 28, 2019

   Last edited by slavoroi

   More actions

   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.
6. kyliau

   added

   triage #1

   needs: discussionOn the agenda for team meeting to determine next stepsOn the agenda for team meeting to determine next steps

   devkit/build-angular:browser

   on May 27, 2020
7. naveedahmed1 commented on May 29, 2020

   

   naveedahmed1

   on May 29, 2020

   More actions

   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.

   👍React with 👍1Reacted by Lars Rye Jeppesen
8. dgp1130

   added

   needs: investigationRequires some digging to determine if action is neededRequires some digging to determine if action is needed

   and removed

   needs: discussionOn the agenda for team meeting to determine next stepsOn the agenda for team meeting to determine next steps

   on Jun 5, 2020
9. spock123 commented on Oct 25, 2020

   

   spock123

   on Oct 25, 2020

   Last edited by spock123

   More actions

   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
10. alan-agius4 commented on Oct 25, 2020

    

    alan-agius4

    on Oct 25, 2020

    Collaborator

    More actions

    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.

    🎉React with 🎉3Reacted by Minijus L, Toni Villena and Lars Rye Jeppesen
11. alan-agius4

    self-assigned this

    on Oct 25, 2020
12. spock123 commented on Oct 25, 2020

    

    spock123

    on Oct 25, 2020

    Last edited by spock123

    More actions

    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
13. clydin

    closed this as completedin #19449on Dec 4, 2020
14. clydin

    added a commit that references this issue on Dec 4, 2020

    feat(@angular-devkit/build-angular): enable inlining of critical CSS …

    ...

    This issue will close once commit eb30a92 is merged into the 'main' branch.

    eb30a92
15. naveedahmed1 commented on Dec 4, 2020

    

    naveedahmed1

    on Dec 4, 2020

    More actions

    Amazing work @alan-agius4 @clydin 👍

    👍React with 👍1Reacted by Lars Rye Jeppesen
16. spock123 commented on Dec 5, 2020

    

    spock123

    on Dec 5, 2020

    More actions

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

    👍React with 👍2Reacted by Alan Agius and Toni Villena
17. angular-automatic-lock-bot commented on Jan 5, 2021

    

    angular-automatic-lock-botBot

    on Jan 5, 2021

    More actions

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

    locked and limited conversation to collaborators on Jan 5, 2021