Ví někdo jak přepsat CSS před vytvořením CSSOM v browseru?

Napsal Doctore97;1658502

Takže, rozhodl sem se vytvořit si takovou kravinu - CSS variables tam, kde to CSS neumožňuje. Jedná možnost jak tohle řešit v tuhle chvíli je nahradit ve finálním CSS (vygenerované z SCSS/SASS), ty CSS variables za reálné hodnoty.

@media (max-width: var(--size-lg))

nahradit za

@media (max-width: 1023px)

Mám teď řešení, který tohle dokáže. Ale je to takový meh řešení - 100% funguje, ale chtěl bych něco víc browser-level.

Takže mě napadlo, zda existuje nějakej hook, na kterej by se dalo v browseru napojit a měnit CSS než ho browser zpracuje.

Příklad:

– browser stáhne CSS do paměti

– TADY BYCH JÁ ZASÁHL, protože v tu chvíli je to jeden velkej string => přepíšu co potřebuju

– browser pokračuje do CSSOM a dále

Napsal Spouter;1658504

Nevím jestli jsem pochopil správně dostat variables do media queries... Mrkni sem:

postcss-media-variables - npm

Napsal Doctore97;1658505

Ne. Cílem je v browseru na konci u klienta měnit css. Popsal jsem jen ukázku proč bych to chtěl, ale těch možností je více.

Ve výsledný aplikaci by měl klient mít možnost měnit věci v adminu a ty pak ovlivní výstup na frontu.

Ale jelikož někde css variables nefungují, jak media query, tak potřebuji měnit výsledné css.

A jelikož by se rád vyhnul custom načítání jako dělám teď ve svém řešení, chci vědět zda někdo zná blíže vykreslování v prohlížeči a zda se jde napojit a měnit CSS před vytvořením CCSOM.

Celá pointa je v tom, zda někdo ví, jak tohle prohlížeče řeší a jestli jde do toho procesu, a případně jak, zasáhnout.

Napsal gogy27;1658795

API na to existuje: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model ku stylom sa da pristupovat cez JS.

Tu to uzivatel "Ich_73" dobre opisuje https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/68788747#68788747