diff --git a/packages/ui-templates/lib/render.ts b/packages/ui-templates/lib/render.ts index ea444ed059..1542f9386f 100644 --- a/packages/ui-templates/lib/render.ts +++ b/packages/ui-templates/lib/render.ts @@ -49,6 +49,7 @@ export const RenderPlugin = () => { // Apply critters to inline styles html = await critters.process(html) } + html = html.replace(/]*>/, '') // We no longer need references to external CSS html = html.replace(/]*>/g, '') diff --git a/packages/ui-templates/package.json b/packages/ui-templates/package.json index 6d86bd9201..bb4504a03c 100644 --- a/packages/ui-templates/package.json +++ b/packages/ui-templates/package.json @@ -12,7 +12,6 @@ "scripts": { "build": "vite build", "dev": "vite", - "lint": "eslint --ext .ts,.js .", "optimize-assets": "npx svgo public/assets/**/*.svg", "postinstall": "pnpm build", "prerender": "pnpm build && jiti ./lib/prerender", @@ -25,6 +24,7 @@ "execa": "9.3.0", "globby": "14.0.2", "html-minifier": "4.0.0", + "html-validate": "^8.20.1", "jiti": "2.0.0-beta.3", "knitwork": "1.1.0", "pathe": "1.1.2", diff --git a/packages/ui-templates/templates/welcome/index.html b/packages/ui-templates/templates/welcome/index.html index 27ada0dcb1..95fcfd383e 100644 --- a/packages/ui-templates/templates/welcome/index.html +++ b/packages/ui-templates/templates/welcome/index.html @@ -9,7 +9,7 @@
-
+

@@ -17,7 +17,7 @@ {{ version }} -

+
diff --git a/packages/ui-templates/test/__snapshots__/snapshots.spec.ts.snap b/packages/ui-templates/test/__snapshots__/templates.spec.ts.snap similarity index 97% rename from packages/ui-templates/test/__snapshots__/snapshots.spec.ts.snap rename to packages/ui-templates/test/__snapshots__/templates.spec.ts.snap index 2a72ba1490..2de8042ced 100644 --- a/packages/ui-templates/test/__snapshots__/snapshots.spec.ts.snap +++ b/packages/ui-templates/test/__snapshots__/templates.spec.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`template > correctly outputs style blocks for error-404.vue 1`] = ` +exports[`template > produces correct output for error-404 template 1`] = ` ".grid { display: grid; } @@ -135,7 +135,7 @@ exports[`template > correctly outputs style blocks for error-404.vue 1`] = ` " `; -exports[`template > correctly outputs style blocks for error-404.vue 2`] = ` +exports[`template > produces correct output for error-404 template 2`] = ` "*, :before, :after { @@ -240,7 +240,7 @@ p { " `; -exports[`template > correctly outputs style blocks for error-500.vue 1`] = ` +exports[`template > produces correct output for error-500 template 1`] = ` ".grid { display: grid; } @@ -346,7 +346,7 @@ exports[`template > correctly outputs style blocks for error-500.vue 1`] = ` " `; -exports[`template > correctly outputs style blocks for error-500.vue 2`] = ` +exports[`template > produces correct output for error-500 template 2`] = ` "*, :before, :after { @@ -447,7 +447,7 @@ p { " `; -exports[`template > correctly outputs style blocks for error-dev.vue 1`] = ` +exports[`template > produces correct output for error-dev template 1`] = ` ".absolute { position: absolute; } @@ -606,7 +606,7 @@ exports[`template > correctly outputs style blocks for error-dev.vue 1`] = ` " `; -exports[`template > correctly outputs style blocks for error-dev.vue 2`] = ` +exports[`template > produces correct output for error-dev template 2`] = ` "*, :before, :after { @@ -724,7 +724,7 @@ pre { " `; -exports[`template > correctly outputs style blocks for loading.vue 1`] = ` +exports[`template > produces correct output for loading template 1`] = ` ".nuxt-loader-bar { background: #00dc82; position: fixed; @@ -887,7 +887,7 @@ exports[`template > correctly outputs style blocks for loading.vue 1`] = ` " `; -exports[`template > correctly outputs style blocks for loading.vue 2`] = ` +exports[`template > produces correct output for loading template 2`] = ` "@keyframes nuxt-loading-move { 100% { stroke-dashoffset: -128; @@ -998,7 +998,7 @@ svg { " `; -exports[`template > correctly outputs style blocks for welcome.vue 1`] = ` +exports[`template > produces correct output for welcome template 1`] = ` ".sr-only { position: absolute; width: 1px; @@ -1358,7 +1358,7 @@ exports[`template > correctly outputs style blocks for welcome.vue 1`] = ` " `; -exports[`template > correctly outputs style blocks for welcome.vue 2`] = ` +exports[`template > produces correct output for welcome template 2`] = ` "*, :before, :after { @@ -1392,6 +1392,7 @@ body { margin: 0; line-height: inherit; } +h1, h2 { font-size: inherit; font-weight: inherit; @@ -1400,6 +1401,7 @@ a { color: inherit; text-decoration: inherit; } +h1, h2, p { margin: 0; diff --git a/packages/ui-templates/test/snapshots.spec.ts b/packages/ui-templates/test/snapshots.spec.ts deleted file mode 100644 index 511f459cd1..0000000000 --- a/packages/ui-templates/test/snapshots.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { fileURLToPath } from 'node:url' -import { readFileSync } from 'node:fs' -import { rm } from 'node:fs/promises' -import { afterAll, beforeAll, describe, expect, it } from 'vitest' -import { execaCommand } from 'execa' -import { format } from 'prettier' - -const distDir = fileURLToPath(new URL('../node_modules/.temp/dist/templates', import.meta.url)) - -describe('template', () => { - beforeAll(async () => { - await execaCommand('pnpm build', { - cwd: fileURLToPath(new URL('..', import.meta.url)), - env: { - OUTPUT_DIR: './node_modules/.temp/dist', - }, - }) - }) - afterAll(() => rm(distDir, { force: true, recursive: true })) - - function formatCss (css: string) { - return format(css, { - parser: 'css', - }) - } - - it.each(['error-404.vue', 'error-500.vue', 'error-dev.vue', 'loading.vue', 'welcome.vue'])('correctly outputs style blocks for %s', async (file) => { - const contents = readFileSync(`${distDir}/${file}`, 'utf-8') - - const scopedStyle = contents.match(/