refactor(@angular-devkit/build-angular): remove duplicate namespaces in esbuild metafile paths

clydin · angular-robot[bot] · commit 64b66280e29c · 2023-01-09T14:42:17.000Z
Within the experimental esbuild-based browser application builder, the internal paths for angular
component stylesheets were being displayed in the esbuild metafile with a duplicate namespace prefix.
This had no functional difference to the build output but it did make the paths in the metafile
unnecessarily long and potentially confusing. The paths now only contain the prefix a single time.
This also has the benefit of reducing the length of the filter regular expressions for the stylesheet
plugins used for Angular component styles by not needing to match the namespace in the path in addition
to the namespace option.
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts
@@ -62,18 +62,15 @@ export function createSassPlugin(options: SassPluginOptions): Plugin {
         return result;
       };
 
-      build.onLoad(
-        { filter: /^angular:styles\/component;s[ac]ss;/, namespace: 'angular:styles/component' },
-        async (args) => {
-          const data = options.inlineComponentData?.[args.path];
-          assert(data, `component style name should always be found [${args.path}]`);
+      build.onLoad({ filter: /^s[ac]ss;/, namespace: 'angular:styles/component' }, async (args) => {
+        const data = options.inlineComponentData?.[args.path];
+        assert(data, `component style name should always be found [${args.path}]`);
 
-          const [, language, , filePath] = args.path.split(';', 4);
-          const syntax = language === 'sass' ? 'indented' : 'scss';
+        const [language, , filePath] = args.path.split(';', 3);
+        const syntax = language === 'sass' ? 'indented' : 'scss';
 
-          return compileString(data, filePath, syntax, options, resolveUrl);
-        },
-      );
+        return compileString(data, filePath, syntax, options, resolveUrl);
+      });
 
       build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
         const data = await readFile(args.path, 'utf-8');
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts
@@ -81,10 +81,10 @@ export async function bundleComponentStylesheet(
   options: BundleStylesheetOptions,
 ) {
   const namespace = 'angular:styles/component';
-  const entry = [namespace, language, identifier, filename].join(';');
+  const entry = [language, identifier, filename].join(';');
 
   const buildOptions = createStylesheetBundleOptions(options, { [entry]: data });
-  buildOptions.entryPoints = [entry];
+  buildOptions.entryPoints = [`${namespace};${entry}`];
   buildOptions.plugins.push({
     name: 'angular-component-styles',
     setup(build) {
@@ -95,7 +95,7 @@ export async function bundleComponentStylesheet(
 
         if (inline) {
           return {
-            path: args.path,
+            path: entry,
             namespace,
           };
         } else {
@@ -104,7 +104,7 @@ export async function bundleComponentStylesheet(
           };
         }
       });
-      build.onLoad({ filter: /^angular:styles\/component;css;/, namespace }, async () => {
+      build.onLoad({ filter: /^css;/, namespace }, async () => {
         return {
           contents: data,
           loader: 'css',
