Injection strategy

[streamich]

When is actual CSS injected? All at once? Or, when the class name is actually used? I assume it all happens at load time if runtime is only 0.5Kb?

[chriseppstein]

Presently, our webpack integration is a bit janky because linkedin has it's own bespoke asset system and ways of injecting them into a page.

Ultimately, the answer for how to load your css is a decision we can't make for you. We produce a css file. That file can be inlined, or served separately via h2 push (or a standard <link> tag).

Later, we'll add support for creating subsets of the output file, so that you can route split, create a critical set of styles that are inlined, or do other strategies like lazy loading.

Presently, I suspect that our webpack plugin does not play well with standard mechanisms for inlining css. as the webpack plugin matures, this will work better.

[streamich]

What I meant is that if I have the following rule:

:scope[state|disabled] {
  opacity: 0.3;
}

And say disabled prop has always been false until now. Will this rule already be inserted into CSSOM or will it be inserted only when disabled prop is true for the first time?

[chriseppstein]

@streamich So this will become a css class. In dev mode that class is something like .foo--disabled.

If a component references this style in the template source, the optimizer leaves this css rule in the css file (but it optimizes it), if it's not used anywhere, the optimizer removes the rule from the css output.

we don't manipulate the CSSOM, we load pure css into the browser. our runtime exists to make sure that the classes used when javascript manipulates styles are correct.