fix(theming): Correctly generate CSS for font themes

[nfebe]

Fixes a regression from dropping the SCSS compiler that broke font themes like OpenDyslexic. The old code relied on the SCSS compiler to automatically correct the order of the CSS rules, ensuring the @font-face declaration was always valid. The server now correctly generates the @font-face rule at the top level of the stylesheet, fixing the previously invalid nested CSS.

Introduced in : f1448fc via #52249

[skjnldsv]

That looks wrong 🤔
It means the style will be applied everywhere and not just within the data attribute?

[nfebe]

That looks wrong 🤔
It means the style will be applied everywhere and not just within the data attribute?

You're right that custom style is global, but that only defines the styles; it's only applied by the variables scoped within the data-theme attribute.

And by the way, the Dyslexic font does not work any more when you to to "Personal settings > Appearance and accessibility"

---

EDIT

Thought about it, in terms of @-rules only, so it appears it needs a more dynamic approach. Updating.

[susnux]

Alternative would be to add a new field like atRules or globalRules that would be also hoisted for scoped themes.
As mentioned the at-rules like @font-face or @media cannot be nested.

[skjnldsv]

Also, keep in mind not every theme will have font in the custom CSS entry.
The API is designed to be flexible and support themes at a wider level when we'll want to open it.
E.g, apps in the AppStore that provides custom themes

[nickvergessen]

Fixes dyslexia at least

[nickvergessen]

The API is designed to be flexible and support themes at a wider level when we'll want to open it.

We need to backport this to 31, so a simple solution that works for designed use cases (dark, contrast and dyslexia) is good enough for now I'd say.

[susnux]

We need to backport this to 31, so a simple solution that works for designed use cases (dark, contrast and dyslexia) is good enough for now I'd say.

Yes at least for the moment as there are no external themes

[susnux]

Solves the issue, but very fragile code.
As soon as e.g. there is a @ in a comment it breaks.

But for the moment it works as we only have our themes and there is no way for external themes.

[nfebe]

As soon as e.g. there is a @ in a comment it breaks.

Added a two lines to strip comments, but yeah we definitely need a proper way to do this eventually.

[nfebe]

/backport to stable31