feat: import only CSS module names with the 'cssmodulenames' import a…

…ttribute
joelmoss · Jan 24, 2025 · 3699f7a · 3699f7a
1 parent e1aac65
commit 3699f7a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/go.mod b/go.mod
@@ -35,7 +35,7 @@ require (
 	github.com/peterbourgon/mergemap v0.0.1
 	github.com/riking/cssparse v0.0.0-20180325025645-c37ded0aac89
 	github.com/rogpeppe/go-internal v1.13.1 // indirect
-	golang.org/x/sys v0.28.0 // indirect
+	golang.org/x/sys v0.29.0 // indirect
 	golang.org/x/text v0.21.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1
 )
diff --git a/go.sum b/go.sum
@@ -68,8 +68,8 @@ github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf
 golang.org/x/net v0.33.0 h1:74SYHlV8BIgHIFC/LrYkOGIwL19eTYXQ5wc6TBuO36I=
 golang.org/x/net v0.33.0/go.mod h1:HXLR5J+9DxmrqMwG9qjGCxZ+zKXxBru04zlTvWlWuN4=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
-golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.29.0 h1:TPYlXGxvx1MGTn2GiZDhnjPA9wZzZeGKHHmKhHYvgaU=
+golang.org/x/sys v0.29.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
 golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
 golang.org/x/tools v0.28.0 h1:WuB6qZ4RPCQo5aP3WdKZS7i595EdWqWR8vqJTlwTVK8=

diff --git a/internal/plugin/css.go b/internal/plugin/css.go
@@ -38,36 +38,43 @@ var Css = esbuild.Plugin{
 				// contents in a <style> tag in the <head> of the page, and if the stylesheet is a CSS
 				// module, it exports a plain object of class names.
 				if pluginData.ImportedFromJs {
-					cssResult := cssBuild(CssBuildOptions{
-						Path: urlPath[1:],
-						Root: root,
-					})
-
-					if len(cssResult.Errors) != 0 {
-						return esbuild.OnLoadResult{
-							Errors:   cssResult.Errors,
-							Warnings: cssResult.Warnings,
-						}, fmt.Errorf("%s", cssResult.Errors[0].Text)
-					}
-
-					contents := strings.TrimSpace(string(cssResult.OutputFiles[0].Contents))
-					contents = `
-						const existingStyle = document.querySelector('#_` + hash + `');
-						const existingLink = document.querySelector('link[href="` + urlPath + `"]');
-						const existingOriginalLink = document.querySelector('link[data-original-href="` + urlPath + `"]');
-						if (!existingStyle && !existingLink && !existingOriginalLink) {
-							const e = document.createElement('style');
-							e.id = '_` + hash + `';
-							e.dataset.href = '` + urlPath + `';
-							e.dataset.prosceniumStyle = true;
-							e.appendChild(document.createTextNode(` + fmt.Sprintf("String.raw`%s`", contents) + `));
-							const pStyleEle = document.head.querySelector('[data-proscenium-style]');
-							pStyleEle ? document.head.insertBefore(e, pStyleEle) : document.head.appendChild(e);
+					contents := ""
+
+					if utils.PathIsCssModule(args.Path) && args.With["type"] == "cssmodulenames" {
+						// User has requested only the CSS module names be returned.
+						contents = cssModulesProxyTemplate(hash)
+					} else {
+						cssResult := cssBuild(CssBuildOptions{
+							Path: urlPath[1:],
+							Root: root,
+						})
+
+						if len(cssResult.Errors) != 0 {
+							return esbuild.OnLoadResult{
+								Errors:   cssResult.Errors,
+								Warnings: cssResult.Warnings,
+							}, fmt.Errorf("%s", cssResult.Errors[0].Text)
 						}
-					`
 
-					if utils.PathIsCssModule(args.Path) {
-						contents = contents + cssModulesProxyTemplate(hash)
+						contents = strings.TrimSpace(string(cssResult.OutputFiles[0].Contents))
+						contents = `
+							const existingStyle = document.querySelector('#_` + hash + `');
+							const existingLink = document.querySelector('link[href="` + urlPath + `"]');
+							const existingOriginalLink = document.querySelector('link[data-original-href="` + urlPath + `"]');
+							if (!existingStyle && !existingLink && !existingOriginalLink) {
+								const e = document.createElement('style');
+								e.id = '_` + hash + `';
+								e.dataset.href = '` + urlPath + `';
+								e.dataset.prosceniumStyle = true;
+								e.appendChild(document.createTextNode(` + fmt.Sprintf("String.raw`%s`", contents) + `));
+								const pStyleEle = document.head.querySelector('[data-proscenium-style]');
+								pStyleEle ? document.head.insertBefore(e, pStyleEle) : document.head.appendChild(e);
+							}
+						`
+
+						if utils.PathIsCssModule(args.Path) {
+							contents = contents + cssModulesProxyTemplate(hash)
+						}
 					}
 
 					return esbuild.OnLoadResult{

diff --git a/test/build_to_path_test.go b/test/build_to_path_test.go
@@ -40,7 +40,7 @@ var _ = Describe("BuildToPath", func() {
 
 			_, code := b.BuildToPath("gem4/lib/gem4/gem4.js;lib/gems/gem3.js;lib/foo.css")
 
-			Expect(code).To(Equal("gem4/lib/gem4/gem4.js::public/assets/gem4/lib/gem4/gem4$YQBH44X7$.js;lib/gems/gem3.js::public/assets/lib/gems/gem3$BPCGTVQJ$.js;lib/foo.css::public/assets/lib/foo$EAILS7QS$.css"))
+			Expect(code).To(Equal("gem4/lib/gem4/gem4.js::public/assets/gem4/lib/gem4/gem4$ZNBNP5VZ$.js;lib/gems/gem3.js::public/assets/lib/gems/gem3$BXE432DM$.js;lib/foo.css::public/assets/lib/foo$EAILS7QS$.css"))
 		})
 	})
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,7 @@ var _ = Describe("BuildToPath", func() { @@
     			_, code := b.BuildToPath("gem4/lib/gem4/gem4.js;lib/gems/gem3.js;lib/foo.css")
-    			Expect(code).To(Equal("gem4/lib/gem4/gem4.js::public/assets/gem4/lib/gem4/gem4$YQBH44X7$.js;lib/gems/gem3.js::public/assets/lib/gems/gem3$BPCGTVQJ$.js;lib/foo.css::public/assets/lib/foo$EAILS7QS$.css"))
+    			Expect(code).To(Equal("gem4/lib/gem4/gem4.js::public/assets/gem4/lib/gem4/gem4$ZNBNP5VZ$.js;lib/gems/gem3.js::public/assets/lib/gems/gem3$BXE432DM$.js;lib/foo.css::public/assets/lib/foo$EAILS7QS$.css"))
     		})
     	})
     })
@@ Expand Down @@