Skip to content

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

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.

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

Merged
merged 1 commit into from
Jun 22, 2021

Conversation

crisbeto
Copy link
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
Copy link
Member

@jelbourn jelbourn left a comment

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
Copy link
Member Author

crisbeto commented Jun 19, 2021

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.

Copy link
Member

@jelbourn jelbourn left a comment

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

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