10000 fix(compiler): scope css keyframes in emulated view encapsulation (#4… · angular/angular@051f756 · GitHub
[go: up one dir, main page]
Skip to content

Commit 051f756

Browse files
dario-piotrowiczAndrewKushnir
dario-piotrowicz
authored and
AndrewKushnir
committed
fix(compiler): scope css keyframes in emulated view encapsulation (#42608)
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 compo AF72 nent'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
1 parent 76a8c68 commit 051f756

File tree

3 files changed

+868
-37
lines changed

3 files changed

+868
-37
lines changed

0 commit comments

Comments
 (0)
0