Skip to content

Commit

Permalink
fix(compiler): scope css keyframes in emulated view encapsulation (#4…
Browse files Browse the repository at this point in the history
…2608)

Ensure that keyframes rules, defined within components with emulated
view encapsulation, are scoped to avoid collisions with keyframes in
other components.

This is achieved by renaming these keyframes to add a prefix that makes
them unique across the application.

In order to enable the handling of keyframes names defined as strings
the previous strategy of replacing quoted css content with `%QUOTED%`
(introduced in commit 7f689a2) has been removed and in its place now
only specific characters inside quotes are being replaced with
placeholder text (those are `;`, `:` and `,`, more can be added in
the future if the need arises).

Closes #33885

BREAKING CHANGE:

Keyframes names are now prefixed with the component's "scope name".
For example, the following keyframes rule in a component definition,
whose "scope name" is host-my-cmp:

   @Keyframes foo { ... }

will become:

   @Keyframes host-my-cmp_foo { ... }

Any TypeScript/JavaScript code which relied on the names of keyframes rules
will no longer match.

The recommended solutions in this case are to either:
- change the component's view encapsulation to the `None` or `ShadowDom`
- define keyframes rules in global stylesheets (e.g styles.css)
- define keyframes rules programmatically in code.

PR Close #42608
  • Loading branch information
dario-piotrowicz authored and AndrewKushnir committed Sep 29, 2022
1 parent 76a8c68 commit 051f756
Show file tree
Hide file tree
Showing 3 changed files with 868 additions and 37 deletions.

0 comments on commit 051f756

Please sign in to comment.