refactor: update SCSS syntax & remove open-color dep (#10633)

scripts/buildPackage.js

@@ -1,4 +1,6 @@
 const path = require("path");
+const fs = require("fs");
+const { pathToFileURL } = require("url");
 
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
@@ -16,6 +18,44 @@ const ENV_VARS = {
   },
 };
 
+// Resolve a relative path from the source file's directory
+const resolveRelativePath = (importPath, sourceFile) => {
+  const sourceDir = path.dirname(sourceFile);
+  const extensions = [".scss", ".css", ""];
+
+  for (const ext of extensions) {
+    const fullPath = path.resolve(sourceDir, importPath + ext);
+    if (fs.existsSync(fullPath)) {
+      return fullPath;
+    }
+    // Try with underscore prefix for partials
+    const partialPath = path.join(
+      path.dirname(fullPath),
+      `_${path.basename(fullPath)}`,
+    );
+    if (fs.existsSync(partialPath)) {
+      return partialPath;
+    }
+  }
+  return null;
+};
+
+// Precompile function to convert relative paths to absolute paths
+const precompile = (source, sourcePath) => {
+  // Match @use and @forward statements with relative paths
+  const importRegex = /(@use|@forward)\s+["'](\.[^"']+)["']/g;
+
+  return source.replace(importRegex, (match, directive, importPath) => {
+    const resolvedPath = resolveRelativePath(importPath, sourcePath);
+    if (resolvedPath) {
+      // Convert to file:// URL format for sass
+      const fileUrl = pathToFileURL(resolvedPath).href;
+      return `${directive} "${fileUrl}"`;
+    }
+    return match;
+  });
+};
+
 // excludes all external dependencies and bundles only the source code
 const getConfig = (outdir) => ({
   outdir,
@@ -23,7 +63,11 @@ const getConfig = (outdir) => ({
   splitting: true,
   format: "esm",
   packages: "external",
-  plugins: [sassPlugin()],
+  plugins: [
+    sassPlugin({
+      precompile,
+    }),
+  ],
   target: "es2020",
   assetNames: "[dir]/[name]",
   chunkNames: "[dir]/[name]-[hash]",