-
Notifications
You must be signed in to change notification settings - Fork 12k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(@angular-devkit/build-angular): process stylesheet resources from…
… url tokens with esbuild browser builder Stylesheet url tokens (`url(....)`) will now be processed when using the esbuild-based experimental browser application builder. The paths will be resolved via the bundler's resolution system and then loaded via the bundler's `file` loader. The functionality is implemented using an esbuild plugin to allow for all file types to be supported without the need to manually specify each current and future file extension within the build configuration. The `externalDependencies` option also applies to the referenced resources. This allows for resource paths specified with the option to remain unprocessed within the application output. This is useful if the relative path for the resource does not exist on disk but will be available when the application is deployed.
- Loading branch information
Showing
4 changed files
with
98 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
packages/angular_devkit/build_angular/src/builders/browser-esbuild/css-resource-plugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import type { Plugin, PluginBuild } from 'esbuild'; | ||
import { readFile } from 'fs/promises'; | ||
|
||
/** | ||
* Symbol marker used to indicate CSS resource resolution is being attempted. | ||
* This is used to prevent an infinite loop within the plugin's resolve hook. | ||
*/ | ||
const CSS_RESOURCE_RESOLUTION = Symbol('CSS_RESOURCE_RESOLUTION'); | ||
|
||
/** | ||
* Creates an esbuild {@link Plugin} that loads all CSS url token references using the | ||
* built-in esbuild `file` loader. A plugin is used to allow for all file extensions | ||
* and types to be supported without needing to manually specify all extensions | ||
* within the build configuration. | ||
* | ||
* @returns An esbuild {@link Plugin} instance. | ||
*/ | ||
export function createCssResourcePlugin(): Plugin { | ||
return { | ||
name: 'angular-css-resource', | ||
setup(build: PluginBuild): void { | ||
build.onResolve({ filter: /.*/ }, async (args) => { | ||
// Only attempt to resolve url tokens which only exist inside CSS. | ||
// Also, skip this plugin if already attempting to resolve the url-token. | ||
if (args.kind !== 'url-token' || args.pluginData?.[CSS_RESOURCE_RESOLUTION]) { | ||
return null; | ||
} | ||
|
||
const { importer, kind, resolveDir, namespace, pluginData = {} } = args; | ||
pluginData[CSS_RESOURCE_RESOLUTION] = true; | ||
|
||
const result = await build.resolve(args.path, { | ||
importer, | ||
kind, | ||
namespace, | ||
pluginData, | ||
resolveDir, | ||
}); | ||
|
||
return { | ||
...result, | ||
namespace: 'css-resource', | ||
}; | ||
}); | ||
|
||
build.onLoad({ filter: /.*/, namespace: 'css-resource' }, async (args) => { | ||
return { | ||
contents: await readFile(args.path), | ||
loader: 'file', | ||
}; | ||
}); | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters