@angular-devkit/build-angular 17.0.2 → 17.0.4

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.0.2",
+  "version": "17.0.4",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "0.1700.2",
-    "@angular-devkit/build-webpack": "0.1700.2",
-    "@angular-devkit/core": "17.0.2",
+    "@angular-devkit/architect": "0.1700.4",
+    "@angular-devkit/build-webpack": "0.1700.4",
+    "@angular-devkit/core": "17.0.4",
     "@babel/core": "7.23.2",
     "@babel/generator": "7.23.0",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.2",
     "@babel/runtime": "7.23.2",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.0.2",
+    "@ngtools/webpack": "17.0.4",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",

package/src/builders/application/build-action.js

@@ -74,7 +74,7 @@ async function* runEsBuildBuildAction(action, options) {
                 // Ignore all node modules directories to avoid excessive file watchers.
                 // Package changes are handled below by watching manifest and lock files.
                 '**/node_modules/**',
-                '**/.*/**',
+                `${workspaceRoot.replace(/\\/g, '/')}/**/.*/**`,
             ],
         });
         // Setup abort support

package/src/builders/application/execute-post-bundle.js

@@ -71,7 +71,9 @@ async function executePostBundleSteps(options, outputFiles, assetFiles, initialF
     // If localization is enabled, service worker is handled in the inlining process.
     if (serviceWorker) {
         try {
-            const serviceWorkerResult = await (0, service_worker_1.augmentAppWithServiceWorkerEsbuild)(workspaceRoot, serviceWorker, options.baseHref || '/', outputFiles, assetFiles);
+            const serviceWorkerResult = await (0, service_worker_1.augmentAppWithServiceWorkerEsbuild)(workspaceRoot, serviceWorker, options.baseHref || '/', 
+            // Ensure additional files recently added are used
+            [...outputFiles, ...additionalOutputFiles], assetFiles);
             additionalOutputFiles.push((0, utils_1.createOutputFileFromText)('ngsw.json', serviceWorkerResult.manifest, bundler_context_1.BuildOutputFileType.Browser));
             additionalAssets.push(...serviceWorkerResult.assetFiles);
         }

package/src/builders/application/i18n.js

@@ -41,7 +41,10 @@ async function inlineI18n(options, executionResult, initialFiles) {
     try {
         for (const locale of options.i18nOptions.inlineLocales) {
             // A locale specific set of files is returned from the inliner.
-            const localeOutputFiles = await inliner.inlineForLocale(locale, options.i18nOptions.locales[locale].translation);
+            const localeInlineResult = await inliner.inlineForLocale(locale, options.i18nOptions.locales[locale].translation);
+            const localeOutputFiles = localeInlineResult.outputFiles;
+            inlineResult.errors.push(...localeInlineResult.errors);
+            inlineResult.warnings.push(...localeInlineResult.warnings);
             const baseHref = getLocaleBaseHref(options.baseHref, options.i18nOptions, locale) ?? options.baseHref;
             const { errors, warnings, additionalAssets, additionalOutputFiles, prerenderedRoutes: generatedRoutes, } = await (0, execute_post_bundle_1.executePostBundleSteps)({
                 ...options,

package/src/builders/application/options.js

@@ -11,6 +11,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
+const node_fs_1 = require("node:fs");
 const promises_1 = require("node:fs/promises");
 const node_module_1 = require("node:module");
 const node_path_1 = __importDefault(require("node:path"));
@@ -35,7 +36,15 @@ const schema_1 = require("./schema");
  */
 // eslint-disable-next-line max-lines-per-function
 async function normalizeOptions(context, projectName, options, plugins) {
-    const workspaceRoot = context.workspaceRoot;
+    // If not explicitly set, default to the Node.js process argument
+    const preserveSymlinks = options.preserveSymlinks ?? process.execArgv.includes('--preserve-symlinks');
+    // Setup base paths based on workspace root and project information
+    const workspaceRoot = preserveSymlinks
+        ? context.workspaceRoot
+        : // NOTE: promises.realpath should not be used here since it uses realpath.native which
+            // can cause case conversion and other undesirable behavior on Windows systems.
+            // ref: https://github.com/nodejs/node/issues/7726
+            (0, node_fs_1.realpathSync)(context.workspaceRoot);
     const projectMetadata = await context.getProjectMetadata(projectName);
     const projectRoot = normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, projectMetadata.root ?? ''));
     const projectSourceRoot = normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, projectMetadata.sourceRoot ?? 'src'));
@@ -156,7 +165,7 @@ async function normalizeOptions(context, projectName, options, plugins) {
         };
     }
     // Initial options to keep
-    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, preserveSymlinks, statsJson, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, deleteOutputPath, namedChunks, budgets, deployUrl, } = options;
+    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, deleteOutputPath, namedChunks, budgets, deployUrl, } = options;
     // Return all the normalized options
     return {
         advancedOptimizations: !!aot,
@@ -174,8 +183,7 @@ async function normalizeOptions(context, projectName, options, plugins) {
         poll,
         progress,
         externalPackages,
-        // If not explicitly set, default to the Node.js process argument
-        preserveSymlinks: preserveSymlinks ?? process.execArgv.includes('--preserve-symlinks'),
+        preserveSymlinks,
         stylePreprocessorOptions,
         subresourceIntegrity,
         serverEntryPoint,

package/src/builders/dev-server/vite-server.js

@@ -246,17 +246,17 @@ function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logg
                     };
                 }),
             });
