@nx/angular-rspack 20.7.0 → 20.8.0

package/dist/lib/config/i18n/create-i18n-options.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureI18n = configureI18n;
-const tslib_1 = require("tslib");
-const devkit_1 = require("@nx/devkit");
 const private_1 = require("@angular/build/private");
-const path = tslib_1.__importStar(require("node:path"));
+const devkit_1 = require("@nx/devkit");
 const node_module_1 = require("node:module");
-const find_project_for_path_1 = require("../../utils/find-project-for-path");
 const node_path_1 = require("node:path");
+const find_project_for_path_1 = require("../../utils/find-project-for-path");
+const graph_1 = require("../../utils/graph");
 /**
  * The base module location used to search for locale specific data.
  */
@@ -33,7 +32,10 @@ async function getI18nMetadata(projectRoot, i18nMetadata) {
 }
 async function tryGetI18nMetadataFromProject(projectRoot) {
     try {
-        const graph = await (0, devkit_1.createProjectGraphAsync)();
+        const graph = await (0, graph_1.retrieveOrCreateProjectGraph)();
+        if (!graph) {
+            return undefined;
+        }
         const projectRootMappings = (0, find_project_for_path_1.createProjectRootMappings)(graph.nodes);
         const root = projectRoot.startsWith(devkit_1.workspaceRoot)
             ? (0, node_path_1.relative)(devkit_1.workspaceRoot, projectRoot)
@@ -81,7 +83,7 @@ async function configureI18n(projectRoot, options) {
     }
     // The trailing slash is required to signal that the path is a directory and not a file.
     const projectRequire = (0, node_module_1.createRequire)(projectRoot + '/');
-    const localeResolver = (locale) => projectRequire.resolve(path.join(LOCALE_DATA_BASE_MODULE, locale));
+    const localeResolver = (locale) => projectRequire.resolve((0, node_path_1.join)(LOCALE_DATA_BASE_MODULE, locale));
     // Load locale data and translations (if present)
     let loader;
     const usedFormats = new Set();

package/dist/lib/config/style-config-utils.d.ts

@@ -1,316 +1,22 @@
-import { StylePreprocessorOptions } from '@nx/angular-rspack-compiler';
-import { NormalizedAngularRspackPluginOptions, SourceMap } from '../models';
-export declare function getIncludePathOptions(includePaths?: string[]): {
-    less: {
-        paths?: undefined;
-    };
-    sass: {
-        includePaths?: undefined;
-    };
-} | {
-    less: {
-        paths: string[];
-    };
-    sass: {
-        includePaths: string[];
-    };
-};
-export declare function getSassLoaderConfig(sassPathOptions?: {
-    includePaths?: string[];
-}, sassOptions?: StylePreprocessorOptions['sass'], sourceMap?: SourceMap): {
-    test: RegExp;
-    use: (string | {
-        loader: string;
-        options: {
-            url: boolean;
-            sourceMap: boolean | undefined;
-            importLoaders: number;
-        };
-    } | {
-        loader: string;
-        options: {
-            sourceMap: true;
-            url?: undefined;
-            importLoaders?: undefined;
-        };
-    } | {
-        loader: string;
-        options: {
-            fatalDeprecations?: import("sass-embedded").DeprecationOrId[];
-            futureDeprecations?: import("sass-embedded").DeprecationOrId[];
-            silenceDeprecations?: import("sass-embedded").DeprecationOrId[];
-            length: number;
-            toString(): string;
-            toLocaleString(): string;
-            toLocaleString(locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string;
-            pop(): undefined;
-            push(...items: never[]): number;
-            concat(...items: ConcatArray<never>[]): never[];
-            concat(...items: ConcatArray<never>[]): never[];
-            join(separator?: string): string;
-            reverse(): never[];
-            shift(): undefined;
-            slice(start?: number, end?: number): never[];
-            sort(compareFn?: ((a: never, b: never) => number) | undefined): never[];
-            splice(start: number, deleteCount?: number): never[];
-            splice(start: number, deleteCount: number, ...items: never[]): never[];
-            unshift(...items: never[]): number;
-            indexOf(searchElement: never, fromIndex?: number): number;
-            lastIndexOf(searchElement: never, fromIndex?: number): number;
-            every<S extends never>(predicate: (value: never, index: number, array: never[]) => value is S, thisArg?: any): this is S[];
-            every(predicate: (value: never, index: number, array: never[]) => unknown, thisArg?: any): boolean;
-            some(predicate: (value: never, index: number, array: never[]) => unknown, thisArg?: any): boolean;
-            forEach(callbackfn: (value: never, index: number, array: never[]) => void, thisArg?: any): void;
-            map<U>(callbackfn: (value: never, index: number, array: never[]) => U, thisArg?: any): U[];
-            filter<S extends never>(predicate: (value: never, index: number, array: never[]) => value is S, thisArg?: any): S[];
-            filter(predicate: (value: never, index: number, array: never[]) => unknown, thisArg?: any): never[];
-            reduce(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never): never;
-            reduce(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never, initialValue: never): never;
-            reduce<U>(callbackfn: (previousValue: U, currentValue: never, currentIndex: number, array: never[]) => U, initialValue: U): U;
-            reduceRight(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never): never;
-            reduceRight(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never, initialValue: never): never;
-            reduceRight<U>(callbackfn: (previousValue: U, currentValue: never, currentIndex: number, array: never[]) => U, initialValue: U): U;
-            find<S extends never>(predicate: (value: never, index: number, obj: never[]) => value is S, thisArg?: any): S | undefined;
-            find(predicate: (value: never, index: number, obj: never[]) => unknown, thisArg?: any): undefined;
-            findIndex(predicate: (value: never, index: number, obj: never[]) => unknown, thisArg?: any): number;
-            fill(value: never, start?: number, end?: number): never[];
-            copyWithin(target: number, start: number, end?: number): never[];
-            entries(): ArrayIterator<[number, never]>;
-            keys(): ArrayIterator<number>;
-            values(): ArrayIterator<never>;
-            includes(searchElement: never, fromIndex?: number): boolean;
-            flatMap<U, This = undefined>(callback: (this: This, value: never, index: number, array: never[]) => U | readonly U[], thisArg?: This | undefined): U[];
-            flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
-            at(index: number): undefined;
-            [Symbol.iterator](): ArrayIterator<never>;
-            [Symbol.unscopables]: {
-                [x: number]: boolean | undefined;
-                length?: boolean | undefined;
-                toString?: boolean | undefined;
-                toLocaleString?: boolean | undefined;
-                pop?: boolean | undefined;
-                push?: boolean | undefined;
-                concat?: boolean | undefined;
-                join?: boolean | undefined;
-                reverse?: boolean | undefined;
-                shift?: boolean | undefined;
-                slice?: boolean | undefined;
-                sort?: boolean | undefined;
-                splice?: boolean | undefined;
-                unshift?: boolean | undefined;
-                indexOf?: boolean | undefined;
-                lastIndexOf?: boolean | undefined;
-                every?: boolean | undefined;
-                some?: boolean | undefined;
-                forEach?: boolean | undefined;
-                map?: boolean | undefined;
-                filter?: boolean | undefined;
-                reduce?: boolean | undefined;
-                reduceRight?: boolean | undefined;
-                find?: boolean | undefined;
-                findIndex?: boolean | undefined;
-                fill?: boolean | undefined;
-                copyWithin?: boolean | undefined;
-                entries?: boolean | undefined;
-                keys?: boolean | undefined;
-                values?: boolean | undefined;
-                includes?: boolean | undefined;
-                flatMap?: boolean | undefined;
-                flat?: boolean | undefined;
-                at?: boolean | undefined;
-                [Symbol.iterator]?: boolean | undefined;
-                readonly [Symbol.unscopables]?: boolean | undefined;
-            };
-            api: string;
-            sourceMap: boolean | undefined;
-            sourceMapIncludeSources: boolean;
-            implementation: string;
-            url?: undefined;
-            importLoaders?: undefined;
-        } | {
-            fatalDeprecations?: import("sass-embedded").DeprecationOrId[];
-            futureDeprecations?: import("sass-embedded").DeprecationOrId[];
-            silenceDeprecations?: import("sass-embedded").DeprecationOrId[];
-            includePaths?: string[];
-            api: string;
-            sourceMap: boolean | undefined;
-            sourceMapIncludeSources: boolean;
-            implementation: string;
-            url?: undefined;
-            importLoaders?: undefined;
-        };
-    })[];
-};
-export declare function getLessLoaderConfig(lessPathOptions?: {
-    paths?: string[];
-}, sourceMap?: SourceMap): {
-    test: RegExp;
-    use: (string | {
-        loader: string;
-        options: {
-            url: boolean;
-            sourceMap: boolean | undefined;
-            importLoaders: number;
-        };
-    } | {
-        loader: string;
-        options: {
-            paths?: string[];
-            sourceMap: boolean | undefined;
-            javascriptEnabled: boolean;
-            url?: undefined;
-            importLoaders?: undefined;
-        };
-    })[];
-};
+import { type RuleSetUseItem } from '@rspack/core';
+import type { NormalizedAngularRspackPluginOptions } from '../models';
 /**
  * Returns an array of style loaders for sass and less. Both loader´s are always returned
  *
  * @param stylePreprocessorOptions
  * @param sourceMap
  */
-export declare function getStyleLoaders(stylePreprocessorOptions?: StylePreprocessorOptions, sourceMap?: SourceMap): ({
-    test: RegExp;
-    use: (string | {
-        loader: string;
-        options: {
-            url: boolean;
-            sourceMap: boolean | undefined;
-            importLoaders: number;
-        };
-    } | {
-        loader: string;
-        options: {
-            sourceMap: true;
-            url?: undefined;
-            importLoaders?: undefined;
-        };
-    } | {
-        loader: string;
-        options: {
-            fatalDeprecations?: import("sass-embedded").DeprecationOrId[];
-            futureDeprecations?: import("sass-embedded").DeprecationOrId[];
-            silenceDeprecations?: import("sass-embedded").DeprecationOrId[];
-            length: number;
-            toString(): string;
-            toLocaleString(): string;
-            toLocaleString(locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string;
-            pop(): undefined;
-            push(...items: never[]): number;
-            concat(...items: ConcatArray<never>[]): never[];
-            concat(...items: ConcatArray<never>[]): never[];
-            join(separator?: string): string;
-            reverse(): never[];
-            shift(): undefined;
-            slice(start?: number, end?: number): never[];
-            sort(compareFn?: ((a: never, b: never) => number) | undefined): never[];
-            splice(start: number, deleteCount?: number): never[];
-            splice(start: number, deleteCount: number, ...items: never[]): never[];
-            unshift(...items: never[]): number;
-            indexOf(searchElement: never, fromIndex?: number): number;
-            lastIndexOf(searchElement: never, fromIndex?: number): number;
-            every<S extends never>(predicate: (value: never, index: number, array: never[]) => value is S, thisArg?: any): this is S[];
-            every(predicate: (value: never, index: number, array: never[]) => unknown, thisArg?: any): boolean;
-            some(predicate: (value: never, index: number, array: never[]) => unknown, thisArg?: any): boolean;
-            forEach(callbackfn: (value: never, index: number, array: never[]) => void, thisArg?: any): void;
-            map<U>(callbackfn: (value: never, index: number, array: never[]) => U, thisArg?: any): U[];
-            filter<S extends never>(predicate: (value: never, index: number, array: never[]) => value is S, thisArg?: any): S[];
-            filter(predicate: (value: never, index: number, array: never[]) => unknown, thisArg?: any): never[];
-            reduce(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never): never;
-            reduce(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never, initialValue: never): never;
-            reduce<U>(callbackfn: (previousValue: U, currentValue: never, currentIndex: number, array: never[]) => U, initialValue: U): U;
-            reduceRight(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never): never;
-            reduceRight(callbackfn: (previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never, initialValue: never): never;
-            reduceRight<U>(callbackfn: (previousValue: U, currentValue: never, currentIndex: number, array: never[]) => U, initialValue: U): U;
-            find<S extends never>(predicate: (value: never, index: number, obj: never[]) => value is S, thisArg?: any): S | undefined;
-            find(predicate: (value: never, index: number, obj: never[]) => unknown, thisArg?: any): undefined;
-            findIndex(predicate: (value: never, index: number, obj: never[]) => unknown, thisArg?: any): number;
-            fill(value: never, start?: number, end?: number): never[];
-            copyWithin(target: number, start: number, end?: number): never[];
-            entries(): ArrayIterator<[number, never]>;
-            keys(): ArrayIterator<number>;
-            values(): ArrayIterator<never>;
-            includes(searchElement: never, fromIndex?: number): boolean;
-            flatMap<U, This = undefined>(callback: (this: This, value: never, index: number, array: never[]) => U | readonly U[], thisArg?: This | undefined): U[];
-            flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
-            at(index: number): undefined;
-            [Symbol.iterator](): ArrayIterator<never>;
-            [Symbol.unscopables]: {
-                [x: number]: boolean | undefined;
-                length?: boolean | undefined;
-                toString?: boolean | undefined;
-                toLocaleString?: boolean | undefined;
-                pop?: boolean | undefined;
-                push?: boolean | undefined;
-                concat?: boolean | undefined;
-                join?: boolean | undefined;
-                reverse?: boolean | undefined;
-                shift?: boolean | undefined;
-                slice?: boolean | undefined;
-                sort?: boolean | undefined;
-                splice?: boolean | undefined;
-                unshift?: boolean | undefined;
-                indexOf?: boolean | undefined;
-                lastIndexOf?: boolean | undefined;
-                every?: boolean | undefined;
-                some?: boolean | undefined;
-                forEach?: boolean | undefined;
-                map?: boolean | undefined;
-                filter?: boolean | undefined;
-                reduce?: boolean | undefined;
-                reduceRight?: boolean | undefined;
-                find?: boolean | undefined;
-                findIndex?: boolean | undefined;
-                fill?: boolean | undefined;
-                copyWithin?: boolean | undefined;
-                entries?: boolean | undefined;
-                keys?: boolean | undefined;
-                values?: boolean | undefined;
-                includes?: boolean | undefined;
-                flatMap?: boolean | undefined;
-                flat?: boolean | undefined;
-                at?: boolean | undefined;
-                [Symbol.iterator]?: boolean | undefined;
-                readonly [Symbol.unscopables]?: boolean | undefined;
-            };
-            api: string;
-            sourceMap: boolean | undefined;
-            sourceMapIncludeSources: boolean;
-            implementation: string;
-            url?: undefined;
-            importLoaders?: undefined;
-        } | {
-            fatalDeprecations?: import("sass-embedded").DeprecationOrId[];
-            futureDeprecations?: import("sass-embedded").DeprecationOrId[];
-            silenceDeprecations?: import("sass-embedded").DeprecationOrId[];
-            includePaths?: string[];
-            api: string;
-            sourceMap: boolean | undefined;
-            sourceMapIncludeSources: boolean;
-            implementation: string;
-            url?: undefined;
-            importLoaders?: undefined;
-        };
-    })[];
-} | {
+export declare function getStyleLoaders(buildOptions: NormalizedAngularRspackPluginOptions): Promise<{
     test: RegExp;
-    use: (string | {
-        loader: string;
-        options: {
-            url: boolean;
-            sourceMap: boolean | undefined;
-            importLoaders: number;
-        };
+    rules: ({
+        oneOf: {
+            use: RuleSetUseItem[];
+            resourceQuery: RegExp;
+        }[];
+        use?: undefined;
     } | {
-        loader: string;
-        options: {
-            paths?: string[];
-            sourceMap: boolean | undefined;
-            javascriptEnabled: boolean;
-            url?: undefined;
-            importLoaders?: undefined;
-        };
+        use: RuleSetUseItem[];
+        oneOf?: undefined;
     })[];
-})[];
-export declare function getStylesEntry(options: NormalizedAngularRspackPluginOptions): string[];
+}[]>;
 //# sourceMappingURL=style-config-utils.d.ts.map

package/dist/lib/config/style-config-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-config-utils.d.ts","sourceRoot":"","sources":["../../../src/lib/config/style-config-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,oCAAoC,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG5E,wBAAgB,qBAAqB,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE;;;;;;;;;;;;;;EAS5D;AAED,wBAAgB,mBAAmB,CACjC,eAAe,CAAC,EAAE;IAAE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,EAC7C,WAAW,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,EAC9C,SAAS,CAAC,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;sEAoH6M,mBAAmB,QAAQ,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAtH/O,MAAM,EAAE;;;;;;;;;EAuC5C;AAED,wBAAgB,mBAAmB,CACjC,eAAe,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,EACtC,SAAS,CAAC,EAAE,SAAS;;;;;;;;;;;;oBADO,MAAM,EAAE;;;;;;;EAyBrC;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,wBAAwB,CAAC,EAAE,wBAAwB,EACnD,SAAS,CAAC,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;sEAyC6M,mBAAmB,QAAQ,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAtH/O,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;oBA0Cf,MAAM,EAAE;;;;;;;KA8DrC;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,oCAAoC,GAC5C,MAAM,EAAE,CASV"}
+{"version":3,"file":"style-config-utils.d.ts","sourceRoot":"","sources":["../../../src/lib/config/style-config-utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAA0B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE3E,OAAO,KAAK,EAAE,oCAAoC,EAAE,MAAM,WAAW,CAAC;AAGtE;;;;;GAKG;AACH,wBAAsB,eAAe,CACnC,YAAY,EAAE,oCAAoC;;;;;;;;;;;;KAsNnD"}

package/dist/lib/config/style-config-utils.js

@@ -1,115 +1,202 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIncludePathOptions = getIncludePathOptions;
-exports.getSassLoaderConfig = getSassLoaderConfig;
-exports.getLessLoaderConfig = getLessLoaderConfig;
 exports.getStyleLoaders = getStyleLoaders;
-exports.getStylesEntry = getStylesEntry;
+const devkit_1 = require("@nx/devkit");
 const core_1 = require("@rspack/core");
-function getIncludePathOptions(includePaths) {
-    if (!includePaths || includePaths.length === 0) {
-        return { less: {}, sass: {} };
+const node_path_1 = require("node:path");
+const tailwind_1 = require("../utils/tailwind");
+/**
+ * Returns an array of style loaders for sass and less. Both loader´s are always returned
+ *
+ * @param stylePreprocessorOptions
+ * @param sourceMap
+ */
+async function getStyleLoaders(buildOptions) {
+    const cssSourceMap = buildOptions.sourceMap.styles;
+    const includePaths = buildOptions.stylePreprocessorOptions?.includePaths?.map((p) => (0, node_path_1.resolve)(devkit_1.workspaceRoot, p)) ?? [];
+    const extraPostcssPlugins = [];
+    // Attempt to setup Tailwind CSS
+    // Only load Tailwind CSS plugin if configuration file was found.
+    // This acts as a guard to ensure the project actually wants to use Tailwind CSS.
+    // The package may be unknowningly present due to a third-party transitive package dependency.
+    const tailwindConfigPath = await (0, tailwind_1.findTailwindConfigurationFile)(devkit_1.workspaceRoot, buildOptions.root);
+    if (tailwindConfigPath) {
+        let tailwindPackagePath;
+        try {
+            tailwindPackagePath = require.resolve('tailwindcss', {
+                paths: [devkit_1.workspaceRoot, buildOptions.root],
+            });
+        }
+        catch {
+            const relativeTailwindConfigPath = (0, node_path_1.relative)(devkit_1.workspaceRoot, tailwindConfigPath);
+            console.warn(`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
+                ` but the 'tailwindcss' package is not installed.` +
+                ` To enable Tailwind CSS, please install the 'tailwindcss' package.`);
+        }
+        if (tailwindPackagePath) {
+            extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
+        }
     }
-    return {
-        less: { paths: includePaths },
-        sass: { includePaths },
+    const autoprefixer = require('autoprefixer');
+    const postcssOptionsCreator = (inlineSourcemaps) => {
+        const optionGenerator = () => ({
+            map: inlineSourcemaps
+                ? {
+                    inline: true,
+                    annotation: false,
+                }
+                : undefined,
+            plugins: [
+                ...extraPostcssPlugins,
+                autoprefixer({
+                    ignoreUnknownVersions: true,
+                    overrideBrowserslist: buildOptions.supportedBrowsers,
+                }),
+            ],
+        });
+        // postcss-loader fails when trying to determine configuration files for data URIs
+        optionGenerator.config = false;
+        return optionGenerator;
     };
-}
-function getSassLoaderConfig(sassPathOptions, sassOptions, sourceMap) {
-    return {
-        test: /\.?(sa|sc)ss$/,
-        use: [
-            core_1.CssExtractRspackPlugin.loader,
-            {
-                loader: require.resolve('css-loader'),
-                options: {
-                    url: false,
-                    sourceMap: sourceMap?.styles,
-                    importLoaders: 1,
-                },
+    let componentsSourceMap = !!cssSourceMap;
+    if (cssSourceMap) {
+        // TODO: use below once we support optimization granular options
+        // if (buildOptions.optimization.styles.minify) {
+        if (buildOptions.optimization) {
+            // Never use component css sourcemap when style optimizations are on.
+            // It will just increase bundle size without offering good debug experience.
+            console.warn('Components styles sourcemaps are not generated when styles optimization is enabled.');
+            componentsSourceMap = false;
+        }
+        else if (buildOptions.sourceMap.hidden) {
+            // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
+            // for component css.
+            console.warn('Components styles sourcemaps are not generated when sourcemaps are hidden.');
+            componentsSourceMap = false;
+        }
+    }
+    const postCss = require('postcss');
+    const postCssLoaderPath = require.resolve('postcss-loader');
+    const componentStyleLoaders = [
+        {
+            loader: require.resolve('css-loader'),
+            options: {
+                url: false,
+                sourceMap: componentsSourceMap,
+                importLoaders: 1,
+                exportType: 'string',
+                esModule: false,
             },
-            ...(sourceMap?.styles
-                ? [
-                    {
-                        loader: require.resolve('resolve-url-loader'),
-                        options: {
-                            sourceMap: sourceMap?.styles,
-                        },
+        },
+        {
+            loader: postCssLoaderPath,
+            options: {
+                implementation: postCss,
+                postcssOptions: postcssOptionsCreator(componentsSourceMap),
+            },
+        },
+    ];
+    const globalStyleLoaders = [
+        {
+            loader: core_1.CssExtractRspackPlugin.loader,
+        },
+        {
+            loader: require.resolve('css-loader'),
+            options: {
+                url: false,
+                sourceMap: !!cssSourceMap,
+                importLoaders: 1,
+            },
+        },
+        {
+            loader: postCssLoaderPath,
+            options: {
+                implementation: postCss,
+                postcssOptions: postcssOptionsCreator(false),
+                sourceMap: !!cssSourceMap,
+            },
+        },
+    ];
+    const styleLanguages = [
+        {
+            extensions: ['css'],
+            use: [],
+        },
+        {
+            extensions: ['scss'],
+            use: [
+                {
+                    loader: require.resolve('resolve-url-loader'),
+                    options: {
+                        sourceMap: cssSourceMap,
                     },
-                ]
-                : []),
-            {
-                loader: 'sass-loader',
-                options: {
-                    api: 'modern-compiler',
-                    sourceMap: sourceMap?.styles,
-                    sourceMapIncludeSources: true,
-                    implementation: require.resolve('sass-embedded'),
-                    ...(sassPathOptions ?? []),
-                    ...(sassOptions ?? {}),
                 },
-            },
-        ],
-    };
-}
-function getLessLoaderConfig(lessPathOptions, sourceMap) {
-    return {
-        test: /\.less$/,
-        use: [
-            core_1.CssExtractRspackPlugin.loader,
-            {
-                loader: require.resolve('css-loader'),
-                options: {
-                    url: false,
-                    sourceMap: sourceMap?.styles,
-                    importLoaders: 1,
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: getSassLoaderOptions(includePaths, buildOptions.stylePreprocessorOptions?.sass),
                 },
-            },
-            {
-                loader: 'less-loader',
-                options: {
-                    sourceMap: sourceMap?.styles,
-                    javascriptEnabled: true,
-                    ...lessPathOptions,
+            ],
+        },
+        {
+            extensions: ['sass'],
+            use: [
+                {
+                    loader: require.resolve('resolve-url-loader'),
+                    options: {
+                        sourceMap: cssSourceMap,
+                    },
                 },
-            },
-        ],
-    };
-}
-/**
- * Returns an array of style loaders for sass and less. Both loader´s are always returned
- *
- * @param stylePreprocessorOptions
- * @param sourceMap
- */
-function getStyleLoaders(stylePreprocessorOptions, sourceMap) {
-    const { less: lessPathOptions, sass: sassPathOptions } = getIncludePathOptions(stylePreprocessorOptions?.includePaths);
-    return [
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: getSassLoaderOptions(includePaths, buildOptions.stylePreprocessorOptions?.sass),
+                },
+            ],
+        },
         {
-            test: /\.css$/i,
+            extensions: ['less'],
             use: [
-                core_1.CssExtractRspackPlugin.loader,
                 {
-                    loader: require.resolve('css-loader'),
+                    loader: require.resolve('less-loader'),
                     options: {
-                        url: false,
-                        sourceMap: sourceMap?.styles,
-                        importLoaders: 1,
+                        sourceMap: cssSourceMap,
+                        lessOptions: {
+                            javascriptEnabled: true,
+                            paths: includePaths,
+                        },
                     },
                 },
             ],
         },
-        getSassLoaderConfig(sassPathOptions, stylePreprocessorOptions?.sass, sourceMap),
-        getLessLoaderConfig(lessPathOptions, sourceMap),
     ];
+    return styleLanguages.map(({ extensions, use }) => ({
+        test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
+        rules: [
+            // Setup processing rules for global and component styles
+            {
+                oneOf: [
+                    // Global styles are only defined global styles
+                    {
+                        use: globalStyleLoaders,
+                        resourceQuery: /\?ngGlobalStyle/,
+                    },
+                    // Component styles are all styles except defined global styles
+                    {
+                        use: componentStyleLoaders,
+                        resourceQuery: /\?ngResource/,
+                    },
+                ],
+            },
+            { use },
+        ],
+    }));
 }
-function getStylesEntry(options) {
-    const styles = options.globalStyles ?? [];
-    const allStyleEntries = [];
-    for (const style of styles) {
-        for (const file of style.files) {
-            allStyleEntries.push(file);
-        }
-    }
-    return allStyleEntries;
+function getSassLoaderOptions(includePaths, sassOptions) {
+    return {
+        api: 'modern-compiler',
+        sourceMap: true,
+        sourceMapIncludeSources: true,
+        implementation: require.resolve('sass-embedded'),
+        includePaths,
+        ...(sassOptions ?? {}),
+    };
 }