Skip to content

fix(material/badge): avoid emitting the structural styles more than once - #23011

Merged
mmalerba merged 1 commit into
angular:masterfrom
crisbeto:badge-structural-styles-dedupe
Jun 22, 2021
Merged

fix(material/badge): avoid emitting the structural styles more than once#23011
mmalerba merged 1 commit into
angular:masterfrom
crisbeto:badge-structural-styles-dedupe

Conversation

@crisbeto

Copy link
Copy Markdown
Member

The badge structural styles are currently in the theme, because the badge is a directive and Angular doesn't support associating styles with directives. The problem is that it'll cause the same structural styles to be emitted multiple times unnecessarily.

These changes add some logic that will try to prevent the structural styles from being emitted more than once.

Disclaimer: this change might not work across multiple compilation units, however I still think it's worthwhile, because the apps that only have one global stylesheet for their theme will get the benefit, while everybody else will work the same as before. These changes shave off more than 4kb of minified CSS.

The badge structural styles are currently in the theme, because the badge is a directive and Angular doesn't support associating styles with directives. The problem is that it'll cause the same structural styles to be emitted multiple times unnecessarily.

These changes add some logic that will try to prevent the structural styles from being emitted more than once.

**Disclaimer:** this change might not work across multiple compilation units, however I still think it's worthwhile, because the apps that only have one global stylesheet for their theme will get the benefit, while everybody else will work the same as before. These changes shave off more than 4kb of minified CSS.
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Jun 18, 2021
@crisbeto
crisbeto requested a review from jelbourn June 18, 2021 13:31
@google-cla google-cla Bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jun 18, 2021

@jelbourn jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this still work with the Sass module system? My understanding was that variables are re-initialized every time they're imported via the module system, so this trick of keeping state as the compilation advances doesn't work any more.

@crisbeto

crisbeto commented Jun 19, 2021

Copy link
Copy Markdown
Member Author

I added the !default based off of the following comment from MDC's emit-once mixin:

// This variable is not intended to be overridden externally; it uses !default to avoid being reset
// every time this file is imported.

Even if it does get reset, it'll keep working like it does today, but at least some users will get the benefit of less generated CSS.

@jelbourn jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added the action: merge The PR is ready for merge by the caretaker label Jun 21, 2021
@mmalerba
mmalerba merged commit b7db96c into angular:master Jun 22, 2021
mmalerba pushed a commit that referenced this pull request Jun 22, 2021
…nce (#23011)

The badge structural styles are currently in the theme, because the badge is a directive and Angular doesn't support associating styles with directives. The problem is that it'll cause the same structural styles to be emitted multiple times unnecessarily.

These changes add some logic that will try to prevent the structural styles from being emitted more than once.

**Disclaimer:** this change might not work across multiple compilation units, however I still think it's worthwhile, because the apps that only have one global stylesheet for their theme will get the benefit, while everybody else will work the same as before. These changes shave off more than 4kb of minified CSS.

(cherry picked from commit b7db96c)
mmalerba pushed a commit that referenced this pull request Jun 22, 2021
…nce (#23011)

The badge structural styles are currently in the theme, because the badge is a directive and Angular doesn't support associating styles with directives. The problem is that it'll cause the same structural styles to be emitted multiple times unnecessarily.

These changes add some logic that will try to prevent the structural styles from being emitted more than once.

**Disclaimer:** this change might not work across multiple compilation units, however I still think it's worthwhile, because the apps that only have one global stylesheet for their theme will get the benefit, while everybody else will work the same as before. These changes shave off more than 4kb of minified CSS.

(cherry picked from commit b7db96c)
@angular-automatic-lock-bot

Copy link
Copy Markdown

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 Jul 23, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants