DEV: Introduce postcss for autoprefix and light-dark() polyfill (#31393)

Introduces PostCSS at the end of our CSS compilation pipeline. For now,
just adds autoprefixer and light-dark polyfill.

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

@@ -0,0 +1,49 @@
+/* eslint-disable no-bitwise */
+
+// Simple, fast hashing function (djb2)
+const hashString = (str) => {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i);
+    hash = hash >>> 0; // Convert to unsigned 32-bit integer
+  }
+  return hash.toString(16).slice(0, 8);
+};
+
+/**
+ * Adds a hash of the current file as a prefix to variables
+ * introduced by the light-dark polyfill. This ensures that
+ * usage across different files cannot conflict.
+ */
+
+const namespacesToPrefix = ["--csstools-light-dark-toggle-"];
+export default function postcssVariablePrefixer() {
+  let hash;
+
+  return {
+    postcssPlugin: "postcss-var-prefixer",
+
+    prepare(result) {
+      hash = hashString(result.root.source.input.css);
+    },
+
+    Declaration(declaration) {
+      const prop = declaration.prop;
+
+      for (const prefix of namespacesToPrefix) {
+        if (declaration.prop.startsWith(prefix)) {
+          declaration.prop = `--${hash}-${prop.slice(2)}`;
+        }
+
+        if (declaration.value.includes(prefix)) {
+          declaration.value = declaration.value.replaceAll(
+            prefix,
+            `--${hash}-${prefix.slice(2)}`
+          );
+        }
+      }
+    },
+  };
+}
+
+postcssVariablePrefixer.postcss = true;