Allow trimming and inlining critical CSS #1975
-
DescriptionRight now, there is no easy way to integrate https://github.com/danielroe/beasties to remove not used CSS from the page when pre-rendering. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Feel free to elaborate on what's missing on Vike's side for you to integrate Beasties. |
Beta Was this translation helpful? Give feedback.
-
|
Vike inserts CSS links internally, and there is no hook to modify HTML after it is rendered. Beasties needs the final HTML with CSS links (or inlined CSS) to be able to inline CSS, trim not used classes, and modify CSS imports. Currently, I'm doing this in const assets = await pageContext.__getPageAssets()
const css = assets
.filter(asset => asset.assetType === 'style' && asset.isEntry)
.map(asset => asset.src)
.map(css => `<link rel="stylesheet" href="${css}">`)
.join('\n')
const beasties = new Beasties({
path: path.join(process.cwd(), 'dist/client'),
})
const cleanPageHtml = await beasties.process(`<head>${css}</head><body>${pageHtml}</body>`)
const headHtml = cleanPageHtml.match(/<head>([\s\S]*)<\/head>/)[1]!
const bodyHtml = cleanPageHtml.match(/<body>([\s\S]*)<\/body>/)[1]!
const documentHtml = escapeInject`<!DOCTYPE html>
<head>...${dangerouslySkipEscape(headHtml)}...</head>
<body>...${dangerouslySkipEscape(bodyHtml)}...</body>
</html>`
const injectFilter = (assets: InjectFilterEntry[]) => {
assets.forEach((asset) => {
// Do not inject styles
if (asset.assetType === 'style') {
asset.inject = false
}
})
}This causes Vike needs a hook for final processing of the generated HTML. Or even native Beasties integration. I think it would be nice to be able to exclude not used CSS when prerendering. |
Beta Was this translation helpful? Give feedback.
-
|
I agree: #1979. Creating a Another less hacky workaround would be to crawl HTML files in |
Beta Was this translation helpful? Give feedback.
I agree: #1979. Creating a
vike-beastiesshould be easy then.Another less hacky workaround would be to crawl HTML files in
dist/client/and run Beasties against each HTML file.