Method _scopeAnimationRule

packages/compiler/src/shadow_css.ts:358–405

* Scope an animation rule so that the keyframes mentioned in such rule * are scoped if defined in the component's css and left untouched otherwise. * * It can scope values of both the 'animation' and 'animation-name' properties. * * @param rule css rule to scope. * @param scopeSele

(
    rule: CssRule,
    scopeSelector: string,
    unscopedKeyframesSet: ReadonlySet<string>,
  )

   * @returns the updated css rule.
   **/
  private _scopeAnimationRule(
    rule: CssRule,
    scopeSelector: string,
    unscopedKeyframesSet: ReadonlySet<string>,
  ): CssRule {
    let content = rule.content.replace(
      /((?:^|\s+|;)(?:-webkit-)?animation\s*:\s*)([^;]+)/g,
      (_, start, animationDeclarations) =>
        start +
        animationDeclarations.replace(
          this._animationDeclarationKeyframesRe,
          (
            original: string,
            leadingSpaces: string,
            quote = '',
            quotedName: string,
            nonQuotedName: string,
          ) => {
            if (quotedName) {
              return `${leadingSpaces}${this._scopeAnimationKeyframe(
                `${quote}${quotedName}${quote}`,
                scopeSelector,
                unscopedKeyframesSet,
              )}`;
            } else {
              return animationKeywords.has(nonQuotedName)
                ? original
                : `${leadingSpaces}${this._scopeAnimationKeyframe(
                    nonQuotedName,
                    scopeSelector,
                    unscopedKeyframesSet,
                  )}`;
            }
          },
        ),
    );
    content = content.replace(
      /((?:^|\s+|;)(?:-webkit-)?animation-name(?:\s*):(?:\s*))([^;]+)/g,
      (_match, start, commaSeparatedKeyframes) =>
        `${start}${commaSeparatedKeyframes
          .split(',')
          .map((keyframe: string) =>
            this._scopeAnimationKeyframe(keyframe, scopeSelector, unscopedKeyframesSet),
          )
          .join(',')}`,
    );
    return {...rule, content};
  }

  /* Ensure styles are scoped. Pseudo-scoping takes a rule like:
   *