Removed <style> with type="text/css" from inline output at build …

…time (#8480)
withastro · Sep 12, 2023 · 6448258 · 6448258
1 parent bf341d6
commit 6448258
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 11 deletions.
diff --git a/.changeset/gorgeous-dancers-divide.md b/.changeset/gorgeous-dancers-divide.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Do not add type="text/css" to inline style tag
diff --git a/packages/astro/src/core/render/ssr-element.ts b/packages/astro/src/core/render/ssr-element.ts
@@ -19,9 +19,7 @@ export function createStylesheetElement(
 ): SSRElement {
 	if (stylesheet.type === 'inline') {
 		return {
-			props: {
-				type: 'text/css',
-			},
+			props: {},
 			children: stylesheet.content,
 		};
 	} else {

diff --git a/packages/astro/src/runtime/client/hmr.ts b/packages/astro/src/runtime/client/hmr.ts
@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 if (import.meta.hot) {
-	// Vite injects `<style type="text/css" data-vite-dev-id>` for ESM imports of styles
-	// but Astro also SSRs with `<style type="text/css" data-astro-dev-id>` blocks. This MutationObserver
+	// Vite injects `<style data-vite-dev-id>` for ESM imports of styles
+	// but Astro also SSRs with `<style data-astro-dev-id>` blocks. This MutationObserver
 	// removes any duplicates as soon as they are hydrated client-side.
 	const injectedStyles = getInjectedStyles();
 	const mo = new MutationObserver((records) => {
@@ -44,7 +44,6 @@ function isStyle(node: Node): node is HTMLStyleElement {
 function isViteInjectedStyle(node: Node): node is HTMLStyleElement {
 	return (
 		isStyle(node) &&
-		node.getAttribute('type') === 'text/css' &&
 		!!node.getAttribute('data-vite-dev-id')
 	);
 }
diff --git a/packages/astro/src/runtime/server/render/tags.ts b/packages/astro/src/runtime/server/render/tags.ts
@@ -17,6 +17,6 @@ export function renderUniqueStylesheet(result: SSRResult, sheet: StylesheetAsset
 
 	if (sheet.type === 'inline') {
 		if (Array.from(result.styles).some((s) => s.children.includes(sheet.content))) return '';
-		return renderElement('style', { props: { type: 'text/css' }, children: sheet.content });
+		return renderElement('style', { props: {}, children: sheet.content });
 	}
 }
diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts
@@ -324,7 +324,6 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
 		// But we still want to inject the styles to avoid FOUC
 		styles.add({
 			props: {
-				type: 'text/css',
 				// Track the ID so we can match it to Vite's injected style later
 				'data-astro-dev-id': viteID(new URL(`.${url}`, settings.config.root)),
 			},

diff --git a/packages/integrations/deno/test/basics.test.ts b/packages/integrations/deno/test/basics.test.ts
@@ -50,8 +50,6 @@ Deno.test({
 			const doc = new DOMParser().parseFromString(html, `text/html`);
 			const style = doc!.querySelector('style');
 
-			assertEquals(style?.getAttribute('type'), 'text/css');
-
 			assert(style?.textContent?.includes('Courier New'));
 		});
 

diff --git a/packages/integrations/node/test/prerender-404-500.test.js b/packages/integrations/node/test/prerender-404-500.test.js
@@ -101,7 +101,7 @@ describe('Prerender 404', () => {
 			const $ = cheerio.load(html);
 
 			// length will be 0 if the stylesheet does not get included
-			expect($('style[type="text/css"]')).to.have.a.lengthOf(1);
+			expect($('style')).to.have.a.lengthOf(1);
 		});
 	});