search

theKashey / used-styles

📝All the critical styles you've used to render a page.
MIT License
138 stars 10 forks source link

[Q/A] "used-style" is simple ? #45

Closed c0ncentus closed 1 year ago

c0ncentus commented 1 year ago

I read that you scan html and css but maybe isnt so easy ... and also put 'hybrid', server side rendering and whatever ...

Can you tell me if you can expose a "main" function with html string (or whatever), css string (or whatever) as input and then have as output, a css used ?

theKashey commented 1 year ago

a "main" function with html string (or whatever), css string (or whatever) as input and then have as output, a css used ?

That is getCriticalRules, see https://github.com/theKashey/used-styles/blob/master/__tests__/extraction.spec.tsx#LL27C18-L27C18 Examples uses loadStyleDefinitions which is a little in between of fully automated style discoverability and "just styles", you better use parseProjectStyles see https://github.com/theKashey/used-styles/blob/632b8d2b0547e3a084f05b639a870ca1e3926cc5/__tests__/react.integration.spec.tsx#L134

That would be something like

const styles = parseProjectStyles({
 style: `body { padding:0 }`
});

const critical = getCriticalRules('<HTML><body>hello</body></HTML>', styles);

This code works, but TypeScript will complain

c0ncentus commented 1 year ago

ok thanks :)