search

cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.08k stars 400 forks source link

Improve DX by using DOM API for rendering #1125

Open kof opened 5 years ago

kof commented 5 years ago

In cases where style rules are linked, we use CSSOM insertRule API. This happens automatically when using rule and value functions in react-jss or link:true option from the core.

Negative aspect of insertRule API is

  1. It doesn't show up in chorome DOM inspector in the style tag content
  2. It is not editable in style tab of devtools (one can still overwrite using inline styles)

Positive aspects of insertRule

  1. It is very fast
  2. It gives us references to CSS rules

To improve DX, we can use a slow way to render in DEV mode only over DOM API.

bartlomiejzuber commented 4 years ago

@kof Do you need help with this one ? This is something I miss for long time.

FabianSellmann commented 4 years ago

To add on this. This behavior breaks prerendering any html page (e.g. for crawlers). As the CSS wont be included the actual HTML file. Maybe we could just set a global variable (which could be set beforehand by any kind of prerenderer) to decide wether or not to use DOM API or CSSOM insertRule.

kof commented 4 years ago

@FabianSellmann I dont' think insertRule API has any impact on SSR critical css extraction or any other way crowlers are downloading the page.