DEV: Improve postcss error handling (#31420)

Followup to 087e8e4bdb53f71930ec5c930c463c37dd2bd58d

- Fixes the variable-prefixer so it doesn't explode when the input is
unparseable
- Add URL polyfills so that postcss can print its errors properly
- Catch postcss errors in the same way as sass errors

app/assets/javascripts/theme-transpiler/build.js

@@ -51,6 +51,7 @@ esbuild
     alias: {
       util: "./node_modules/@zxing/text-encoding",
       path: "path-browserify",
+      url: "./url-polyfill",
       "source-map-js": "source-map-js",
     },
     banner: {

app/assets/javascripts/theme-transpiler/package.json

@@ -13,6 +13,7 @@
     "autoprefixer": "^10.4.20",
     "babel-plugin-ember-template-compilation": "^2.3.0",
     "content-tag": "^3.1.1",
+    "core-js": "^3.40.0",
     "decorator-transforms": "^2.3.0",
     "discourse": "workspace:0.0.0",
     "discourse-widget-hbs": "workspace:1.0.0",

app/assets/javascripts/theme-transpiler/postcss-variable-prefixer.js

@@ -23,8 +23,8 @@ export default function postcssVariablePrefixer() {
   return {
     postcssPlugin: "postcss-var-prefixer",
 
-    prepare(result) {
-      hash = hashString(result.root.source.input.css);
+    Once(root) {
+      hash = hashString(root.source.input.css);
     },
 
     Declaration(declaration) {

app/assets/javascripts/theme-transpiler/postcss.js

@@ -1,3 +1,4 @@
+import "core-js/actual/url";
 import postcssLightDark from "@csstools/postcss-light-dark-function";
 import autoprefixer from "autoprefixer";
 import postcss from "postcss";

app/assets/javascripts/theme-transpiler/url-polyfill.js

@@ -0,0 +1,7 @@
+export function pathToFileURL(path) {
+  return new URL(path, "file://").toString();
+}
+
+export function fileURLToPath(url) {
+  return new URL(url).pathname;
+}

lib/stylesheet/manager/builder.rb

@@ -49,7 +49,7 @@ class Stylesheet::Manager::Builder
           load_paths: load_paths,
           dark: @dark,
         )
-      rescue SassC::SyntaxError, SassC::NotRenderedError => e
+      rescue SassC::SyntaxError, SassC::NotRenderedError, DiscourseJsProcessor::TranspileError => e
         if Stylesheet::Importer::THEME_TARGETS.include?(@target.to_s)
           # no special errors for theme, handled in theme editor
           ["", nil]

pnpm-lock.yaml

@@ -1030,6 +1030,9 @@ importers:
       content-tag:
         specifier: ^3.1.1
         version: 3.1.1(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+      core-js:
+        specifier: ^3.40.0
+        version: 3.40.0
       decorator-transforms:
         specifier: ^2.3.0
         version: 2.3.0(@babel/core@7.26.9)

spec/lib/stylesheet/compiler_spec.rb

@@ -245,5 +245,19 @@ RSpec.describe Stylesheet::Compiler do
       expect(css).to include("csstools-light-dark-toggle")
       expect(map.size).to be > 10
     end
+
+    it "handles errors gracefully" do
+      bad_css = <<~SCSS
+        $foo: unquote("https://notacolor.example.com");
+        .example {
+          color: $foo;
+        }
+      SCSS
+
+      expect { Stylesheet::Compiler.compile(bad_css, "test.scss") }.to raise_error(
+        DiscourseJsProcessor::TranspileError,
+        /Missed semicolon/,
+      )
+    end
   end
 end