Prevent including module metadata imports for side-effectual CSS (#410)

* Prevent including module metadata imports for side-effectual CSS

* Adds a changeset

* Change escaping for lint

* Update expression

.changeset/shiny-dots-care.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Prevent side-effectual CSS imports from becoming module metadata

internal/printer/printer.go

@@ -2,6 +2,7 @@ package printer
 
 import (
 	"fmt"
+	"regexp"
 	"strings"
 
 	astro "github.com/withastro/compiler/internal"
@@ -43,6 +44,7 @@ var RESULT = "$$result"
 var SLOTS = "$$slots"
 var FRAGMENT = "Fragment"
 var BACKTICK = "`"
+var styleModuleSpecExp = regexp.MustCompile(`(\.css|\.pcss|\.postcss|\.sass|\.scss|\.styl|\.stylus|\.less)$`)
 
 func (p *printer) print(text string) {
 	p.output = append(p.output, text...)
@@ -441,10 +443,18 @@ func (p *printer) printComponentMetadata(doc *astro.Node, opts transform.Transfo
 				assertions += " assert "
 				assertions += statement.Assertions
 			}
-			p.print(fmt.Sprintf("\nimport * as $$module%v from '%s'%s;", modCount, statement.Specifier, assertions))
-			specs = append(specs, statement.Specifier)
-			asrts = append(asrts, statement.Assertions)
-			modCount++
+
+			isCssImport := false
+			if len(statement.Imports) == 0 && styleModuleSpecExp.MatchString(statement.Specifier) {
+				isCssImport = true
+			}
+
+			if !isCssImport {
+				p.print(fmt.Sprintf("\nimport * as $$module%v from '%s'%s;", modCount, statement.Specifier, assertions))
+				specs = append(specs, statement.Specifier)
+				asrts = append(asrts, statement.Assertions)
+				modCount++
+			}
 		}
 		loc, statement = js_scanner.NextImportStatement(source, loc)
 	}

internal/printer/printer_test.go

@@ -221,6 +221,19 @@ import data from "test" assert { type: 'json' };
 				code: `<p>Hello, world! This is a <em>buggy</em> formula: <span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>f</mi><mspace></mspace><mspace width="0.1111em"></mspace><mo lspace="0em" rspace="0.17em"></mo><mtext> ⁣</mtext><mo lspace="0em" rspace="0em">:</mo><mspace width="0.3333em"></mspace><mi>X</mi><mo>→</mo><msup><mi mathvariant="double-struck">R</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup></mrow><annotation encoding="application/x-tex">f\\colon X \\to \\mathbb R^{2x}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal" style="margin-right:0.10764em;">f</span><span class="mspace nobreak"></span><span class="mspace" style="margin-right:0.1111em;"></span><span class="mpunct"></span><span class="mspace" style="margin-right:-0.1667em;"></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord"><span class="mrel">:</span></span><span class="mspace" style="margin-right:0.3333em;"></span><span class="mord mathnormal" style="margin-right:0.07847em;">X</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">→</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.8141em;"></span><span class="mord"><span class="mord mathbb">R</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">2</span><span class="mord mathnormal mtight">x</span></span></span></span></span></span></span></span></span></span></span></span></span></p>`,
 			},
 		},
+		{
+			name: "css imports are not included in module metadata",
+			source: `---
+			import './styles.css';
+			---
+			`,
+			want: want{
+				frontmatter: []string{
+					`import './styles.css';`,
+				},
+				styles: []string{},
+			},
+		},
 		{
 			name:   "solidus in template literal expression",
 			source: "<div value={`${attr ? `a/b` : \"c\"} awesome`} />",