Skip to content

feat(compiler): scope selectors in @starting-style#53943

Closed
puckowski wants to merge 1 commit intoangular:mainfrom
puckowski:fix-css-starting-style-at-rule
Closed

feat(compiler): scope selectors in @starting-style#53943
puckowski wants to merge 1 commit intoangular:mainfrom
puckowski:fix-css-starting-style-at-rule

Conversation

@puckowski
Copy link
Contributor

This pull request makes sure selectors inside @starting-style queries are correctly scoped.

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

Currently @starting-style queries defined for components are not correctly scoped. This may cause style leakage.

What is the new behavior?

With this PR, @starting-style queries would be correctly scoped. This would prevent style leakage.

Does this PR introduce a breaking change?

  • Yes
  • No

The @starting-style at-rule was introduced in Chrome 117 (https://chromestatus.com/feature/4515377717968896). Early adopters will see styles within their application applied differently with this change. This will require a small developer effort to address.

Firefox and Safari do not currently support @starting-style (https://caniuse.com/mdn-css_at-rules_starting-style).

Firefox's position is positive (mozilla/standards-positions#833).

I could not find Safari's position on introducing @starting-style.

WebKit hasn't officially stated a position on @starting-style (WebKit/standards-positions#210).

Other information

I think by adopting this PR before @starting-style is widely adopted we can avoid some developer frustration.

@pullapprove pullapprove bot requested a review from AndrewKushnir January 16, 2024 21:24
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Jan 16, 2024
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
it('should scope normal selectors inside a startling-style rule', () => {
it('should scope normal selectors inside a starting-style rule', () => {

Copy link
Member

Choose a reason for hiding this comment

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

Maybe the starting style is startling!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you for catching the typo. Should be resolved now. @eneajaho

make sure selectors inside @starting-style queries are correctly scoped
@puckowski puckowski force-pushed the fix-css-starting-style-at-rule branch from 2360a89 to b4d42c1 Compare January 16, 2024 22:47
@puckowski
Copy link
Contributor Author

Angular 17 Stackblitz where @starting-style does not work as expected in Chrome:
https://stackblitz.com/edit/stackblitz-starters-4pjm3v?file=src%2Ffirst.component.ts

Angular 17 custom build which includes this PR where @starting-style works as expected:
https://github.com/puckowski/angular-starting-style
Note the above repository includes node_modules which may result in clone taking a while. This is because a custom Angular build is used.

@JoostK JoostK added the target: minor This PR is targeted for the next minor release label Jan 17, 2024
@JoostK JoostK added the action: merge The PR is ready for merge by the caretaker label Jan 17, 2024
@JoostK JoostK removed the request for review from AndrewKushnir January 17, 2024 10:51
@dylhunn dylhunn added the area: compiler Issues related to `ngc`, Angular's template compiler label Jan 17, 2024
@ngbot ngbot bot added this to the Backlog milestone Jan 17, 2024
@dylhunn
Copy link
Contributor

dylhunn commented Jan 17, 2024

This PR was merged into the repository by commit 66e940a.

@dylhunn dylhunn closed this in 66e940a Jan 17, 2024
@puckowski
Copy link
Contributor Author

Thank you for merging. Looking forward to using this feature in my Angular apps.

@AndrewKushnir
Copy link
Contributor

@puckowski thanks for creating this PR and helping to improve Angular! 👍

ChellappanRajan pushed a commit to ChellappanRajan/angular that referenced this pull request Jan 23, 2024
make sure selectors inside @starting-style queries are correctly scoped

PR Close angular#53943
rlmestre pushed a commit to rlmestre/angular that referenced this pull request Jan 26, 2024
make sure selectors inside @starting-style queries are correctly scoped

PR Close angular#53943
amilamen pushed a commit to amilamen/angular that referenced this pull request Jan 26, 2024
make sure selectors inside @starting-style queries are correctly scoped

PR Close angular#53943
nikvarma pushed a commit to nikvarma/angular that referenced this pull request Jan 31, 2024
make sure selectors inside @starting-style queries are correctly scoped

PR Close angular#53943
@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 Feb 18, 2024
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 area: compiler Issues related to `ngc`, Angular's template compiler detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants