add sass sourcemaps

gwleuverink · Feb 18, 2024 · 5ac71f8 · 5ac71f8
1 parent a3546a3
commit 5ac71f8
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 15 deletions.
diff --git a/src/Bundlers/Bun/bin/plugins/css-loader.js b/src/Bundlers/Bun/bin/plugins/css-loader.js
@@ -50,9 +50,9 @@ const compileCss = async function (filename, opts) {
         targets,
         filename,
 
+        errorRecovery: true,
         minify: opts.minify,
         sourceMap: opts.sourcemaps,
-        errorRecovery: true,
     });
 
     let css = code.toString();
@@ -73,30 +73,47 @@ const compileSass = async function (filename, opts) {
         exit("sass-not-installed");
     });
 
-    const source = sass.compile(filename);
     const targets = await determineTargets(opts.browserslist);
-    const { code, map } = lightningcss.transform({
+
+    // NOTE: we could use a custom importer to remap sourcemap url's here. But might be able to reuse The one we use for the CSS loader
+    const source = await sass.compileAsync(filename, {
+        sourceMap: opts.sourcemaps,
+        sourceMapIncludeSources: opts.sourcemaps // inlines source countent. refactor when adding extenral sourcemaps
+    });
+
+    let { code, map } = lightningcss.transform({
         targets,
         code: Buffer.from(source.css),
+        filename: opts.sourcemaps
+            ? filename
+            : null,
 
+        errorRecovery: true,
         minify: opts.minify,
         sourceMap: opts.sourcemaps,
-        errorRecovery: true,
-        // sourceMap: false, // Files not generated. must handle artifacts manually. disable for now
+        inputSourceMap: JSON.stringify(source.sourceMap),
     });
 
-    return JSON.stringify(code.toString());
+    let css = code.toString();
+
+    if (map) {
+        map = rewriteSourcemapPaths(map);
+        css = `${css}\n/*# sourceMappingURL=data:application/json;base64,${btoa(JSON.stringify(map))} */`
+    }
+
+    return JSON.stringify(css);
 };
 
 const rewriteSourcemapPaths = function (map) {
-    const replace =
-        process.env["APP_ENV"] === "testing"
-            ? process.cwd().replace(/^\/+|\/+$/g, "") + "/workbench"
-            : process.cwd().replace(/^\/+|\/public+$/g, "");
+
+    const replacePath = process.env["APP_ENV"] === "testing"
+        ? process.cwd().replace(/^\/+|\/+$/g, "") + "/workbench"
+        : process.cwd().replace(/^\/+|\/public+$/g, "");
 
     map = JSON.parse(map);
+
     map.sources = map.sources.map((path) => {
-        return path.replace(replace, "..");
+        return path.replace(replacePath, "..")
     });
 
     return map;

diff --git a/tests/Browser/CssLoaderTest.php b/tests/Browser/CssLoaderTest.php
@@ -127,24 +127,86 @@ public function it_doesnt_minify_css_when_minification_disabled()
     /** @test */
     public function it_generates_sourcemaps_when_enabled()
     {
-        $this->markTestSkipped('not implemented');
+        $this->beforeServingApplication(function ($app, $config) {
+            $config->set('bundle.minify', true);
+            $config->set('bundle.sourcemaps', true);
+        });
+
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="css/red-background.css" />
+        HTML);
+
+        // Assert output contains encoded sourcemap (flaky. asserting on encoded sting)
+        $browser->assertScript(
+            'document.querySelector(`style[data-module="css/red-background.css"]`).innerHTML.startsWith("html{background:red}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjpudWxsLCJtYXBwaW5ncyI6IkFBQUEi")',
+            true
+        );
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
     }
 
     /** @test */
     public function it_doesnt_generate_sourcemaps_by_default()
     {
-        $this->markTestSkipped('not implemented');
+        $this->beforeServingApplication(function ($app, $config) {
+            $config->set('bundle.minify', true);
+            $config->set('bundle.sourcemaps', false);
+        });
+
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="css/red-background.css" />
+        HTML);
+
+        $browser->assertScript(
+            'document.querySelector(`style[data-module="css/red-background.css"]`).innerHTML',
+            'html{background:red}'
+        );
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
     }
 
     /** @test */
     public function it_generates_scss_sourcemaps_when_enabled()
     {
-        $this->markTestSkipped('not implemented');
+        $this->beforeServingApplication(function ($app, $config) {
+            $config->set('bundle.minify', true);
+            $config->set('bundle.sourcemaps', true);
+        });
+
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="css/blue-background.scss" />
+        HTML);
+
+        // Assert output contains encoded sourcemap (flaky. asserting on encoded sting)
+        $browser->assertScript(
+            'document.querySelector(`style[data-module="css/blue-background.scss"]`).innerHTML.startsWith("html body{background:#00f}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290Ij")',
+            true
+        );
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
     }
 
     /** @test */
     public function it_doesnt_generate_scss_sourcemaps_by_default()
     {
-        $this->markTestSkipped('not implemented');
+        $this->beforeServingApplication(function ($app, $config) {
+            $config->set('bundle.minify', true);
+            $config->set('bundle.sourcemaps', false);
+        });
+
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="css/blue-background.scss" />
+        HTML);
+
+        $browser->assertScript(
+            'document.querySelector(`style[data-module="css/blue-background.scss"]`).innerHTML',
+            'html body{background:#00f}'
+        );
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
     }
 }