-            logger.info('HMR update sent to client(s)...');
+            logger.info('HMR update sent to client(s).');
             return;
         }
     }
     // Send reload command to clients
     if (serverOptions.liveReload) {
-        logger.info('Reloading client(s)...');
         server.ws.send({
             type: 'full-reload',
             path: '*',
         });
+        logger.info('Page reload sent to client(s).');
     }
 }
 function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generatedFiles) {
@@ -329,6 +329,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         css: {
             devSourcemap: true,
         },
+        // Vite will normalize the `base` option by adding a leading and trailing forward slash.
         base: serverOptions.servePath,
         resolve: {
             mainFields: ['es2020', 'browser', 'module', 'main'],
@@ -443,14 +444,14 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                         }
                         // Parse the incoming request.
                         // The base of the URL is unused but required to parse the URL.
-                        const pathname = pathnameWithoutServePath(req.url, serverOptions);
+                        const pathname = pathnameWithoutBasePath(req.url, server.config.base);
                         const extension = (0, node_path_1.extname)(pathname);
                         // Rewrite all build assets to a vite raw fs URL
                         const assetSourcePath = assets.get(pathname);
                         if (assetSourcePath !== undefined) {
                             // The encoding needs to match what happens in the vite static middleware.
                             // ref: https://github.com/vitejs/vite/blob/d4f13bd81468961c8c926438e815ab6b1c82735e/packages/vite/src/node/server/middlewares/static.ts#L163
-                            req.url = `/@fs/${encodeURI(assetSourcePath)}`;
+                            req.url = `${server.config.base}@fs/${encodeURI(assetSourcePath)}`;
                             next();
                             return;
                         }
@@ -526,7 +527,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                             }
                             // Parse the incoming request.
                             // The base of the URL is unused but required to parse the URL.
