chore: changeset (#1032)

.changeset/angry-donuts-punch.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/compiler": minor
+---
+
+Adds detected language to extracted style tags in TSX

internal/printer/print-to-tsx.go

@@ -137,21 +137,57 @@ var htmlEvents = map[string]bool{
 	"onwheel":                   true,
 }
 
-func getScriptTypeForNode(n Node) string {
-	if n.Attr == nil || len(n.Attr) == 0 {
+func getStyleLangFromAttrs(attrs []astro.Attribute) string {
+	if len(attrs) == 0 {
+		return "css"
+	}
+
+	for _, attr := range attrs {
+		if attr.Key == "lang" {
+			if attr.Type == astro.QuotedAttribute {
+				return strings.TrimSpace(strings.ToLower(attr.Val))
+			} else {
+				// If the lang attribute exists, but is not quoted, we can't tell what's inside of it
+				// So we'll just return "unknown" and let the downstream client decide what to do with it
+				return "unknown"
+			}
+		}
+	}
+
+	return "css"
+}
+
+func getScriptTypeFromAttrs(attrs []astro.Attribute) string {
+	if len(attrs) == 0 {
 		return "processed-module"
 	}
 
-	// If the script tag has `type="module"`, it's not processed, but it's still a module
-	for _, attr := range n.Attr {
+	for _, attr := range attrs {
+		// If the script tag has `is:raw`, we can't tell what's inside of it
+		// so the downstream client will decide what to do with it (e.g. ignore it, treat as inline, try to guess the type, etc.)
+		if attr.Key == "is:raw" {
+			return "raw"
+		}
+
 		if attr.Key == "type" {
-			if strings.Contains(attr.Val, "module") {
-				return "module"
-			}
+			if attr.Type == astro.QuotedAttribute {
+				normalizedType := strings.TrimSpace(strings.ToLower(attr.Val))
+				// If the script tag has `type="module"`, it's not processed, but it's still a module
+				if normalizedType == "module" {
+					return "module"
+				}
 
-			if ScriptJSONMimeTypes[strings.ToLower(attr.Val)] {
-				return "json"
+				if ScriptJSONMimeTypes[normalizedType] {
+					return "json"
+				}
+
+				if ScriptMimeTypes[normalizedType] {
+					return "inline"
+				}
 			}
+
+			// If the type is not recognized, leave it as unknown
+			return "unknown"
 		}
 
 	}
@@ -164,6 +200,7 @@ type TSXExtractedTag struct {
 	Loc     loc.TSXRange `js:"position"`
 	Type    string       `js:"type"`
 	Content string       `js:"content"`
+	Lang    string       `js:"lang"`
 }
 
 func isScript(p *astro.Node) bool {
@@ -556,7 +593,7 @@ declare const Astro: Readonly<import('astro').AstroGlobal<%s, typeof %s`, propsI
 				p.addTSXScript(a.ValLoc.Start-p.bytesToSkip, endLoc-p.bytesToSkip, a.Val, "event-attribute")
 			}
 			if a.Key == "style" {
-				p.addTSXStyle(a.ValLoc.Start-p.bytesToSkip, endLoc-p.bytesToSkip, a.Val, "style-attribute")
+				p.addTSXStyle(a.ValLoc.Start-p.bytesToSkip, endLoc-p.bytesToSkip, a.Val, "style-attribute", "css")
 			}
 		case astro.EmptyAttribute:
 			p.print(a.Key)
@@ -733,10 +770,10 @@ declare const Astro: Readonly<import('astro').AstroGlobal<%s, typeof %s`, propsI
 
 	if n.FirstChild != nil && (n.DataAtom == atom.Script || n.DataAtom == atom.Style) {
 		if n.DataAtom == atom.Script {
-			p.addTSXScript(startTagEnd, endLoc-p.bytesToSkip, n.FirstChild.Data, getScriptTypeForNode(*n))
+			p.addTSXScript(startTagEnd, endLoc-p.bytesToSkip, n.FirstChild.Data, getScriptTypeFromAttrs(n.Attr))
 		}
 		if n.DataAtom == atom.Style {
-			p.addTSXStyle(startTagEnd, endLoc-p.bytesToSkip, n.FirstChild.Data, "tag")
+			p.addTSXStyle(startTagEnd, endLoc-p.bytesToSkip, n.FirstChild.Data, "tag", getStyleLangFromAttrs(n.Attr))
 		}
 	}
 

internal/printer/printer.go

@@ -96,14 +96,15 @@ func (p *printer) addTSXScript(start int, end int, content string, scriptType st
 	})
 }
 
-func (p *printer) addTSXStyle(start int, end int, content string, styleType string) {
+func (p *printer) addTSXStyle(start int, end int, content string, styleType string, styleLang string) {
 	p.ranges.Styles = append(p.ranges.Styles, TSXExtractedTag{
 		Loc: loc.TSXRange{
 			Start: start,
 			End:   end,
 		},
 		Content: content,
 		Type:    styleType,
+		Lang:    styleLang,
 	})
 }
 

packages/compiler/src/shared/types.ts

@@ -135,11 +135,22 @@ export interface TSXExtractedTag {
 }
 
 export interface TSXExtractedScript extends TSXExtractedTag {
-	type: 'processed-module' | 'module' | 'inline' | 'event-attribute' | 'json' | 'unknown';
+	type: 'processed-module' | 'module' | 'inline' | 'event-attribute' | 'json' | 'raw' | 'unknown';
 }
 
 export interface TSXExtractedStyle extends TSXExtractedTag {
 	type: 'tag' | 'style-attribute';
+	lang:
+		| 'css'
+		| 'scss'
+		| 'sass'
+		| 'less'
+		| 'stylus'
+		| 'styl'
+		| 'postcss'
+		| 'pcss'
+		| 'unknown'
+		| (string & {});
 }
 
 export interface TSXResult {

packages/compiler/test/tsx/meta.ts

@@ -39,7 +39,7 @@ test('return ranges - no frontmatter', async () => {
 });
 
 test('extract scripts', async () => {
-	const input = `<script type="module">console.log({ test: \`literal\` })</script><script type="text/partytown">console.log({ test: \`literal\` })</script><script type="application/ld+json">{"a":"b"}</script><script is:inline>console.log("hello")</script><div onload="console.log('hey')"></div>`;
+	const input = `<script type="module">console.log({ test: \`literal\` })</script><script type="text/partytown">console.log({ test: \`literal\` })</script><script type="application/ld+json">{"a":"b"}</script><script is:inline>console.log("hello")</script><div onload="console.log('hey')"></div><script>console.log({ test: \`literal\` })</script><script is:raw>something;</script>`;
 
 	const { metaRanges } = await convertToTSX(input, { sourcemap: 'external' });
 	assert.equal(
@@ -52,6 +52,7 @@ test('extract scripts', async () => {
 				},
 				type: 'module',
 				content: 'console.log({ test: `literal` })',
+				lang: '',
 			},
 			{
 				position: {
@@ -60,6 +61,7 @@ test('extract scripts', async () => {
 				},
 				type: 'inline',
 				content: 'console.log({ test: `literal` })',
+				lang: '',
 			},
 			{
 				position: {
@@ -68,6 +70,7 @@ test('extract scripts', async () => {
 				},
 				type: 'json',
 				content: '{"a":"b"}',
+				lang: '',
 			},
 			{
 				position: {
@@ -76,6 +79,7 @@ test('extract scripts', async () => {
 				},
 				type: 'inline',
 				content: 'console.log("hello")',
+				lang: '',
 			},
 			{
 				position: {
@@ -84,14 +88,33 @@ test('extract scripts', async () => {
 				},
 				type: 'event-attribute',
 				content: "console.log('hey')",
+				lang: '',
+			},
+			{
+				position: {
+					start: 281,
+					end: 346,
+				},
+				type: 'processed-module',
+				content: 'console.log({ test: `literal` })',
+				lang: '',
+			},
+			{
+				position: {
+					start: 337,
+					end: 358,
+				},
+				type: 'raw',
+				content: 'something;',
+				lang: '',
 			},
 		],
 		'expected metaRanges.scripts to match snapshot'
 	);
 });
 
 test('extract styles', async () => {
-	const input = `<style>body { color: red; }</style><div style="color: blue;"></div>`;
+	const input = `<style>body { color: red; }</style><div style="color: blue;"></div><style lang="scss">body { color: red; }</style><style lang="pcss">body { color: red; }</style>`;
 
 	const { metaRanges } = await convertToTSX(input, { sourcemap: 'external' });
 	assert.equal(
@@ -104,6 +127,7 @@ test('extract styles', async () => {
 				},
 				type: 'tag',
 				content: 'body { color: red; }',
+				lang: 'css',
 			},
 			{
 				position: {
@@ -112,6 +136,25 @@ test('extract styles', async () => {
 				},
 				type: 'style-attribute',
 				content: 'color: blue;',
+				lang: 'css',
+			},
+			{
+				position: {
+					start: 86,
+					end: 127,
+				},
+				type: 'tag',
+				content: 'body { color: red; }',
+				lang: 'scss',
+			},
+			{
+				position: {
+					start: 133,
+					end: 174,
+				},
+				type: 'tag',
+				content: 'body { color: red; }',
+				lang: 'pcss',
 			},
 		],
 		'expected metaRanges.styles to match snapshot'