diff --git a/packages/angular_devkit/build_angular/src/builders/browser/tests/behavior/styles_unsupported_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/tests/behavior/styles_unsupported_spec.ts new file mode 100644 index 000000000000..7ea328461f95 --- /dev/null +++ b/packages/angular_devkit/build_angular/src/builders/browser/tests/behavior/styles_unsupported_spec.ts @@ -0,0 +1,36 @@ +/** + * @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 { logging } from '@angular-devkit/core'; +import { buildWebpackBrowser } from '../../index'; +import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup'; + +describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => { + describe('Behavior: "Style Unsupported"', () => { + it('errors when importing a css file as an ECMA module (Webpack specific behaviour)', async () => { + await harness.writeFiles({ + 'src/test-style.css': '.test-a {color: red}', + 'src/main.ts': `import './test-style.css'`, + }); + + harness.useTarget('build', { + ...BASE_OPTIONS, + styles: [], + }); + + const { result, logs } = await harness.executeOnce(); + + expect(result?.success).toBeFalse(); + expect(logs).toContain( + jasmine.objectContaining({ + message: jasmine.stringMatching('./src/test-style.css:1:0 - Error'), + }), + ); + }); + }); +}); diff --git a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts index 05e23a758b5b..720af1436b05 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts +++ b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts @@ -14,26 +14,6 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => { describe('Option: "allowedCommonJsDependencies"', () => { describe('given option is not set', () => { for (const aot of [true, false]) { - it(`should not show warning for styles import in ${aot ? 'AOT' : 'JIT'} Mode`, async () => { - await harness.writeFile('./test.css', `body { color: red; };`); - await harness.appendToFile('src/app/app.component.ts', `import '../../test.css';`); - - harness.useTarget('build', { - ...BASE_OPTIONS, - allowedCommonJsDependencies: [], - aot, - }); - - const { result, logs } = await harness.executeOnce(); - - expect(result?.success).toBe(true); - expect(logs).not.toContain( - jasmine.objectContaining({ - message: jasmine.stringMatching(/CommonJS or AMD dependencies/), - }), - ); - }); - it(`should show warning when depending on a Common JS bundle in ${ aot ? 'AOT' : 'JIT' } Mode`, async () => { diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts index 113207908177..ea81a57a6f4c 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts @@ -384,6 +384,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration { { use: componentStyleLoaders, type: 'asset/source', + resourceQuery: /\?ngResource/, }, ], },