Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-16 02:24:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(@angular-devkit/build-angular): show error note for CSS url() tilde usage in esbuild builder

Browse Source 
When using the esbuild-based browser application builder with a `url()` in a stylesheet that uses
that Webpack-specific tilde prefix, a note will be added to the resolution error providing additional
information regarding the removal of the tilde.
This commit is contained in:
Charles Lyding 2023-05-08 16:36:25 -04:00 committed by angular-robot[bot]
parent 9d8f6289fa
commit ca8e5087fb
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets/css-resource-plugin.ts
View File

@ -55,9 +55,18 @@ export function createCssResourcePlugin(): Plugin {
resolveDir,
});
if (result.errors.length && args.path[0] === '~') {
result.errors[0].notes = [
{
location: null,
text: 'You can remove the tilde and use a relative path to reference it, which should remove this error.',
},
];
}
// Return results that are not files since these are most likely specific to another plugin
// and cannot be loaded by this plugin.
if (result.namespace !== 'file' || !result.path) {
if (result.namespace !== 'file') {
return result;
}

39
packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/stylesheet-url-resolution_spec.ts Normal file
View File

@ -0,0 +1,39 @@
/**
* @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 { buildEsbuildBrowser } from '../../index';
import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
describe('Behavior: "Stylesheet url() Resolution"', () => {
it('should show a note when using tilde prefix', async () => {
await harness.writeFile(
'src/styles.css',
`
.a {
background-image: url("~/image.jpg")
}
`,
);
harness.useTarget('build', {
...BASE_OPTIONS,
styles: ['src/styles.css'],
});
const { result, logs } = await harness.executeOnce();
expect(result?.success).toBe(false);
expect(logs).toContain(
jasmine.objectContaining({
message: jasmine.stringMatching('You can remove the tilde and'),
}),
);
});
});
});