diff --git a/package.json b/package.json index e9d0b6c9153b..35a4745617c5 100644 --- a/package.json +++ b/package.json @@ -185,7 +185,6 @@ "piscina": "3.2.0", "popper.js": "^1.14.1", "postcss": "8.4.18", - "postcss-import": "15.0.0", "postcss-loader": "7.0.1", "prettier": "^2.0.0", "protractor": "~7.0.0", diff --git a/packages/angular_devkit/build_angular/BUILD.bazel b/packages/angular_devkit/build_angular/BUILD.bazel index c11602c5b8fd..6ad91a71dd2a 100644 --- a/packages/angular_devkit/build_angular/BUILD.bazel +++ b/packages/angular_devkit/build_angular/BUILD.bazel @@ -162,7 +162,6 @@ ts_library( "@npm//parse5-html-rewriting-stream", "@npm//piscina", "@npm//postcss", - "@npm//postcss-import", "@npm//postcss-loader", "@npm//regenerator-runtime", "@npm//resolve-url-loader", diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json index c4c1f7f1bd4f..58620f18ebcf 100644 --- a/packages/angular_devkit/build_angular/package.json +++ b/packages/angular_devkit/build_angular/package.json @@ -48,7 +48,6 @@ "parse5-html-rewriting-stream": "6.0.1", "piscina": "3.2.0", "postcss": "8.4.18", - "postcss-import": "15.0.0", "postcss-loader": "7.0.1", "regenerator-runtime": "0.13.9", "resolve-url-loader": "5.0.0", diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts index 2b2d8eb9e9d1..964d5deac850 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts +++ b/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts @@ -174,6 +174,7 @@ describe('Browser Builder styles', () => { }; const overrides = { + aot: true, sourceMap: true, styles: [`src/styles.${ext}`], }; @@ -301,10 +302,13 @@ describe('Browser Builder styles', () => { const overrides = { optimization: false }; const { files } = await browserBuild(architect, host, target, overrides); - expect(await files['styles.css']).toContain(tags.stripIndents` + const content = await files['styles.css']; + expect(content).toContain(tags.stripIndents` /* normal-comment */ /*! important-comment */ - section { -webkit-mask-composite: source-over; mask-composite: add; } + section { -webkit-mask-composite: source-over; mask-composite: add; }`); + // Check separately because Webpack may add source file comments inbetween the rules + expect(content).toContain(tags.stripIndents` /* normal-comment */ /*! important-comment */ div { -webkit-mask-composite: source-over; mask-composite: add; }`); diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/vendor-source-map_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/vendor-source-map_spec.ts index 6774ea793dcd..024003369ac8 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser/specs/vendor-source-map_spec.ts +++ b/packages/angular_devkit/build_angular/src/builders/browser/specs/vendor-source-map_spec.ts @@ -108,6 +108,7 @@ describe('Identifying third-party code in source maps', () => { './src/app/app.component.ts', './src/app/app.module.ts', './src/main.ts', + './src/app/app.component.css', ]); // Only some sources in the polyfills map are first-party. diff --git a/packages/angular_devkit/build_angular/src/builders/server/tests/options/source-map_spec.ts b/packages/angular_devkit/build_angular/src/builders/server/tests/options/source-map_spec.ts index 4e0a38dd0b4d..9171304bfd5c 100644 --- a/packages/angular_devkit/build_angular/src/builders/server/tests/options/source-map_spec.ts +++ b/packages/angular_devkit/build_angular/src/builders/server/tests/options/source-map_spec.ts @@ -11,7 +11,8 @@ import { BASE_OPTIONS, SERVER_BUILDER_INFO, describeBuilder } from '../setup'; describeBuilder(execute, SERVER_BUILDER_INFO, (harness) => { describe('Option: "sourceMap"', () => { - const INLINE_SOURCEMAP_MARKER = '/*# sourceMappingURL=data:application/json;base64,'; + const INLINE_SOURCEMAP_MARKER = + '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,'; beforeEach(async () => { await harness.writeFiles({ 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 5c2d1fbb7f16..a38bd2929d76 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts @@ -12,7 +12,6 @@ import * as path from 'path'; import type { FileImporter } from 'sass'; import { pathToFileURL } from 'url'; import type { Configuration, LoaderContext, RuleSetUseItem } from 'webpack'; -import { StyleElement } from '../../builders/browser/schema'; import { SassWorkerImplementation } from '../../sass/sass-service'; import { SassLegacyWorkerImplementation } from '../../sass/sass-service-legacy'; import { WebpackConfigOptions } from '../../utils/build-options'; @@ -28,13 +27,12 @@ import { StylesWebpackPlugin } from '../plugins/styles-webpack-plugin'; import { assetNameTemplateFactory, getOutputHashFormat, - normalizeExtraEntryPoints, normalizeGlobalStyles, } from '../utils/helpers'; // eslint-disable-next-line max-lines-per-function export function getStylesConfig(wco: WebpackConfigOptions): Configuration { - const { root, projectRoot, buildOptions } = wco; + const { root, buildOptions } = wco; const extraPlugins: Configuration['plugins'] = []; extraPlugins.push(new AnyComponentStyleBudgetChecker(buildOptions.budgets)); @@ -103,12 +101,10 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration { } } - const postcssImports = require('postcss-import'); const autoprefixer: typeof import('autoprefixer') = require('autoprefixer'); const postcssOptionsCreator = (inlineSourcemaps: boolean, extracted: boolean) => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const optionGenerator = (loader: any) => ({ + const optionGenerator = (loader: LoaderContext) => ({ map: inlineSourcemaps ? { inline: true, @@ -116,22 +112,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration { } : undefined, plugins: [ - postcssImports({ - load: (filename: string) => { - return new Promise((resolve, reject) => { - loader.fs.readFile(filename, (err: Error, data: Buffer) => { - if (err) { - reject(err); - - return; - } - - const content = data.toString(); - resolve(content); - }); - }); - }, - }), PostcssCliResources({ baseHref: buildOptions.baseHref, deployUrl: buildOptions.deployUrl, @@ -178,6 +158,16 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration { const postCssLoaderPath = require.resolve('postcss-loader'); const componentStyleLoaders: RuleSetUseItem[] = [ + { + loader: require.resolve('css-loader'), + options: { + url: false, + sourceMap: componentsSourceMap, + importLoaders: 1, + exportType: 'string', + esModule: false, + }, + }, { loader: postCssLoaderPath, options: { @@ -196,6 +186,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration { options: { url: false, sourceMap: !!cssSourceMap, + importLoaders: 1, }, }, { @@ -294,7 +285,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration { // Component styles are all styles except defined global styles { use: componentStyleLoaders, - type: 'asset/source', resourceQuery: /\?ngResource/, }, ],