dartsass: Import CSS without extension at compile time

Applicable to Dart Sass only: - Sass imports with the .css extension indicate a plain CSS @import. - Sass imports without the .css extension are imported at compile time. Fixes gohugoio#10592
jmooring · Feb 24, 2023 · 867f206 · 867f206
1 parent e442a63
commit 867f206
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 6 deletions.
diff --git a/resources/resource_transformers/tocss/dartsass/integration_test.go b/resources/resource_transformers/tocss/dartsass/integration_test.go
@@ -101,14 +101,77 @@ T1: {{ $r.Content | safeHTML }}
 		moo {
 		  color: #fff;
 		}
-		
+
 		moo {
 		  color: #fff;
 		}
-		
+
 		/* foo */`)
 }
 
+// Issue 10592
+func TestTransformImportMountedCSS(t *testing.T) {
+	t.Parallel()
+	if !dartsass.Supports() {
+		t.Skip()
+	}
+
+	files := `
+-- assets/main.scss --
+@import "import-this-file.css";
+@import "foo/import-this-mounted-file.css";
+@import "compile-this-file";
+@import "foo/compile-this-mounted-file";
+a {color: main-scss;}
+-- assets/_compile-this-file.css --
+a {color: compile-this-file-css;}
+-- assets/_import-this-file.css --
+a {color: import-this-file-css;}
+-- foo/_compile-this-mounted-file.css --
+a {color: compile-this-mounted-file-css;}
+-- foo/_import-this-mounted-file.css --
+a {color: import-this-mounted-file-css;}
+-- layouts/index.html --
+{{- $opts := dict "transpiler" "dartsass" }}
+{{- with resources.Get "main.scss" | toCSS $opts }}{{ .Content | safeHTML }}{{ end }}
+-- config.toml --
+disableKinds = ['RSS','sitemap','taxonomy','term','page','section']
+
+[[module.mounts]]
+source = 'assets'
+target = 'assets'
+
+[[module.mounts]]
+source = 'foo'
+target = 'assets/foo'
+	`
+	b := hugolib.NewIntegrationTestBuilder(
+		hugolib.IntegrationTestConfig{
+			T:           t,
+			TxtarString: files,
+			NeedsOsFS:   true,
+		},
+	).Build()
+
+	// Dart Sass does not follow regular CSS import, but they
+	// get pulled to the top.
+	b.AssertFileContent("public/index.html", `
+		@import "import-this-file.css";
+		@import "foo/import-this-mounted-file.css";
+		a {
+			color: compile-this-file-css;
+		}
+
+		a {
+			color: compile-this-mounted-file-css;
+		}
+
+		a {
+			color: main-scss;
+		}
+	`)
+}
+
 func TestTransformThemeOverrides(t *testing.T) {
 	t.Parallel()
 	if !dartsass.Supports() {
@@ -291,7 +354,7 @@ body {
 	body {
 		background: url(vars.$image) no-repeat center/cover;
 		font-family: vars.$font;
-	  }	  
+	  }
 }
 
 p {
@@ -341,7 +404,7 @@ image = "images/hero.jpg"
 body {
 	body {
 		background: url(vars.$image) no-repeat center/cover;
-	  }	  
+	  }
 }
 
 p {

diff --git a/resources/resource_transformers/tocss/dartsass/transform.go b/resources/resource_transformers/tocss/dartsass/transform.go
@@ -163,9 +163,9 @@ func (t importResolver) CanonicalizeURL(url string) (string, error) {
 	if strings.Contains(name, ".") {
 		namePatterns = []string{"_%s", "%s"}
 	} else if strings.HasPrefix(name, "_") {
-		namePatterns = []string{"_%s.scss", "_%s.sass"}
+		namePatterns = []string{"_%s.scss", "_%s.sass", "_%s.css"}
 	} else {
-		namePatterns = []string{"_%s.scss", "%s.scss", "_%s.sass", "%s.sass"}
+		namePatterns = []string{"_%s.scss", "%s.scss", "_%s.sass", "%s.sass", "_%s.css", "%s.css"}
 	}
 
 	name = strings.TrimPrefix(name, "_")