Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(templates): hybrid global + scoped styles

Browse Source
This commit is contained in:
Daniel Roe 2022-03-10 22:23:54 +00:00
parent 275881b2b0
commit e2a6da9b04
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/ui-templates/lib/render.ts
View File

@ -85,7 +85,8 @@ export const RenderPlugin = () => {
const title = html.match(/<title.*?>([\s\S]*)<\/title>/)?.[1].replace(/{{([\s\S]+?)}}/g, (r) => {
return `\${${r.slice(2, -2)}}`.replace(/messages\./g, 'props.')
})
const styleContent = Array.from(html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)).map(block => block[1])
const styleContent = Array.from(html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)).map(block => block[1]).join('\n')
const globalStyles = styleContent.match(/^([^.][^{]*\{[^}]*\})*/)?.[0]
const inlineScripts = Array.from(html.matchAll(/<script>([\s\S]*?)<\/script>/g))
.map(block => block[1])
.filter(i => !i.includes('const t=document.createElement("link")'))
@ -99,14 +100,15 @@ export const RenderPlugin = () => {
`const props = defineProps(${props})`,
title && 'useMeta(' + genObjectFromRawEntries([
['title', `\`${title}\``],
['script', inlineScripts.map(s => ({ children: `\`${s}\`` }))]
['script', inlineScripts.map(s => ({ children: `\`${s}\`` }))],
['style', [{ children: `\`${globalStyles}\`` }]]
]) + ')',
'</script>',
'<template>',
templateContent,
'</template>',
'<style>',
...styleContent,
'<style scoped>',
styleContent.replace(globalStyles, ''),
'</style>'
].filter(Boolean).join('\n').trim()