Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +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) => { const title = html.match(/<title.*?>([\s\S]*)<\/title>/)?.[1].replace(/{{([\s\S]+?)}}/g, (r) => {
return `\${${r.slice(2, -2)}}`.replace(/messages\./g, 'props.') 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)) const inlineScripts = Array.from(html.matchAll(/<script>([\s\S]*?)<\/script>/g))
.map(block => block[1]) .map(block => block[1])
.filter(i => !i.includes('const t=document.createElement("link")')) .filter(i => !i.includes('const t=document.createElement("link")'))
@ -99,14 +100,15 @@ export const RenderPlugin = () => {
`const props = defineProps(${props})`, `const props = defineProps(${props})`,
title && 'useMeta(' + genObjectFromRawEntries([ title && 'useMeta(' + genObjectFromRawEntries([
['title', `\`${title}\``], ['title', `\`${title}\``],
['script', inlineScripts.map(s => ({ children: `\`${s}\`` }))] ['script', inlineScripts.map(s => ({ children: `\`${s}\`` }))],
['style', [{ children: `\`${globalStyles}\`` }]]
]) + ')', ]) + ')',
'</script>', '</script>',
'<template>', '<template>',
templateContent, templateContent,
'</template>', '</template>',
'<style>', '<style scoped>',
...styleContent, styleContent.replace(globalStyles, ''),
'</style>' '</style>'
].filter(Boolean).join('\n').trim() ].filter(Boolean).join('\n').trim()