Add resourcePath to fix source map bug (#17)

Without specifying a resourcePath for the CSS that’s extracted from the component template we are seeing build errors from the resource path starting with encoded <. This also renames the file parameter in the virtual loader path to css, which is more clear.
cardstack · Jun 6, 2023 · f52c8cc · f52c8cc
1 parent 75af638
commit f52c8cc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/glimmer-scoped-css/src/ast-transform.ts b/glimmer-scoped-css/src/ast-transform.ts
@@ -37,7 +37,7 @@ const scopedCSSTransform: ASTPluginBuilder<Env> = (env) => {
           let encodedCss = encodeURIComponent(btoa(textContent(node)));
 
           jsutils.importForSideEffect(
-            `style-loader!css-loader!glimmer-scoped-css/virtual-loader?file=${encodedCss}&selector=${dataAttribute}!`
+            `style-loader!css-loader!glimmer-scoped-css/virtual-loader?path=${env.filename}&css=${encodedCss}&selector=${dataAttribute}!`
           );
           return null;
         } else {

diff --git a/glimmer-scoped-css/src/virtual-loader.ts b/glimmer-scoped-css/src/virtual-loader.ts
@@ -3,34 +3,44 @@ import postcss from 'postcss';
 import scopedStylesPlugin from './postcss-plugin';
 
 export default function virtualLoader(this: LoaderContext<unknown>) {
-  let encodedCssAndSelectorString = this.loaders[this.loaderIndex]?.options;
+  let optionsString = this.loaders[this.loaderIndex]?.options;
 
-  if (typeof encodedCssAndSelectorString !== 'string') {
+  if (typeof optionsString !== 'string') {
     throw new Error(
-      `glimmer-scoped-css/src/virtual-loader received unexpected request: ${encodedCssAndSelectorString}`
+      `glimmer-scoped-css/src/virtual-loader received unexpected request: ${optionsString}`
     );
   }
 
-  let encodedCssAndSelector = new URLSearchParams(encodedCssAndSelectorString);
+  let options = new URLSearchParams(optionsString);
 
-  let encodedCss = encodedCssAndSelector.get('file');
+  let encodedCss = options.get('css');
 
   if (!encodedCss) {
     throw new Error(
-      `glimmer-scoped-css/src/virtual-loader missing file parameter: ${encodedCssAndSelectorString}`
+      `glimmer-scoped-css/src/virtual-loader missing file parameter: ${optionsString}`
     );
   }
 
-  let cssSelector = encodedCssAndSelector.get('selector');
+  let cssSelector = options.get('selector');
 
   if (!cssSelector) {
     throw new Error(
-      `glimmer-scoped-css/src/virtual-loader missing selector parameter: ${encodedCssAndSelectorString}`
+      `glimmer-scoped-css/src/virtual-loader missing selector parameter: ${optionsString}`
+    );
+  }
+
+  let path = options.get('path');
+
+  if (!path) {
+    throw new Error(
+      `glimmer-scoped-css/src/virtual-loader missing path parameter: ${optionsString}`
     );
   }
 
   let cssSource = atob(decodeURIComponent(encodedCss));
   let result = postcss([scopedStylesPlugin(cssSelector)]).process(cssSource);
 
+  this.resourcePath = path;
+
   return result.css;
 }