auklet 0.2.10 → 0.3.1

package/dist/css/core/styleProcessor.d.ts

@@ -23,6 +23,7 @@ export declare class StyleProcessor {
     private throwMissingLocalStyleImport;
     collectImportedStyleFiles(styleFiles: Array<string>): Set<string>;
     collectImportedStyleFileReferences(styleFiles: Array<string>): StyleFileImportReference[];
+    collectStyleImportReferences(styleFiles: Array<string>): StyleFileImportReference[];
     collectStyleImportSpecifiers(styleFiles: Array<string>): Set<string>;
     assertNoLocalStyleImportCycles(styleFiles: Array<string>): void;
     assertNoSourceRootEscapingLocalStyleImports(styleFiles: Array<string>): void;

package/dist/css/core/styleProcessor.js

@@ -98,6 +98,21 @@ export class StyleProcessor {
         }
         return imports;
     }
+    collectStyleImportReferences(styleFiles) {
+        const imports = [];
+        for (const styleFile of styleFiles) {
+            const css = fs.readFileSync(styleFile, 'utf8');
+            const root = this.parse(css, styleFile);
+            root.walkAtRules('import', (rule) => {
+                const specifier = this.parseImportSpecifier(rule.params);
+                if (!specifier)
+                    return;
+                const { reference } = this.resolveStyleImportReference(specifier, styleFile);
+                imports.push(reference);
+            });
+        }
+        return imports;
+    }
     collectStyleImportSpecifiers(styleFiles) {
         const specifiers = new Set();
         for (const styleFile of styleFiles) {

package/dist/css/vite/hmr.d.ts

@@ -1,18 +1,42 @@
 import type { HotUpdateOptions, ViteDevServer } from 'vite';
 import type { ModuleStyleGraph } from '#auklet/css/vite/moduleGraph/graph';
+type TrackedVirtualStyleFileKind = 'entry' | 'dependency';
+export type AukletStyleHmrOptions = {
+    pruneDelayMs?: number;
+};
 export declare class AukletStyleHmr {
     private readonly graph;
     private readonly lastUpdateTimes;
     private suppressFullReloadUntil;
     private readonly virtualIdsByDependency;
-    constructor(graph: () => ModuleStyleGraph);
-    trackVirtualStyleDependency(file: string, virtualId: string): void;
-    hasTrackedStyleDependency(file: string): boolean;
+    private readonly filesByVirtualId;
+    private readonly schedulePruneStaleVirtualDependencies;
+    private readonly pruneDelayMs;
+    constructor(graph: () => ModuleStyleGraph, options?: AukletStyleHmrOptions);
+    trackVirtualStyleDependency(file: string, virtualId: string, kind?: TrackedVirtualStyleFileKind): void;
+    replaceVirtualStyleDependency(virtualId: string, files: Array<string>, fileKinds?: Array<{
+        file: string;
+        kind: TrackedVirtualStyleFileKind;
+    }>): void;
+    hasTrackedStyleDependency(file: string, moduleGraph?: Pick<ViteDevServer['moduleGraph'], 'getModuleById'>): boolean;
+    pruneStaleVirtualDependencies(moduleGraph: Pick<ViteDevServer['moduleGraph'], 'getModuleById'>): void;
+    scheduleStaleVirtualDependencyPrune(moduleGraph: Pick<ViteDevServer['moduleGraph'], 'getModuleById'>): void;
+    cancelStaleVirtualDependencyPrune(): void;
     installFullReloadGuard(server: Pick<ViteDevServer, 'ws'>): void;
-    handleStyleHotUpdate(context: HotUpdateOptions): never[] | undefined;
-    handleSourceModuleChange(server: Pick<ViteDevServer, 'moduleGraph' | 'ws'>, file: string): boolean;
-    private sendVirtualStyleUpdates;
+    handleStyleHotUpdate(context: HotUpdateOptions): Promise<never[] | undefined>;
+    handleSourceModuleChange(server: Pick<ViteDevServer, 'moduleGraph' | 'ws'>, file: string): Promise<boolean>;
+    private parseTrackedVirtualIds;
+    private createTrackedVirtualStyleUpdates;
+    private invalidateTrackedVirtualPackages;
+    private getDependencyVirtualIds;
+    private getTrackedStyleFileEntries;
+    private createTrackedVirtualStyleResults;
+    private parseTrackedVirtualId;
+    private parseTrackedVirtualIdWithKind;
+    private refreshTrackedVirtualStyleUpdates;
+    private sameStyleLoadResult;
     private suppressFullReload;
     private shouldSuppressFullReload;
     private isDuplicateUpdate;
 }
+export {};

package/dist/css/vite/hmr.js

@@ -1,9 +1,10 @@
 import path from 'node:path';
-import { isString } from 'aidly';
+import { isString, throttle } from 'aidly';
 import { normalizeFileKey } from '#auklet/utils';
 import { createAukletLogger } from '#auklet/logger';
 const FULL_RELOAD_SUPPRESS_MS = 100;
 const DUPLICATE_UPDATE_IGNORE_MS = 500;
+const RESOLVED_VIRTUAL_ID_PREFIX = '\0auklet-css:';
 const logger = createAukletLogger({ scope: 'css:vite' });
 const toBrowserVirtualPath = (id) => {
     return `/@id/${id.replace('\0', '__x00__')}`;
@@ -11,20 +12,41 @@ const toBrowserVirtualPath = (id) => {
 const getRelativeFile = (file) => {
     return path.relative(process.cwd(), file);
 };
-const addVirtualStyleDependency = (virtualIdsByDependency, file, virtualId) => {
+const addVirtualStyleDependency = (virtualIdsByDependency, filesByVirtualId, file, virtualId, kind) => {
     const normalizedFile = normalizeFileKey(file);
     const values = virtualIdsByDependency.get(normalizedFile) ?? new Set();
     values.add(virtualId);
     virtualIdsByDependency.set(normalizedFile, values);
+    const files = filesByVirtualId.get(virtualId) ??
+        new Map();
+    const previousKind = files.get(normalizedFile);
+    files.set(normalizedFile, previousKind === 'entry' || kind === 'entry' ? 'entry' : kind);
+    filesByVirtualId.set(virtualId, files);
 };
-const getDependencyVirtualIds = (virtualIdsByDependency, file) => {
-    return Array.from(virtualIdsByDependency.get(normalizeFileKey(file)) ?? []);
+const removeVirtualStyleDependency = (virtualIdsByDependency, filesByVirtualId, file, virtualId) => {
+    const normalizedFile = normalizeFileKey(file);
+    const values = virtualIdsByDependency.get(normalizedFile);
+    if (values) {
+        values.delete(virtualId);
+        if (!values.size) {
+            virtualIdsByDependency.delete(normalizedFile);
+        }
+    }
+    const files = filesByVirtualId.get(virtualId);
+    if (files) {
+        files.delete(normalizedFile);
+        if (!files.size) {
+            filesByVirtualId.delete(virtualId);
+        }
+    }
 };
-const getDependencyVirtualModules = (virtualIdsByDependency, server, file) => {
-    return getDependencyVirtualIds(virtualIdsByDependency, file).flatMap((id) => {
-        const module = server.moduleGraph.getModuleById(id);
-        return module ? [module] : [];
-    });
+const sameStringSets = (left, right) => {
+    if (left.length !== right.length)
+        return false;
+    const rightSet = new Set(right);
+    if (rightSet.size !== left.length)
+        return false;
+    return left.every((item) => rightSet.has(item));
 };
 const createJsUpdates = (virtualIds, timestamp) => {
     return virtualIds.map((id) => {
@@ -44,14 +66,47 @@ export class AukletStyleHmr {
     lastUpdateTimes = new Map();
     suppressFullReloadUntil = 0;
     virtualIdsByDependency = new Map();
-    constructor(graph) {
+    filesByVirtualId = new Map();
+    schedulePruneStaleVirtualDependencies;
+    pruneDelayMs;
+    constructor(graph, options = {}) {
         this.graph = graph;
+        this.pruneDelayMs = options.pruneDelayMs ?? 2 * 60 * 1000;
+        this.schedulePruneStaleVirtualDependencies = throttle(this.pruneDelayMs, (moduleGraph) => this.pruneStaleVirtualDependencies(moduleGraph));
+    }
+    trackVirtualStyleDependency(file, virtualId, kind = 'dependency') {
+        addVirtualStyleDependency(this.virtualIdsByDependency, this.filesByVirtualId, file, virtualId, kind);
+    }
+    replaceVirtualStyleDependency(virtualId, files, fileKinds = []) {
+        const normalizedFiles = new Set(files.map((file) => normalizeFileKey(file)));
+        const previousFiles = this.filesByVirtualId.get(virtualId) ?? new Map();
+        const nextKinds = new Map(fileKinds.map((item) => [normalizeFileKey(item.file), item.kind]));
+        for (const file of previousFiles.keys()) {
+            if (normalizedFiles.has(file))
+                continue;
+            removeVirtualStyleDependency(this.virtualIdsByDependency, this.filesByVirtualId, file, virtualId);
+        }
+        for (const file of normalizedFiles) {
+            addVirtualStyleDependency(this.virtualIdsByDependency, this.filesByVirtualId, file, virtualId, nextKinds.get(file) ?? 'dependency');
+        }
+    }
+    hasTrackedStyleDependency(file, moduleGraph) {
+        return this.getDependencyVirtualIds(file, moduleGraph).length > 0;
+    }
+    pruneStaleVirtualDependencies(moduleGraph) {
+        for (const [normalizedFile, virtualIds] of this.virtualIdsByDependency) {
+            for (const virtualId of Array.from(virtualIds)) {
+                if (moduleGraph.getModuleById(virtualId))
+                    continue;
+                removeVirtualStyleDependency(this.virtualIdsByDependency, this.filesByVirtualId, normalizedFile, virtualId);
+            }
+        }
     }
-    trackVirtualStyleDependency(file, virtualId) {
-        addVirtualStyleDependency(this.virtualIdsByDependency, file, virtualId);
+    scheduleStaleVirtualDependencyPrune(moduleGraph) {
+        this.schedulePruneStaleVirtualDependencies(moduleGraph);
     }
-    hasTrackedStyleDependency(file) {
-        return (getDependencyVirtualIds(this.virtualIdsByDependency, file).length > 0);
+    cancelStaleVirtualDependencyPrune() {
+        this.schedulePruneStaleVirtualDependencies.cancel();
     }
     installFullReloadGuard(server) {
         const send = server.ws.send.bind(server.ws);
@@ -69,49 +124,199 @@ export class AukletStyleHmr {
             send(payload);
         });
     }
-    handleStyleHotUpdate(context) {
+    async handleStyleHotUpdate(context) {
         const graph = this.graph();
-        if (!graph.isSourceGraphFile(context.file) ||
-            !graph.isStyleFile(context.file)) {
-            return;
+        if (!graph.isStyleFile(context.file)) {
+            return undefined;
+        }
+        const isSourceGraphFile = graph.isSourceGraphFile(context.file);
+        const trackedEntries = this.getTrackedStyleFileEntries(context.file, context.server.moduleGraph);
+        if (!trackedEntries.length) {
+            if (isSourceGraphFile) {
+                graph.invalidateFile(context.file);
+            }
+            return undefined;
+        }
+        const entryEntries = isSourceGraphFile
+            ? trackedEntries.filter((item) => item.kind === 'entry')
+            : [];
+        const dependencyEntries = isSourceGraphFile
+            ? trackedEntries.filter((item) => item.kind === 'dependency')
+            : trackedEntries;
+        const previousResults = entryEntries.length
+            ? this.createTrackedVirtualStyleResults(graph, entryEntries)
+            : null;
+        if (isSourceGraphFile) {
+            graph.invalidateFile(context.file);
+        }
+        else {
+            this.invalidateTrackedVirtualPackages(graph, dependencyEntries);
         }
-        this.suppressFullReload();
-        graph.invalidateFile(context.file);
         if (this.isDuplicateUpdate(context.file)) {
             return [];
         }
-        const updates = this.sendVirtualStyleUpdates(context.file, context.server, context.timestamp);
-        logger.info(`package css hmr ${getRelativeFile(context.file)} tracked=${updates.tracked} updates=${updates.sent}`);
+        const updates = [
+            ...(dependencyEntries.length
+                ? this.createTrackedVirtualStyleUpdates(context.server, dependencyEntries, context.timestamp)
+                : []),
+            ...(entryEntries.length
+                ? await this.refreshTrackedVirtualStyleUpdates(context.server, entryEntries, previousResults, context.timestamp)
+                : []),
+        ];
+        if (!updates.length) {
+            return undefined;
+        }
+        this.suppressFullReload();
+        context.server.ws.send({
+            type: 'update',
+            updates,
+        });
+        logger.info(`package css hmr ${getRelativeFile(context.file)} tracked=${trackedEntries.length} updates=${updates.length}`);
         return [];
     }
-    handleSourceModuleChange(server, file) {
+    async handleSourceModuleChange(server, file) {
         const graph = this.graph();
         if (!graph.isSourceGraphFile(file) || !graph.isSourceModuleFile(file)) {
             return false;
         }
+        const virtualIds = this.getDependencyVirtualIds(file, server.moduleGraph);
+        if (!virtualIds.length) {
+            graph.invalidateFile(file);
+            return false;
+        }
+        const parsedVirtualIds = this.parseTrackedVirtualIds(graph, virtualIds);
+        if (!parsedVirtualIds.length) {
+            graph.invalidateFile(file);
+            return false;
+        }
+        const previousResults = this.createTrackedVirtualStyleResults(graph, parsedVirtualIds);
         graph.invalidateFile(file);
-        const updates = this.sendVirtualStyleUpdates(file, server, Date.now());
-        logger.info(`package css source hmr ${getRelativeFile(file)} tracked=${updates.tracked} updates=${updates.sent}`);
+        const updates = await this.refreshTrackedVirtualStyleUpdates(server, parsedVirtualIds, previousResults, Date.now());
+        if (!updates.length) {
+            return false;
+        }
+        this.suppressFullReload();
+        server.ws.send({
+            type: 'update',
+            updates,
+        });
+        logger.info(`package css source hmr ${getRelativeFile(file)} tracked=${parsedVirtualIds.length} updates=${updates.length}`);
         return true;
     }
-    sendVirtualStyleUpdates(file, server, timestamp) {
-        const virtualIds = getDependencyVirtualIds(this.virtualIdsByDependency, file);
-        const modules = getDependencyVirtualModules(this.virtualIdsByDependency, server, file);
-        for (const module of modules) {
-            server.moduleGraph.invalidateModule(module);
+    parseTrackedVirtualIds(graph, virtualIds) {
+        return virtualIds
+            .map((id) => this.parseTrackedVirtualId(graph, id))
+            .filter((item) => item !== null);
+    }
+    createTrackedVirtualStyleUpdates(server, parsedVirtualIds, timestamp) {
+        const changedVirtualIds = [];
+        for (const item of parsedVirtualIds) {
+            changedVirtualIds.push(item.id);
+            const module = server.moduleGraph.getModuleById(item.id);
+            if (module) {
+                server.moduleGraph.invalidateModule(module);
+            }
+        }
+        return createJsUpdates(changedVirtualIds, timestamp);
+    }
+    invalidateTrackedVirtualPackages(graph, parsedVirtualIds) {
+        const packageNames = new Set(parsedVirtualIds.map((item) => item.parsed.packageName));
+        for (const packageName of packageNames) {
+            graph.invalidatePackage(packageName);
+        }
+    }
+    getDependencyVirtualIds(file, moduleGraph) {
+        const normalizedFile = normalizeFileKey(file);
+        const virtualIds = Array.from(this.virtualIdsByDependency.get(normalizedFile) ?? []);
+        if (!moduleGraph) {
+            return virtualIds;
+        }
+        const liveVirtualIds = virtualIds.filter((virtualId) => moduleGraph.getModuleById(virtualId));
+        if (liveVirtualIds.length !== virtualIds.length) {
+            const liveSet = new Set(liveVirtualIds);
+            for (const virtualId of virtualIds) {
+                if (liveSet.has(virtualId))
+                    continue;
+                removeVirtualStyleDependency(this.virtualIdsByDependency, this.filesByVirtualId, normalizedFile, virtualId);
+            }
+        }
+        return liveVirtualIds;
+    }
+    getTrackedStyleFileEntries(file, moduleGraph) {
+        const normalizedFile = normalizeFileKey(file);
+        const virtualIds = Array.from(this.virtualIdsByDependency.get(normalizedFile) ?? []);
+        const entries = virtualIds
+            .map((id) => this.parseTrackedVirtualIdWithKind(id, normalizedFile, moduleGraph))
+            .filter((item) => Boolean(item));
+        if (!moduleGraph) {
+            return entries;
+        }
+        if (entries.length !== virtualIds.length) {
+            const liveSet = new Set(entries.map((item) => item.id));
+            for (const virtualId of virtualIds) {
+                if (liveSet.has(virtualId))
+                    continue;
+                removeVirtualStyleDependency(this.virtualIdsByDependency, this.filesByVirtualId, normalizedFile, virtualId);
+            }
+        }
+        return entries;
+    }
+    createTrackedVirtualStyleResults(graph, parsedVirtualIds) {
+        const previousResults = new Map();
+        for (const item of parsedVirtualIds) {
+            previousResults.set(item.id, graph.peekPackageStyleCode(item.parsed));
         }
-        const updates = createJsUpdates(virtualIds, timestamp);
-        if (updates.length) {
-            server.ws.send({
-                type: 'update',
-                updates,
-            });
+        return previousResults;
+    }
+    parseTrackedVirtualId(graph, id) {
+        const parsedId = id.startsWith(RESOLVED_VIRTUAL_ID_PREFIX)
+            ? id.slice(RESOLVED_VIRTUAL_ID_PREFIX.length)
+            : id;
+        const parsed = graph.parsePackageStyleId(parsedId);
+        if (!parsed || !graph.getPackageNames().includes(parsed.packageName)) {
+            return null;
+        }
+        return {
+            id,
+            parsed,
+            kind: 'dependency',
+        };
+    }
+    parseTrackedVirtualIdWithKind(id, normalizedFile, moduleGraph) {
+        if (moduleGraph && !moduleGraph.getModuleById(id)) {
+            return null;
         }
+        const parsed = this.parseTrackedVirtualId(this.graph(), id);
+        if (!parsed)
+            return null;
+        const kind = this.filesByVirtualId.get(id)?.get(normalizedFile) ?? 'dependency';
         return {
-            sent: updates.length,
-            tracked: virtualIds.length,
+            ...parsed,
+            kind,
         };
     }
+    async refreshTrackedVirtualStyleUpdates(server, parsedVirtualIds, previousResults, timestamp) {
+        const graph = this.graph();
+        const changedVirtualIds = [];
+        for (const item of parsedVirtualIds) {
+            const nextResult = await graph.createPackageStyleCode(item.parsed);
+            const previousResult = previousResults.get(item.id);
+            if (!previousResult ||
+                !this.sameStyleLoadResult(previousResult, nextResult)) {
+                changedVirtualIds.push(item.id);
+                const module = server.moduleGraph.getModuleById(item.id);
+                if (module) {
+                    server.moduleGraph.invalidateModule(module);
+                }
+            }
+        }
+        return createJsUpdates(changedVirtualIds, timestamp);
+    }
+    sameStyleLoadResult(left, right) {
+        return (left.code === right.code &&
+            sameStringSets(left.watchFiles, right.watchFiles) &&
+            sameStringSets(left.dependencyPackages ?? [], right.dependencyPackages ?? []));
+    }
     suppressFullReload() {
         this.suppressFullReloadUntil = Date.now() + FULL_RELOAD_SUPPRESS_MS;
     }

package/dist/css/vite/moduleGraph/graph.d.ts

@@ -16,6 +16,7 @@ export declare class ModuleStyleGraph {
     getPackageNames(): string[];
     getWatchRoots(): Promise<string[]>;
     createPackageStyleCode(parsed: PackageStyleId): Promise<import("#auklet/css/vite/moduleGraph/types").PackageStyleLoadResult>;
+    peekPackageStyleCode(parsed: PackageStyleId): import("#auklet/css/vite/moduleGraph/types").PackageStyleLoadResult | null;
     invalidatePackage(packageName: string): void;
     invalidateFile(file: string): string | null;
     isSourceModuleFile(file: string): boolean;

package/dist/css/vite/moduleGraph/graph.js

@@ -60,6 +60,9 @@ export class ModuleStyleGraph {
     createPackageStyleCode(parsed) {
         return this.styleCodeFactory.createPackageStyleCode(parsed, this.requestCache);
     }
+    peekPackageStyleCode(parsed) {
+        return this.requestCache.peekLoadResult(parsed);
+    }
     invalidatePackage(packageName) {
         this.requestCache.invalidatePackage(packageName);
     }

package/dist/css/vite/moduleGraph/loadResult.d.ts

@@ -4,4 +4,8 @@ export declare function mergeLoadResults(...results: Array<PackageStyleLoadResul
     watchFiles: string[];
     cacheInputFiles: string[];
     dependencyPackages: string[];
+    watchFileKinds: {
+        file: string;
+        kind: "dependency" | "entry";
+    }[];
 };

package/dist/css/vite/moduleGraph/loadResult.js

@@ -1,5 +1,15 @@
 // 合并递归 style graph 加载结果，同时保留 CSS 顺序并去重 watch files。
 export function mergeLoadResults(...results) {
+    const watchFileKinds = new Map();
+    for (const result of results) {
+        for (const item of result.watchFileKinds ?? []) {
+            const currentKind = watchFileKinds.get(item.file);
+            if (currentKind === 'entry' || item.kind === currentKind) {
+                continue;
+            }
+            watchFileKinds.set(item.file, item.kind === 'entry' ? 'entry' : (currentKind ?? item.kind));
+        }
+    }
     return {
         code: results
             .map((result) => result.code)
@@ -8,5 +18,9 @@ export function mergeLoadResults(...results) {
         watchFiles: Array.from(new Set(results.flatMap((result) => result.watchFiles))),
         cacheInputFiles: Array.from(new Set(results.flatMap((result) => result.cacheInputFiles ?? []))),
         dependencyPackages: Array.from(new Set(results.flatMap((result) => result.dependencyPackages ?? []))),
+        watchFileKinds: Array.from(watchFileKinds, ([file, kind]) => ({
+            file,
+            kind,
+        })),
     };
 }

package/dist/css/vite/moduleGraph/persistentCache.d.ts

@@ -1,10 +1,12 @@
 import type { PackageStyleLoadResult } from '#auklet/css/vite/moduleGraph/types';
 export type PersistentStyleGraphCacheOptions = {
     root: string;
+    maxCacheFiles?: number;
 };
 export declare class PersistentStyleGraphCache {
-    private static readonly cleanedRoots;
+    private static readonly lastCleanupTimes;
     private readonly cacheRoot;
+    private readonly maxCacheFiles;
     constructor(options: PersistentStyleGraphCacheOptions);
     createKey(value: unknown): string;
     read(key: string): PackageStyleLoadResult | null;

package/dist/css/vite/moduleGraph/persistentCache.js

@@ -4,6 +4,7 @@ import crypto from 'node:crypto';
 import { toPosixPath } from '#auklet/utils';
 const cacheVersion = 'v1';
 const maxCacheFiles = 5000;
+const cleanupIntervalMs = 5 * 60 * 1000;
 const staleCacheAgeMs = 7 * 24 * 60 * 60 * 1000;
 const stableStringify = (value) => {
     if (Array.isArray(value)) {
@@ -68,10 +69,12 @@ const statCachedFile = (file) => {
     };
 };
 export class PersistentStyleGraphCache {
-    static cleanedRoots = new Set();
+    static lastCleanupTimes = new Map();
     cacheRoot;
+    maxCacheFiles;
     constructor(options) {
         this.cacheRoot = path.join(options.root, 'node_modules', '.auklet', 'cache', 'vite-style', cacheVersion);
+        this.maxCacheFiles = options.maxCacheFiles ?? maxCacheFiles;
     }
     createKey(value) {
         return hashValue({
@@ -96,10 +99,10 @@ export class PersistentStyleGraphCache {
         }
     }
     write(key, result, inputFiles) {
-        const files = Array.from(new Map(inputFiles
-            .map((file) => statCachedFile(file))
-            .map((file) => [file.file, file])).values());
         try {
+            const files = Array.from(new Map(inputFiles
+                .map((file) => statCachedFile(file))
+                .map((file) => [file.file, file])).values());
             fs.mkdirSync(this.cacheRoot, { recursive: true });
             fs.writeFileSync(this.getCacheFile(key), `${JSON.stringify({
                 files,
@@ -114,11 +117,12 @@ export class PersistentStyleGraphCache {
         this.cleanupStaleEntries();
     }
     cleanupStaleEntries() {
-        if (PersistentStyleGraphCache.cleanedRoots.has(this.cacheRoot))
+        const now = Date.now();
+        const lastCleanupTime = PersistentStyleGraphCache.lastCleanupTimes.get(this.cacheRoot) ?? 0;
+        if (now - lastCleanupTime < cleanupIntervalMs)
             return;
-        PersistentStyleGraphCache.cleanedRoots.add(this.cacheRoot);
+        PersistentStyleGraphCache.lastCleanupTimes.set(this.cacheRoot, now);
         try {
-            const now = Date.now();
             const entries = fs
                 .readdirSync(this.cacheRoot, { withFileTypes: true })
                 .filter((entry) => entry.isFile() && entry.name.endsWith('.json'))
@@ -137,7 +141,7 @@ export class PersistentStyleGraphCache {
                 }
                 freshEntries.push(entry);
             }
-            const overflowCount = freshEntries.length - maxCacheFiles;
+            const overflowCount = freshEntries.length - this.maxCacheFiles;
             if (overflowCount <= 0)
                 return;
             for (const entry of freshEntries

package/dist/css/vite/moduleGraph/requestCache.d.ts

@@ -4,6 +4,10 @@ import type { StyleProcessor } from '#auklet/css/core/styleProcessor';
 import type { WorkspaceStyleResolver } from '#auklet/css/core/workspaceStyleResolver';
 import type { StylePackageSource } from '#auklet/css/vite/moduleGraph/packageSource/types';
 import type { LoadAukletConfig, PackageStyleId, PackageStyleLoadResult } from '#auklet/css/vite/moduleGraph/types';
+type LoadResultEntry = {
+    commit?: () => PackageStyleLoadResult;
+    result: PackageStyleLoadResult;
+};
 export type PackageStyleContext = {
     normalizedConfig: NormalizedAukletConfig;
     context: ResolvedModuleStyleBuildContext;
@@ -25,9 +29,12 @@ export declare class ModuleStyleGraphRequestCache {
     private readonly options;
     private readonly contexts;
     private readonly loadResults;
+    private readonly settledLoadResults;
     private readonly loadResultDependencies;
+    private readonly loadResultVersions;
     private readonly loadAukletConfig;
     private readonly persistentCache;
+    private graphVersion;
     constructor(options: ModuleStyleGraphRequestCacheOptions);
     getPackageNames(): string[];
     isKnownPackageName(packageName: string): boolean;
@@ -68,13 +75,14 @@ export declare class ModuleStyleGraphRequestCache {
         sourceRoot: string;
         styleProcessor: StyleProcessor;
     } | null>;
-    getLoadResult(parsed: PackageStyleId, create: () => Promise<PackageStyleLoadResult>): Promise<PackageStyleLoadResult>;
+    getLoadResult(parsed: PackageStyleId, create: () => Promise<LoadResultEntry>): Promise<PackageStyleLoadResult>;
     invalidatePackage(packageName: string): void;
     readPersistentLoadResult(parsed: PackageStyleId, context: PackageStyleContext): PackageStyleLoadResult | null;
     writePersistentLoadResult(parsed: PackageStyleId, context: PackageStyleContext, result: PackageStyleLoadResult): {
         cacheInputFiles: string[];
         code: string;
         watchFiles: Array<string>;
+        watchFileKinds?: Array<import("#auklet/css/vite/moduleGraph/types").PackageStyleWatchFile>;
         dependencyPackages?: Array<string>;
     };
     private createContext;
@@ -87,4 +95,10 @@ export declare class ModuleStyleGraphRequestCache {
     private getLoadResultKey;
     private getLoadResultPackageName;
     private invalidateLoadResults;
+    private discardLoadResult;
+    peekLoadResult(parsed: PackageStyleId): PackageStyleLoadResult | null;
+    private getGraphVersion;
+    private bumpGraphVersion;
+    private bumpLoadResultVersion;
 }
+export {};

package/dist/css/vite/moduleGraph/requestCache.js

@@ -8,9 +8,12 @@ export class ModuleStyleGraphRequestCache {
     options;
     contexts = new Map();
     loadResults = new Map();
+    settledLoadResults = new Map();
     loadResultDependencies = new Map();
+    loadResultVersions = new Map();
     loadAukletConfig;
     persistentCache;
+    graphVersion = 0;
     constructor(options) {
         this.options = options;
         this.loadAukletConfig = options.loadAukletConfig ?? loadAukletConfig;
@@ -37,14 +40,53 @@ export class ModuleStyleGraphRequestCache {
         const cachedResult = this.loadResults.get(key);
         if (cachedResult)
             return cachedResult;
-        const result = create().then((value) => {
-            this.loadResultDependencies.set(key, new Set(value.dependencyPackages ?? []));
-            return value;
+        const version = this.bumpLoadResultVersion(key);
+        const graphVersion = this.getGraphVersion();
+        let result;
+        result = create()
+            .then(async (entry) => {
+            if (this.getGraphVersion() !== graphVersion) {
+                const currentResult = this.loadResults.get(key);
+                if (currentResult && currentResult !== result) {
+                    return currentResult;
+                }
+                this.discardLoadResult(key);
+                return this.getLoadResult(parsed, create);
+            }
+            if (this.loadResultVersions.get(key) === version) {
+                this.loadResultDependencies.set(key, new Set(entry.result.dependencyPackages ?? []));
+            }
+            try {
+                const committedResult = entry.commit?.();
+                if (committedResult) {
+                    entry.result = committedResult;
+                }
+            }
+            catch {
+                // Persistent cache writes are best-effort and must not fail dev CSS.
+            }
+            this.settledLoadResults.set(key, entry.result);
+            return entry.result;
+        })
+            .catch((error) => {
+            if (this.getGraphVersion() !== graphVersion) {
+                const currentResult = this.loadResults.get(key);
+                if (currentResult && currentResult !== result) {
+                    return currentResult;
+                }
+                this.discardLoadResult(key);
+                return this.getLoadResult(parsed, create);
+            }
+            if (this.loadResultVersions.get(key) === version) {
+                this.discardLoadResult(key);
+            }
+            throw error;
         });
         this.loadResults.set(key, result);
         return result;
     }
     invalidatePackage(packageName) {
+        this.bumpGraphVersion();
         this.contexts.delete(packageName);
         this.invalidateLoadResults(packageName);
     }
@@ -208,8 +250,29 @@ export class ModuleStyleGraphRequestCache {
                     continue;
                 }
             }
-            this.loadResults.delete(key);
-            this.loadResultDependencies.delete(key);
+            this.discardLoadResult(key);
         }
     }
+    discardLoadResult(key) {
+        this.bumpGraphVersion();
+        this.bumpLoadResultVersion(key);
+        this.loadResults.delete(key);
+        this.loadResultDependencies.delete(key);
+        this.settledLoadResults.delete(key);
+    }
+    peekLoadResult(parsed) {
+        return this.settledLoadResults.get(this.getLoadResultKey(parsed)) ?? null;
+    }
+    getGraphVersion() {
+        return this.graphVersion;
+    }
+    bumpGraphVersion() {
+        this.graphVersion += 1;
+        return this.graphVersion;
+    }
+    bumpLoadResultVersion(key) {
+        const nextVersion = (this.loadResultVersions.get(key) ?? 0) + 1;
+        this.loadResultVersions.set(key, nextVersion);
+        return nextVersion;
+    }
 }

package/dist/css/vite/moduleGraph/styleCodeFactory.d.ts

@@ -14,6 +14,7 @@ export declare class StyleCodeFactory {
     private createModuleStyleCode;
     private createSourceModuleStyleCode;
     private createOwnSourceStyleCode;
+    private collectSourceStyleWatchFiles;
     private toDevModuleImportSpecifier;
     private toDevExternalStyleSpecifier;
     private parsePackageStyleIdInRequest;

package/dist/css/vite/moduleGraph/styleCodeFactory.js

@@ -1,3 +1,4 @@
+import fs from 'node:fs';
 import path from 'node:path';
 import postcss from 'postcss';
 import { mergeLoadResults } from '#auklet/css/vite/moduleGraph/loadResult';
@@ -14,19 +15,30 @@ export class StyleCodeFactory {
         this.config = config;
     }
     async createPackageStyleCode(parsed, cache) {
-        return cache.getLoadResult(parsed, async () => this.normalizeTopLevelImports(await this.createUncachedPackageStyleCode(parsed, cache)));
-    }
-    async createUncachedPackageStyleCode(parsed, cache) {
-        const context = await cache.getContext(parsed);
-        if (!context) {
+        return cache.getLoadResult(parsed, async () => {
+            const context = await cache.getContext(parsed);
+            if (!context) {
+                return {
+                    result: {
+                        code: '',
+                        watchFiles: [],
+                    },
+                };
+            }
+            const cachedResult = cache.readPersistentLoadResult(parsed, context);
+            if (cachedResult) {
+                return {
+                    result: cachedResult,
+                };
+            }
+            const result = this.normalizeTopLevelImports(await this.createUncachedPackageStyleCode(parsed, cache, context));
             return {
-                code: '',
-                watchFiles: [],
+                result,
+                commit: () => cache.writePersistentLoadResult(parsed, context, result),
             };
-        }
-        const cachedResult = cache.readPersistentLoadResult(parsed, context);
-        if (cachedResult)
-            return cachedResult;
+        });
+    }
+    async createUncachedPackageStyleCode(parsed, cache, context) {
         let result;
         if (parsed.stylePath === STYLE_ENTRY) {
             result = await this.createStyleCode(context, cache);
@@ -45,7 +57,7 @@ export class StyleCodeFactory {
         else {
             result = await this.createSourceModuleStyleCode(context, cache, parsed.stylePath);
         }
-        return cache.writePersistentLoadResult(parsed, context, this.normalizeTopLevelImports(result));
+        return result;
     }
     async createStyleCode(context, cache) {
         const results = [];
@@ -155,7 +167,7 @@ export class StyleCodeFactory {
     async createSourceModuleStyleCode(context, cache, stylePath) {
         context.packageContext.assertPreservedLocalStyleImports();
         const sourceModuleDir = removeStyleExtension(stylePath);
-        const { styleFiles, sourceFiles } = context.packageContext;
+        const { sourceFiles } = context.packageContext;
         const entry = createModuleStyleEntryPlan(context.packageContext, sourceModuleDir);
         const sourceStyleDir = path.join(context.sourceRoot, sourceModuleDir, this.config.output.styleDir);
         const moduleStyleResults = [];
@@ -178,16 +190,31 @@ export class StyleCodeFactory {
             }
         }
         const ownStyleCode = this.createOwnSourceStyleCode(context, entry.ownStyleFiles);
+        const sourceWatchFiles = this.collectSourceStyleWatchFiles(context, entry.ownStyleFiles);
         return mergeLoadResults(...moduleStyleResults, {
             code: [createImportCode(moduleStyleSpecifiers), ownStyleCode]
                 .filter((code) => code.trim())
                 .join('\n'),
             watchFiles: [
                 ...context.configPaths,
-                ...styleFiles,
+                ...sourceWatchFiles.map((item) => item.file),
                 ...moduleStyleWatchFiles,
                 ...sourceFiles.filter((file) => /\.(ts|tsx)$/.test(file)),
             ],
+            watchFileKinds: [
+                ...context.configPaths.map((file) => ({
+                    file,
+                    kind: 'dependency',
+                })),
+                ...sourceWatchFiles,
+                ...moduleStyleWatchFiles.map((file) => ({
+                    file,
+                    kind: 'dependency',
+                })),
+                ...sourceFiles
+                    .filter((file) => /\.(ts|tsx)$/.test(file))
+                    .map((file) => ({ file, kind: 'dependency' })),
+            ],
             cacheInputFiles: moduleStyleCacheInputFiles,
         });
     }
@@ -209,6 +236,42 @@ export class StyleCodeFactory {
         }
         return root.nodes?.length ? context.styleProcessor.stringify(root) : '';
     }
+    collectSourceStyleWatchFiles(context, styleFiles) {
+        const watchFiles = new Map();
+        const pending = styleFiles.map((file) => ({
+            file,
+            kind: 'entry',
+        }));
+        const visited = new Set();
+        while (pending.length) {
+            const current = pending.pop();
+            if (!current)
+                continue;
+            const styleFile = current.file;
+            const normalized = path.resolve(styleFile);
+            if (visited.has(normalized))
+                continue;
+            visited.add(normalized);
+            const previousKind = watchFiles.get(normalized);
+            watchFiles.set(normalized, previousKind === 'entry' || current.kind === 'entry'
+                ? 'entry'
+                : 'dependency');
+            for (const reference of context.styleProcessor.collectStyleImportReferences([normalized])) {
+                if (!context.resolver.isStyleFile(reference.imported) ||
+                    !fs.existsSync(reference.imported)) {
+                    continue;
+                }
+                pending.push({
+                    file: reference.imported,
+                    kind: 'dependency',
+                });
+            }
+        }
+        return Array.from(watchFiles, ([file, kind]) => ({
+            file,
+            kind,
+        }));
+    }
     toDevModuleImportSpecifier(specifier, context, cache, sourceStyleDir) {
         return createDevModuleStyleSpecifier(specifier, {
             sourceStyleDir,

package/dist/css/vite/moduleGraph/types.d.ts

@@ -9,10 +9,16 @@ export type PackageStyleId = {
     packageName: string;
     stylePath: string;
 };
+export type PackageStyleWatchFileKind = 'entry' | 'dependency';
+export type PackageStyleWatchFile = {
+    file: string;
+    kind: PackageStyleWatchFileKind;
+};
 export type PackageStyleLoadResult = {
     code: string;
     cacheInputFiles?: Array<string>;
     watchFiles: Array<string>;
+    watchFileKinds?: Array<PackageStyleWatchFile>;
     dependencyPackages?: Array<string>;
 };
 export type LoadAukletConfig = (packageRoot: string, options?: {

package/dist/css/vite/vitePlugin.d.ts

@@ -15,6 +15,6 @@ export declare function aukletStylePlugin(options?: AukletStylePluginOptions): {
     configureServer(server: ViteDevServer): Promise<void>;
     hotUpdate: {
         order: "pre";
-        handler(context: HotUpdateOptions): never[] | undefined;
+        handler(context: HotUpdateOptions): Promise<never[] | undefined>;
     };
 };

package/dist/css/vite/vitePlugin.js

@@ -2,10 +2,12 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { AukletStyleHmr } from '#auklet/css/vite/hmr';
 import { ModuleStyleGraph } from '#auklet/css/vite/moduleGraph/graph';
+import { createAukletLogger } from '#auklet/logger';
 const WORKSPACE_FILE = 'pnpm-workspace.yaml';
 const VIRTUAL_ID_PREFIX = 'virtual:auklet-css:';
 const RESOLVED_VIRTUAL_ID_PREFIX = '\0auklet-css:';
 const BROWSER_VIRTUAL_ID_PREFIX = 'auklet-css:';
+const logger = createAukletLogger({ scope: 'css:vite' });
 const stripQuery = (id) => id.split('?')[0];
 const toResolvedVirtualId = (id) => {
     if (id.startsWith(RESOLVED_VIRTUAL_ID_PREFIX)) {
@@ -42,6 +44,20 @@ const resolveGraphRoot = (mode, viteRoot) => {
         return findWorkspaceRoot(viteRoot) ?? process.cwd();
     return viteRoot;
 };
+const createWatcherErrorPayload = (error, file) => {
+    const err = error instanceof Error
+        ? error
+        : new Error(typeof error === 'string' ? error : String(error));
+    return {
+        type: 'error',
+        err: {
+            message: err.message,
+            stack: err.stack ?? err.message,
+            plugin: 'auklet-css',
+            id: file,
+        },
+    };
+};
 const invalidateVirtualModules = (server, graph) => {
     const modules = [];
     for (const packageName of graph.getPackageNames()) {
@@ -57,6 +73,7 @@ const invalidateVirtualModules = (server, graph) => {
 };
 export function aukletStylePlugin(options = {}) {
     let graph = null;
+    let moduleGraph = null;
     const getGraph = () => {
         if (!graph) {
             graph = createModuleStyleGraph(options, process.cwd());
@@ -93,15 +110,24 @@ export function aukletStylePlugin(options = {}) {
             if (!parsed)
                 return null;
             const result = await graph.createPackageStyleCode(parsed);
+            if (moduleGraph) {
+                hmr.pruneStaleVirtualDependencies(moduleGraph);
+            }
+            hmr.replaceVirtualStyleDependency(id, result.watchFiles, result.watchFileKinds);
             for (const file of result.watchFiles) {
-                hmr.trackVirtualStyleDependency(file, id);
                 this.addWatchFile?.(file);
             }
             return result.code;
         },
         async configureServer(server) {
             const graph = getGraph();
+            moduleGraph = server.moduleGraph;
             hmr.installFullReloadGuard(server);
+            const close = server.close.bind(server);
+            server.close = (async () => {
+                hmr.cancelStaleVirtualDependencyPrune();
+                return close();
+            });
             server.watcher.add(await graph.getWatchRoots());
             const invalidateStyleGraph = (file) => {
                 if (!graph.isSourceGraphFile(file))
@@ -117,23 +143,35 @@ export function aukletStylePlugin(options = {}) {
             };
             server.watcher.on('add', reloadStyleGraph);
             server.watcher.on('unlink', reloadStyleGraph);
-            server.watcher.on('change', (file) => {
-                if (graph.isStyleConfigFile(file)) {
-                    reloadStyleGraph(file);
-                }
-                else if (graph.isStyleFile(file) &&
-                    hmr.hasTrackedStyleDependency(file)) {
-                    hmr.handleStyleHotUpdate({
-                        file,
-                        modules: [],
-                        server,
-                        timestamp: Date.now(),
-                        type: 'update',
-                        read: async () => '',
-                    });
+            server.watcher.on('change', async (file) => {
+                try {
+                    hmr.scheduleStaleVirtualDependencyPrune(server.moduleGraph);
+                    if (graph.isStyleConfigFile(file)) {
+                        reloadStyleGraph(file);
+                    }
+                    else if (graph.isStyleFile(file)) {
+                        if (hmr.hasTrackedStyleDependency(file)) {
+                            await hmr.handleStyleHotUpdate({
+                                file,
+                                modules: [],
+                                server,
+                                timestamp: Date.now(),
+                                type: 'update',
+                                read: async () => '',
+                            });
+                        }
+                        else {
+                            graph.invalidateFile(file);
+                        }
+                    }
+                    else if (graph.isSourceModuleFile(file)) {
+                        await hmr.handleSourceModuleChange(server, file);
+                    }
                 }
-                else if (graph.isSourceModuleFile(file)) {
-                    hmr.handleSourceModuleChange(server, file);
+                catch (error) {
+                    logger.error('package css change watcher failed');
+                    logger.error(error);
+                    server.ws.send(createWatcherErrorPayload(error, file));
                 }
             });
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auklet",
-  "version": "0.2.10",
+  "version": "0.3.1",
   "type": "module",
   "author": "chentao.arthur",
   "description": "Build utilities for TypeScript packages and module CSS output.",