-                            const pathname = pathnameWithoutServePath(req.url, serverOptions);
+                            const pathname = pathnameWithoutBasePath(req.url, server.config.base);
                             if (pathname === '/' || pathname === `/index.html`) {
                                 const rawHtml = outputFiles.get('/index.html')?.contents;
                                 if (rawHtml) {
@@ -610,16 +611,13 @@ async function loadViteClientCode(file) {
     (0, node_assert_1.default)(originalContents !== contents, 'Failed to update Vite client error overlay text.');
     return contents;
 }
-function pathnameWithoutServePath(url, serverOptions) {
+function pathnameWithoutBasePath(url, basePath) {
     const parsedUrl = new URL(url, 'http://localhost');
-    let pathname = decodeURIComponent(parsedUrl.pathname);
-    if (serverOptions.servePath && pathname.startsWith(serverOptions.servePath)) {
-        pathname = pathname.slice(serverOptions.servePath.length);
-        if (pathname[0] !== '/') {
-            pathname = '/' + pathname;
-        }
-    }
-    return pathname;
+    const pathname = decodeURIComponent(parsedUrl.pathname);
+    // slice(basePath.length - 1) to retain the trailing slash
+    return basePath !== '/' && pathname.startsWith(basePath)
+        ? pathname.slice(basePath.length - 1)
+        : pathname;
 }
 function getDepOptimizationConfig({ disabled, exclude, include, target, prebundleTransformer, ssr, thirdPartySourcemaps, }) {
     const plugins = [

package/src/tools/esbuild/angular/compiler-plugin.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPlugin = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
-const promises_1 = require("node:fs/promises");
+const node_fs_1 = require("node:fs");
 const path = __importStar(require("node:path"));
 const environment_options_1 = require("../../../utils/environment-options");
 const javascript_transformer_1 = require("../javascript-transformer");
@@ -58,8 +58,11 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             if (!preserveSymlinks) {
                 // Use the real path of the tsconfig if not preserving symlinks.
                 // This ensures the TS source file paths are based on the real path of the configuration.
+                // NOTE: promises.realpath should not be used here since it uses realpath.native which
+                // can cause case conversion and other undesirable behavior on Windows systems.
+                // ref: https://github.com/nodejs/node/issues/7726
                 try {
-                    tsconfigPath = await (0, promises_1.realpath)(tsconfigPath);
+                    tsconfigPath = (0, node_fs_1.realpathSync)(tsconfigPath);
                 }
                 catch { }
             }
@@ -283,7 +286,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 }
                 else if (typeof contents === 'string') {
                     // A string indicates untransformed output from the TS/NG compiler
-                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */);
+                    const sideEffects = await hasSideEffects(request);
+                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */, sideEffects);
                     // Store as the returned Uint8Array to allow caching the fully transformed code
                     typeScriptFileCache.set(request, contents);
                 }
@@ -294,7 +298,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             });
             build.onLoad({ filter: /\.[cm]?js$/ }, (0, load_result_cache_1.createCachedLoad)(pluginOptions.loadResultCache, async (args) => {
                 return (0, profiling_1.profileAsync)('NG_EMIT_JS*', async () => {
-                    const contents = await javascriptTransformer.transformFile(args.path, pluginOptions.jit);
+                    const sideEffects = await hasSideEffects(args.path);
+                    const contents = await javascriptTransformer.transformFile(args.path, pluginOptions.jit, sideEffects);
                     return {
                         contents,
                         loader: 'js',
@@ -326,6 +331,19 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 void stylesheetBundler.dispose();
                 void compilation.close?.();
             });
+            /**
+             * Checks if the file has side-effects when `advancedOptimizations` is enabled.
+             */
+            async function hasSideEffects(path) {
+                if (!pluginOptions.advancedOptimizations) {
+                    return undefined;
+                }
+                const { sideEffects } = await build.resolve(path, {
+                    kind: 'import-statement',
+                    resolveDir: build.initialOptions.absWorkingDir ?? '',
+                });
+                return sideEffects;
+            }
         },
     };
 }

package/src/tools/esbuild/application-code-bundle.js

@@ -282,17 +282,6 @@ function getEsBuildCommonPolyfillsOptions(options, namespace, tryToResolvePolyfi
     // Locale data should go first so that project provided polyfill code can augment if needed.
     let needLocaleDataPlugin = false;
     if (i18nOptions.shouldInline) {
-        // When inlining, a placeholder is used to allow the post-processing step to inject the $localize locale identifier
-        polyfills.unshift('angular:locale/placeholder');
-        buildOptions.plugins?.push((0, virtual_module_plugin_1.createVirtualModulePlugin)({
-            namespace: 'angular:locale/placeholder',
-            entryPointOnly: false,
-            loadContent: () => ({
-                contents: `(globalThis.$localize ??= {}).locale = "___NG_LOCALE_INSERT___";\n`,
-                loader: 'js',
-                resolveDir: workspaceRoot,
-            }),
-        }));
         // Add locale data for all active locales
         // TODO: Inject each individually within the inlining process itself
         for (const locale of i18nOptions.inlineLocales) {
@@ -347,8 +336,13 @@ function getEsBuildCommonPolyfillsOptions(options, namespace, tryToResolvePolyfi
             let contents = polyfillPaths
                 .map((file) => `import '${file.replace(/\\/g, '/')}';`)
                 .join('\n');
-            // If not inlining translations and source locale is defined, inject the locale specifier
-            if (!i18nOptions.shouldInline && i18nOptions.hasDefinedSourceLocale) {
+            // The below should be done after loading `$localize` as otherwise the locale will be overridden.
+            if (i18nOptions.shouldInline) {
+                // When inlining, a placeholder is used to allow the post-processing step to inject the $localize locale identifier.
+                contents += '(globalThis.$localize ??= {}).locale = "___NG_LOCALE_INSERT___";\n';
+            }
+            else if (i18nOptions.hasDefinedSourceLocale) {
+                // If not inlining translations and source locale is defined, inject the locale specifier.
                 contents += `(globalThis.$localize ??= {}).locale = "${i18nOptions.sourceLocale}";\n`;
             }
             return {

package/src/tools/esbuild/i18n-inliner-worker.d.ts

@@ -32,6 +32,11 @@ interface InlineRequest {
  */
 export default function inlineLocale(request: InlineRequest): Promise<{
     file: string;
-    contents: string;
-}[]>;
+    code: string;
+    map: string | undefined;
+    messages: {
+        type: "error" | "warning";
+        message: string;
+    }[];
+}>;
 export {};

package/src/tools/esbuild/i18n-inliner-worker.js

@@ -32,13 +32,12 @@ async function inlineLocale(request) {
     const code = await data.text();
     const map = await files.get(request.filename + '.map')?.text();
     const result = await transformWithBabel(code, map && JSON.parse(map), request);
-    // TODO: Return diagnostics
-    // TODO: Consider buffer transfer instead of string copying
-    const response = [{ file: request.filename, contents: result.code }];
-    if (result.map) {
-        response.push({ file: request.filename + '.map', contents: result.map });
-    }
-    return response;
+    return {
+        file: request.filename,
+        code: result.code,
+        map: result.map,
+        messages: result.diagnostics.messages,
+    };
 }
 exports.default = inlineLocale;
 /**

package/src/tools/esbuild/i18n-inliner.d.ts

@@ -31,7 +31,11 @@ export declare class I18nInliner {
      * @param translation The translation messages to use when inlining.
      * @returns A promise that resolves to an array of OutputFiles representing a translated result.
      */
-    inlineForLocale(locale: string, translation: Record<string, unknown> | undefined): Promise<BuildOutputFile[]>;
+    inlineForLocale(locale: string, translation: Record<string, unknown> | undefined): Promise<{
+        outputFiles: BuildOutputFile[];
+        errors: string[];
+        warnings: string[];
+    }>;
     /**
      * Stops all active transformation tasks and shuts down all workers.
      * @returns A void promise that resolves when closing is complete.

package/src/tools/esbuild/i18n-inliner.js

@@ -11,6 +11,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.I18nInliner = void 0;
+const node_assert_1 = __importDefault(require("node:assert"));
 const piscina_1 = __importDefault(require("piscina"));
 const bundler_context_1 = require("./bundler-context");
 const utils_1 = require("./utils");
@@ -109,12 +110,33 @@ class I18nInliner {
         // Wait for all file requests to complete
         const rawResults = await Promise.all(requests);
         // Convert raw results to output file objects and include all unmodified files
-        return [
-            ...rawResults.flat().map(({ file, contents }) => 
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            (0, utils_1.createOutputFileFromText)(file, contents, this.#fileToType.get(file))),
+        const errors = [];
+        const warnings = [];
+        const outputFiles = [
+            ...rawResults.flatMap(({ file, code, map, messages }) => {
+                const type = this.#fileToType.get(file);
+                (0, node_assert_1.default)(type !== undefined, 'localized file should always have a type' + file);
+                const resultFiles = [(0, utils_1.createOutputFileFromText)(file, code, type)];
+                if (map) {
+                    resultFiles.push((0, utils_1.createOutputFileFromText)(file + '.map', map, type));
+                }
+                for (const message of messages) {
+                    if (message.type === 'error') {
+                        errors.push(message.message);
+                    }
+                    else {
+                        warnings.push(message.message);
+                    }
+                }
+                return resultFiles;
+            }),
             ...this.#unmodifiedFiles.map((file) => file.clone()),
         ];
+        return {
+            outputFiles,
+            errors,
+            warnings,
+        };
     }
     /**
      * Stops all active transformation tasks and shuts down all workers.

package/src/tools/esbuild/javascript-transformer-worker.d.ts

@@ -11,7 +11,8 @@ interface JavaScriptTransformRequest {
     sourcemap: boolean;
     thirdPartySourcemaps: boolean;
     advancedOptimizations: boolean;
-    skipLinker: boolean;
+    skipLinker?: boolean;
+    sideEffects?: boolean;
     jit: boolean;
 }
 export default function transformJavaScript(request: JavaScriptTransformRequest): Promise<Uint8Array>;

package/src/tools/esbuild/javascript-transformer-worker.js

@@ -50,10 +50,8 @@ async function transformWithBabel({ filename, data, ...options }) {
         // Strip sourcemaps if they should not be used
         return useInputSourcemap ? data : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '');
     }
-    // `@angular/platform-server/init` and `@angular/common/locales/global` entry-points are side effectful.
-    const safeAngularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(filename) &&
-        !/@angular[\\/]platform-server[\\/]f?esm2022[\\/]init/.test(filename) &&
-        !/@angular[\\/]common[\\/]locales[\\/]global/.test(filename);
+    const sideEffectFree = options.sideEffects === false;
+    const safeAngularPackage = sideEffectFree && /[\\/]node_modules[\\/]@angular[\\/]/.test(filename);
     // Lazy load the linker plugin only when linking is required
     if (shouldLink) {
         linkerPluginCreator ??= (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin;
@@ -78,6 +76,7 @@ async function transformWithBabel({ filename, data, ...options }) {
                     },
                     optimize: options.advancedOptimizations && {
                         pureTopLevel: safeAngularPackage,
+                        wrapDecorators: sideEffectFree,
                     },
                 },
             ],

package/src/tools/esbuild/javascript-transformer.d.ts

@@ -30,18 +30,20 @@ export declare class JavaScriptTransformer {
      * If no transformations are required, the data for the original file will be returned.
      * @param filename The full path to the file.
      * @param skipLinker If true, bypass all Angular linker processing; if false, attempt linking.
+     * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    transformFile(filename: string, skipLinker?: boolean): Promise<Uint8Array>;
+    transformFile(filename: string, skipLinker?: boolean, sideEffects?: boolean): Promise<Uint8Array>;
     /**
      * Performs JavaScript transformations on the provided data of a file. The file does not need
      * to exist on the filesystem.
      * @param filename The full path of the file represented by the data.
      * @param data The data of the file that should be transformed.
      * @param skipLinker If true, bypass all Angular linker processing; if false, attempt linking.
+     * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    transformData(filename: string, data: string, skipLinker: boolean): Promise<Uint8Array>;
+    transformData(filename: string, data: string, skipLinker: boolean, sideEffects?: boolean): Promise<Uint8Array>;
     /**
      * Stops all active transformation tasks and shuts down all workers.
      * @returns A void promise that resolves when closing is complete.

package/src/tools/esbuild/javascript-transformer.js

@@ -54,9 +54,10 @@ class JavaScriptTransformer {
      * If no transformations are required, the data for the original file will be returned.
      * @param filename The full path to the file.
      * @param skipLinker If true, bypass all Angular linker processing; if false, attempt linking.
+     * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    transformFile(filename, skipLinker) {
+    transformFile(filename, skipLinker, sideEffects) {
         const pendingKey = `${!!skipLinker}--${filename}`;
         let pending = this.#pendingfileResults?.get(pendingKey);
         if (pending === undefined) {
@@ -65,6 +66,7 @@ class JavaScriptTransformer {
             pending = this.#ensureWorkerPool().run({
                 filename,
                 skipLinker,
+                sideEffects,
                 ...this.#commonOptions,
             });
             this.#pendingfileResults?.set(pendingKey, pending);
@@ -77,9 +79,10 @@ class JavaScriptTransformer {
      * @param filename The full path of the file represented by the data.
      * @param data The data of the file that should be transformed.
      * @param skipLinker If true, bypass all Angular linker processing; if false, attempt linking.
+     * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    async transformData(filename, data, skipLinker) {
+    async transformData(filename, data, skipLinker, sideEffects) {
         // Perform a quick test to determine if the data needs any transformations.
         // This allows directly returning the data without the worker communication overhead.
         if (skipLinker && !this.#commonOptions.advancedOptimizations) {
@@ -91,6 +94,7 @@ class JavaScriptTransformer {
             filename,
             data,
             skipLinker,
+            sideEffects,
             ...this.#commonOptions,
         });
     }

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js

@@ -50,6 +50,10 @@ let postcss;
  * Based on https://tailwindcss.com/docs/functions-and-directives
  */
 const TAILWIND_KEYWORDS = ['@tailwind', '@layer', '@apply', '@config', 'theme(', 'screen('];
+/**
+ * Cached postcss instances that can be re-used between various StylesheetPluginFactory instances.
+ */
+const postcssProcessor = new Map();
 class StylesheetPluginFactory {
     options;
     cache;
@@ -73,9 +77,15 @@ class StylesheetPluginFactory {
                 return this.postcssProcessor;
             }
             if (options.tailwindConfiguration) {
-                postcss ??= (await Promise.resolve().then(() => __importStar(require('postcss')))).default;
-                const tailwind = await Promise.resolve(`${options.tailwindConfiguration.package}`).then(s => __importStar(require(s)));
-                this.postcssProcessor = postcss().use(tailwind.default({ config: options.tailwindConfiguration.file }));
+                const { package: tailwindPackage, file: config } = options.tailwindConfiguration;
+                const postCssInstanceKey = tailwindPackage + ':' + config;
+                this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
+                if (!this.postcssProcessor) {
+                    postcss ??= (await Promise.resolve().then(() => __importStar(require('postcss')))).default;
+                    const tailwind = await Promise.resolve(`${tailwindPackage}`).then(s => __importStar(require(s)));
+                    this.postcssProcessor = postcss().use(tailwind.default({ config }));
+                    postcssProcessor.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
+                }
             }
             return this.postcssProcessor;
         };

package/src/tools/esbuild/watcher.js

@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createWatcher = exports.ChangedFiles = void 0;
 const chokidar_1 = require("chokidar");
+const node_path_1 = require("node:path");
 class ChangedFiles {
     added = new Set();
     modified = new Set();
@@ -37,19 +38,64 @@ function createWatcher(options) {
     const nextQueue = [];
     let currentChanges;
     let nextWaitTimeout;
-    watcher.on('all', (event, path) => {
+    /**
+     * We group the current events in a map as on Windows with certain IDE a file contents change can trigger multiple events.
+     *
+     * Example:
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     */
+    let currentEvents;
+    /**
+     * Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time,
+     * but only after a file has been changed 3 or more times.
+     *
+     * Also, some IDEs such as Visual Studio (not VS Code) will fire a rename event instead of unlink when a file is renamed or changed.
+     *
+     * Example:
+     * ```
+     * watcher.on('raw')
+     * Change 1
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     * Change 2
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     * Change 3
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     * watcher.on('all')
+     * Change 1
+     * change | 'C:\\..\\src\\app\\app.component.css'
+     *
+     * Change 2
+     * unlink | 'C:\\..\\src\\app\\app.component.css'
+     *
+     * Change 3
+     * ... (Nothing)
+     * ```
+     */
+    watcher.on('raw', (event, path, { watchedPath }) => {
         switch (event) {
             case 'add':
-                currentChanges ??= new ChangedFiles();
-                currentChanges.added.add(path);
-                break;
             case 'change':
-                currentChanges ??= new ChangedFiles();
-                currentChanges.modified.add(path);
-                break;
+            // When using Visual Studio the rename event is fired before a change event when the contents of the file changed
+            // or instead of `unlink` when the file has been renamed.
             case 'unlink':
-                currentChanges ??= new ChangedFiles();
-                currentChanges.removed.add(path);
+            case 'rename':
+                // When polling is enabled `watchedPath` can be undefined.
+                // `path` is always normalized unlike `watchedPath`.
+                const changedPath = watchedPath ? (0, node_path_1.normalize)(watchedPath) : path;
+                currentEvents ??= new Map();
+                currentEvents.set(changedPath, event);
                 break;
             default:
                 return;
@@ -59,10 +105,25 @@ function createWatcher(options) {
             nextWaitTimeout = setTimeout(() => {
                 nextWaitTimeout = undefined;
                 const next = nextQueue.shift();
-                if (next) {
-                    const value = currentChanges;
-                    currentChanges = undefined;
-                    next(value);
+                if (next && currentEvents) {
+                    const events = currentEvents;
+                    currentEvents = undefined;
+                    const currentChanges = new ChangedFiles();
+                    for (const [path, event] of events) {
+                        switch (event) {
+                            case 'add':
+                                currentChanges.added.add(path);
+                                break;
+                            case 'change':
+                                currentChanges.modified.add(path);
+                                break;
+                            case 'unlink':
+                            case 'rename':
+                                currentChanges.removed.add(path);
+                                break;
+                        }
+                    }
+                    next(currentChanges);
                 }
             }, 250);
             nextWaitTimeout?.unref();