fix(compiler): preserve @page rules in encapsulated styles

[crisbeto]

Currently the compiler treats @page rules in the same way as @media, however that is incorrect and it results in invalid CSS, because @page allows style declarations at the root (e.g. @page { margin: 50%; }) and it only allows a limited set of at-rules to be nested into it. Given these restrictions, we can't really encapsulate the styles since they apply at the document level when the user tries to print.

These changes make it so that @page rules are preserved so that we don't break the user's CSS.

More information: https://www.w3.org/TR/css-page-3

Fixes #26269.

[crisbeto]

These changes aren't necessary for the fix, but they prevent focused tests in shadow_css_spec.ts from failing when run with the Ivy compiler.

[petebacondarwin]

I think one could argue that @page has similar requirements to @font-face. As such it should be processed in the same way. See da6ed15

[crisbeto]

I don't mind changing it, although since the spec doesn't allow for @page to be prefixed we'd technically be trying to correct invalid syntax. I'd put @font-face and @page in the same category as @keyframes where we should just leave them as is, because they can't be encapsulated. Quote from MDN:

@font-face cannot be declared within a CSS selector. For example, the following will not work:

.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
         local("HelveticaNeue-Bold"),
         url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}

[petebacondarwin]

Yeah exactly. They should not be encapsulated. But there is an issue if you happen to import a file with such rules from within a rule that contains :host. See #41751.
So if we are going to do that workaround for @font-face we should do it for @page too.

[crisbeto]

Sorry for the delay @petebacondarwin, I've addressed the feedback. I also managed to remove a bit of logic from the code that handles @font-family.

[petebacondarwin]

LGTM

[AndrewKushnir]

Presubmit.

[AndrewKushnir]

Looks great, thanks @crisbeto 👍 Just left a comment on adding more docs (based on the info from PR description) into the code.

[angular-automatic-lock-bot]

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.}