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.

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

[Paste from Word style retention] PoC of inlining stylesheets #10607

Closed
Reinmar opened this issue Sep 27, 2021 · 1 comment
Closed

[Paste from Word style retention] PoC of inlining stylesheets #10607

Reinmar opened this issue Sep 27, 2021 · 1 comment
Assignees
Labels
squad:core Issue to be handled by the Core team. type:task This issue reports a chore (non-production change) and other types of "todos".

Comments

@Reinmar
Copy link
Member

Reinmar commented Sep 27, 2021

Part of #10577.

  • Analyze CKE4's solution to that (how the styles are inlined).
  • Implement a PoC of inlining stylesheets.
  • Write down the conclusions.
@Reinmar Reinmar added type:task This issue reports a chore (non-production change) and other types of "todos". squad:core Issue to be handled by the Core team. labels Sep 27, 2021
@niegowski niegowski self-assigned this Oct 15, 2021
@Reinmar Reinmar added this to the iteration 49 milestone Oct 25, 2021
@niegowski
Copy link
Contributor

In CKE4 the styles inlining is handled this way:

  1. Style sheets are parsed to the list of selector + style pairs (where style is a hash of CSS properties)
    • Some properties are filtered at this stage (break* rules).
  2. The list of the parsed styles is sorted to keep operators precedence from different sheets
  3. The document fragment is scanned with querySelectorAll() for all selectors and styles are joined with those inline.
  4. The filtering of superfluous styles is defined (those with no final effect)

The above implementation is ported to CKE5: https://github.com/ckeditor/ckeditor5/compare/ck/10607-style-inlining-poc. In the PoC branch:

  • Font feature's upcasts were extended to be able to upcast font styles from block elements (basic styles are working out of the box because they already do not care about the element name that the style was set on
  • All the styles inlining is handled on the DOM document because we don't have querySelectorAll() on the view document fragment.
  • The filtering was ported from CKE4 but probably it could be merged into a single implementation (currently there are two: removeSuperfluousStyles() and normalizeStyles().
  • Styles inlining could use StylesMap from CKE5 to process CSS properties but in the PoC the ported CKE4 implementation was used.
  • The margins normalization was only partly ported (the original one is also converting units to px).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
squad:core Issue to be handled by the Core team. type:task This issue reports a chore (non-production change) and other types of "todos".
Projects
None yet
Development

No branches or pull requests

2 participants