Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: injected tags indentation #5000

Merged
merged 2 commits into from Sep 23, 2021
Merged

fix: injected tags indentation #5000

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57b1a96
fix: injected tags indentation
patak-dev Sep 20, 2021
fe41b55
refactor: apply suggestion
patak-dev Sep 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
61 changes: 42 additions & 19 deletions packages/vite/src/node/plugins/html.ts
View file
Open in desktop
Expand Up @@ -590,72 +590,91 @@ function toPublicPath(filename: string, config: ResolvedConfig) {
return isExternalUrl(filename) ? filename : config.base + filename
}

const headInjectRE = /<\/head>/
const headPrependInjectRE = [/<head>/, /<!doctype html>/i]
const headInjectRE = /([ \t]*)<\/head>/
const headPrependInjectRE = [/([ \t]*)<head>/, /<!doctype html>/i]
antfu marked this conversation as resolved.
Show resolved Hide resolved
function injectToHead(
html: string,
tags: HtmlTagDescriptor[],
prepend = false
) {
const tagsHtml = serializeTags(tags)
if (prepend) {
// inject after head or doctype
for (const re of headPrependInjectRE) {
if (re.test(html)) {
return html.replace(re, `$&\n${tagsHtml}`)
return html.replace(
re,
(match, p1) => `${match}\n${serializeTags(tags, incrementIndent(p1))}`
)
}
}
} else {
// inject before head close
if (headInjectRE.test(html)) {
return html.replace(headInjectRE, `${tagsHtml}\n $&`)
// respect indentation of head tag
return html.replace(
headInjectRE,
(match, p1) => `${serializeTags(tags, incrementIndent(p1))}${match}`
)
}
}
// if no <head> tag is present, just prepend
return tagsHtml + `\n` + html
return serializeTags(tags) + html
}

const bodyInjectRE = /<\/body>/
const bodyPrependInjectRE = /<body[^>]*>/
const bodyInjectRE = /([ \t]*)<\/body>/
const bodyPrependInjectRE = /([ \t]*)<body[^>]*>/
function injectToBody(
html: string,
tags: HtmlTagDescriptor[],
prepend = false
) {
if (prepend) {
// inject after body open
const tagsHtml = `\n` + serializeTags(tags)
if (bodyPrependInjectRE.test(html)) {
return html.replace(bodyPrependInjectRE, `$&\n${tagsHtml}`)
return html.replace(
bodyPrependInjectRE,
(match, p1) => `${match}\n${serializeTags(tags, incrementIndent(p1))}`
)
}
// if no body, prepend
return tagsHtml + `\n` + html
return serializeTags(tags) + html
} else {
// inject before body close
const tagsHtml = `\n` + serializeTags(tags)
if (bodyInjectRE.test(html)) {
return html.replace(bodyInjectRE, `${tagsHtml}\n$&`)
return html.replace(
bodyInjectRE,
(match, p1) => `${serializeTags(tags, incrementIndent(p1))}${match}`
)
}
// if no body, append
return html + `\n` + tagsHtml
return html + `\n` + serializeTags(tags)
}
}

const unaryTags = new Set(['link', 'meta', 'base'])

function serializeTag({ tag, attrs, children }: HtmlTagDescriptor): string {
function serializeTag(
{ tag, attrs, children }: HtmlTagDescriptor,
indent: string = ''
): string {
if (unaryTags.has(tag)) {
return `<${tag}${serializeAttrs(attrs)}>`
} else {
return `<${tag}${serializeAttrs(attrs)}>${serializeTags(children)}</${tag}>`
return `<${tag}${serializeAttrs(attrs)}>${serializeTags(
children,
incrementIndent(indent)
)}</${tag}>`
}
Shinigami92 marked this conversation as resolved.
Show resolved Hide resolved
}

function serializeTags(tags: HtmlTagDescriptor['children']): string {
function serializeTags(
tags: HtmlTagDescriptor['children'],
indent: string = ''
): string {
if (typeof tags === 'string') {
return tags
} else if (tags) {
return ` ${tags.map(serializeTag).join('\n ')}`
} else if (tags && tags.length) {
return tags.map((tag) => `${indent}${serializeTag(tag, indent)}\n`).join('')
}
return ''
}
Expand All @@ -671,3 +690,7 @@ function serializeAttrs(attrs: HtmlTagDescriptor['attrs']): string {
}
return res
}

function incrementIndent(indent: string = '') {
return `${indent}${indent[0] === '\t' ? '\t' : ' '}`
patak-dev marked this conversation as resolved.
Show resolved Hide resolved
}