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

SX: refactor 'injectRuntimeStyles' #1579

Open
mrtnzlml opened this issue Jan 4, 2021 · 0 comments
Open

SX: refactor 'injectRuntimeStyles' #1579

mrtnzlml opened this issue Jan 4, 2021 · 0 comments
Assignees
@mrtnzlml
Labels
help wanted Extra attention is needed
Projects
SX, SX Design

Comments

@mrtnzlml
Copy link
Member

mrtnzlml commented Jan 4, 2021 •
edited

Function injectRuntimeStyles is currently wildly ineffective and kinda broken.

How it works now

We call injectRuntimeStyles everytime sx.create({ … }) is called at runtime (in a browser context). This function tries to find style[data-adeira-sx] HTML tag and it tries to inject there the styles from sx.create. It also tries to avoid adding already existing CSS classes but it does a fairly bad job (basically only simple rules are supported). Moreover, this check is performed for every single CSS class.

You can check the problem by running the following code in a browser console (Firefox) and checking the massive output:

let cssTexts = [];
for (const cssRule of document.querySelector('style[data-adeira-sx]').sheet.cssRules) {
  cssTexts.push(cssRule.cssText);
}
// copy(cssTexts.join('\n'));
console.log(cssTexts.join('\n'));

You should be able to see many duplicates caused by incorrectly (or rather inefficiently) injecting StyleCollectorAtNode and StyleCollectorPseudoNode.

How it should work

SX should inject only runtime styles that do not exist yet in style[data-adeira-sx] and each CSS class should be added only once. There are 2 ways how we can do this:
@mrtnzlml mrtnzlml added this to To do in SX, SX Design via automation Jan 4, 2021
@mrtnzlml mrtnzlml added the help wanted Extra attention is needed label Jan 5, 2021
@mrtnzlml mrtnzlml self-assigned this Jul 9, 2021
@mrtnzlml mrtnzlml moved this from To do to In progress in SX, SX Design Jul 9, 2021
mrtnzlml added a commit that referenced this issue Apr 3, 2022
@mrtnzlml
SX: implement styles rehydration
0a79ab3 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
@mrtnzlml mrtnzlml mentioned this issue Apr 3, 2022
Draft
mrtnzlml added a commit that referenced this issue Apr 10, 2022
@mrtnzlml
SX: implement styles rehydration
67bdb98 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue Apr 14, 2022
@mrtnzlml
SX: implement styles rehydration
dcc910e 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue Apr 16, 2022
@mrtnzlml
SX: implement styles rehydration
bfbd00b 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue May 8, 2022
@mrtnzlml
SX: implement styles rehydration
2ba3514 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue May 11, 2022
@mrtnzlml
SX: implement styles rehydration
e449cb8 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue Jun 8, 2022
@mrtnzlml
SX: implement styles rehydration
3e97da0 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue Jun 19, 2022
@mrtnzlml
SX: implement styles rehydration
96070ed 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue Jun 23, 2022
@mrtnzlml
SX: implement styles rehydration
52dc20e 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
mrtnzlml added a commit that referenced this issue Jun 23, 2022
@mrtnzlml
SX: implement styles rehydration
ca47c4f 
I have these changes sitting locally for a very long time, and it's time
to offload them. The idea behind the styles rehydration is very simple:
we collect all existing styles from `<style data-adeira-sx />` (once)
and use this information later for deciding whether the styles should be
injected or not (this is what I call rehydration).

The difference from the current solution is that we do it only once and
we don't have to go through all the styles everytime there is something
to inject.

Motivation for this change is performance: this should significantly
improve the runtime style perf + be much easier to deal with (for
example, we are basically brute-forcing @at rules and pseudo rules now).

Note: this is just a partial solution, there are other changes coming
(custom styles printer and @at nodes/pseudo nodes optimization).

Related issue: #1579
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mrtnzlml mrtnzlml

Labels
help wanted Extra attention is needed
Projects
SX, SX Design
In progress
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mrtnzlml