Removed `<style>` with `type="text/css"` from inline output at build time (#8480)

7 files changed, 10 insertions, 11 deletions

diff --git a/.changeset/gorgeous-dancers-divide.md b/.changeset/gorgeous-dancers-divide.md
new file mode 100644
index 000000000..f9b8217e9
--- /dev/null
+++ 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
index 2d9bf9ae8..f282d349a 100644
--- 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
index b4c6acb88..277751e28 100644
--- 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
index f15da6571..684480f9f 100644
--- 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
index af02da410..120fc7722 100644
--- 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
index 78672d34b..043fab2d6 100644
--- 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
index ea1b762a7..f8bf0778c 100644
--- 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);
 		});
 	});