Bug/leading slash in CSS (<link>) paths break bundling (#981)

* normalize leading / for CSS bundling paths * update test cases * remove console logs
ProjectEvergreen · Nov 12, 2022 · 6398b48 · 6398b48
1 parent bba98ef
commit 6398b48
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/cli/src/lifecycles/bundle.js b/packages/cli/src/lifecycles/bundle.js
@@ -65,10 +65,11 @@ async function bundleStyleResources(compilation, optimizationPlugins) {
       if (src) {
         const basename = path.basename(srcPath);
         const basenamePieces = path.basename(srcPath).split('.');
+        const fileNamePieces = srcPath.split('/').filter(piece => piece !== ''); // normalize by removing any leading /'s  
 
         optimizedFileName = srcPath.indexOf('/node_modules') >= 0
           ? `${basenamePieces[0]}.${hashString(contents)}.css`
-          : srcPath.replace(basename, `${basenamePieces[0]}.${hashString(contents)}.css`);
+          : fileNamePieces.join('/').replace(basename, `${basenamePieces[0]}.${hashString(contents)}.css`);
       } else {
         optimizedFileName = `${hashString(contents)}.css`;
       }

diff --git a/...ses/build.default.workspace-javascript-css/build.default.workspace-javascript-css.spec.js b/...ses/build.default.workspace-javascript-css/build.default.workspace-javascript-css.spec.js
@@ -105,7 +105,9 @@ describe('Build Greenwood With: ', function() {
       it('should have one <script> tag for non-module.js loaded in the <head>', function() {
         const scriptTags = dom.window.document.querySelectorAll('head > script[src]');
         const mainScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
-          return (/non-module.*[a-z0-9].js/).test(script.src);
+          const src = script.getAttribute('src');
+
+          return (/non-module.*[a-z0-9].js/).test(src) && src.indexOf('//') < 0;
         });
 
         expect(mainScriptTags.length).to.be.equal(1);
@@ -148,8 +150,12 @@ describe('Build Greenwood With: ', function() {
         const linkTags = dom.window.document.querySelectorAll('head > link[rel="stylesheet"]');
 
         expect(linkTags.length).to.be.equal(2);
+
         linkTags.forEach(link => {
-          expect((/.*[a-z0-9].css/).test(link.href)).to.be.equal(true);
+          const href = link.getAttribute('href');
+          const hrefPieces = link.getAttribute('href').split('/');
+
+          expect(href).to.be.equal(`/styles/${hrefPieces[2]}`);
         });
       });
 

diff --git a/packages/cli/test/cases/build.default.workspace-javascript-css/src/pages/index.html b/packages/cli/test/cases/build.default.workspace-javascript-css/src/pages/index.html
@@ -17,7 +17,7 @@
     </style>
 
     <link rel="stylesheet" href="../styles/main.css"></link>
-    <link href="../styles/other.css" rel="stylesheet"></link>
+    <link href="/styles/other.css" rel="stylesheet"></link>
 
     <script type="module">
       const two = 'script tag module inline two';
@@ -46,7 +46,7 @@
         })
     </script>
 
-    <script src="../scripts/non-module.js"></script>
+    <script src="/scripts/non-module.js"></script>
   </head>
 
   <body>