Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Scoping CSS keyframes in emulated view encapsulation #42608

Closed
wants to merge 2 commits into from
Closed

Scoping CSS keyframes in emulated view encapsulation #42608

wants to merge 2 commits into from

Commits on Sep 26, 2022

  1. fix(compiler): scope css keyframes in emulated view encapsulation 

    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 angular#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.
    @dario-piotrowicz
    dario-piotrowicz committed Sep 26, 2022
    Configuration menu
    Copy the full SHA
    e8f8dc2 View commit details
    Browse the repository at this point in the history

  2. fixup! fix(compiler): scope css keyframes in emulated view encapsulation

    @dario-piotrowicz
    dario-piotrowicz committed Sep 26, 2022
    Configuration menu
    Copy the full SHA
    5a6f6c9 View commit details
    Browse the repository at this point in the history