auklet 0.0.6 → 0.0.8

package/README.md

@@ -21,7 +21,6 @@ Build utilities for TypeScript packages and module CSS output.
 ## Requirements
 
 - Node.js `>=22`
-- pnpm `10.27.0`
 
 ## CLI
 
@@ -38,7 +37,7 @@ pnpm auk dev
 
 Commands:
 
-- `build` removes `dist`, builds JavaScript output, then builds CSS output.
+- `build` removes the configured `output` directory, builds JavaScript output, then builds CSS output.
 - `build-js` runs tsdown with the default auklet tsdown config unless a config flag is passed.
 - `build-css` generates module CSS output.
 - `build-css --watch` watches source/config files and rebuilds CSS.
@@ -85,7 +84,7 @@ export const config: AukletConfig = {
 ### Style Options
 
 - `source`: source directory relative to the package root. Defaults to `src`.
-- `output`: build output directory relative to the package root. Defaults to `dist`.
+- `output`: build output directory relative to the package root. Defaults to `dist`. `auk build` removes this directory before writing JavaScript and CSS output.
 - `styles.themes`: package theme style entries. Defaults to `{}`.
 - `styles.dependencies`: external package style dependencies. Defaults to `{}`.
 
@@ -204,6 +203,12 @@ import '@scope/app/components/Button.css';
 import '@scope/app/themes/light.css';
 ```
 
+In dev mode, workspace package style dependencies keep using auklet virtual CSS
+entries so changes can be tracked recursively. Third-party CSS dependencies are
+resolved from the package that declares the dependency and emitted as Vite
+`/@fs/...` imports, so packages such as `katex/dist/katex.min.css` do not need
+to be installed by the consuming app.
+
 ## Programmatic API
 
 ```ts

package/bin/entry.cjs

@@ -16,12 +16,18 @@ const runVersion = async () => {
   return 0;
 };
 
-const runBuildStyle = async (args) => {
-  const shouldWatch = args.includes('--watch') || args.includes('-w');
+const loadCurrentAukletConfig = async (options) => {
   const { loadAukletConfig } = await import('../dist/configLoader.js');
-  const aukletConfig = await loadAukletConfig(process.cwd(), {
-    cacheBust: shouldWatch,
-  });
+  return loadAukletConfig(process.cwd(), options);
+};
+
+const runBuildStyle = async (args, options = {}) => {
+  const shouldWatch = args.includes('--watch') || args.includes('-w');
+  const aukletConfig =
+    options.aukletConfig ??
+    (await loadCurrentAukletConfig({
+      cacheBust: shouldWatch,
+    }));
 
   if (shouldWatch) {
     const { ModuleStyleWatcher } = await import('../dist/css/watch/watcher.js');
@@ -53,15 +59,16 @@ const runBuildJs = async (args) => {
 };
 
 const runBuild = async (args) => {
-  fs.rmSync(path.join(process.cwd(), 'dist'), {
-    recursive: true,
-    force: true,
-  });
+  const aukletConfig = await loadCurrentAukletConfig();
+  const { cleanAukletOutputByConfig } = await import(
+    '../dist/build/cleanOutput.js'
+  );
+  cleanAukletOutputByConfig(process.cwd(), aukletConfig);
 
   const jsExitCode = await runBuildJs(args);
   if (jsExitCode) return jsExitCode;
 
-  return runBuildStyle([]);
+  return runBuildStyle([], { aukletConfig });
 };
 
 const runDev = async () => {

package/dist/build/cleanOutput.d.ts

@@ -0,0 +1,9 @@
+import type { AukletConfig, LoadAukletConfigOptions } from '#auklet/types';
+export declare function cleanAukletOutputByConfig(
+  packageRoot: string,
+  config?: AukletConfig,
+): void;
+export declare function cleanAukletOutput(
+  packageRoot: string,
+  options?: LoadAukletConfigOptions,
+): Promise<void>;

package/dist/build/cleanOutput.js

@@ -0,0 +1,15 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { normalizeAukletConfig } from '#auklet/config';
+import { loadAukletConfig } from '#auklet/configLoader';
+export function cleanAukletOutputByConfig(packageRoot, config = {}) {
+  const normalizedConfig = normalizeAukletConfig(config);
+  fs.rmSync(path.join(packageRoot, normalizedConfig.output), {
+    recursive: true,
+    force: true,
+  });
+}
+export async function cleanAukletOutput(packageRoot, options = {}) {
+  const rawConfig = await loadAukletConfig(packageRoot, options);
+  cleanAukletOutputByConfig(packageRoot, rawConfig);
+}

package/dist/css/core/style/{plan.d.ts → entries.d.ts}

@@ -1,3 +1,4 @@
+import type { StylePackageContext } from '#auklet/css/core/stylePackageContext';
 import type { NormalizedAukletConfig } from '#auklet/types';
 type StyleModulePart = {
   type: 'module';
@@ -41,14 +42,11 @@ export declare function createThemeEntryParts(
     includeDependencies?: boolean;
   },
 ): (
+  | ThemePart
   | {
       type: 'dependencies';
       specifiers: string[];
     }
-  | {
-      type: 'theme';
-      themeName: string;
-    }
 )[];
 export declare function createExternalEntryParts(
   config: NormalizedAukletConfig,
@@ -56,4 +54,22 @@ export declare function createExternalEntryParts(
   type: 'dependencies';
   specifiers: string[];
 }[];
+export declare function collectModuleStyleImports(
+  packageContext: StylePackageContext,
+): Map<string, string[]>;
+export declare function createComponentStyleEntryPlan(
+  packageContext: StylePackageContext,
+  sourceDir: string,
+): {
+  sourceDir: string;
+  moduleStyleImports: string[];
+  ownStyleFiles: string[];
+};
+export declare function createComponentStyleEntryPlans(
+  packageContext: StylePackageContext,
+): {
+  sourceDir: string;
+  moduleStyleImports: string[];
+  ownStyleFiles: string[];
+}[];
 export {};

package/dist/css/core/style/{plan.js → entries.js}

@@ -4,7 +4,9 @@ import {
   getThemeNames,
   getThemeStyleDependencies,
 } from '#auklet/css/core/style/dependencies';
+import { StyleModuleEntryPlanner } from '#auklet/css/core/styleModuleEntryPlanner';
 const dependenciesPart = (specifiers) => ({ type: 'dependencies', specifiers });
+// 环境无关的 style entry graph。production writer 和 Vite/dev renderer 都从这里取入口语义。
 export function createStyleEntryParts(config) {
   return [
     dependenciesPart(getGlobalStyleDependencies(config)),
@@ -25,3 +27,20 @@ export function createThemeEntryParts(config, themeName, options = {}) {
 export function createExternalEntryParts(config) {
   return [dependenciesPart(getExternalStyleDependencies(config))];
 }
+export function collectModuleStyleImports(packageContext) {
+  return packageContext.importCollector.collect(
+    packageContext.sourceFiles,
+    packageContext.normalizedConfig,
+  );
+}
+export function createComponentStyleEntryPlan(packageContext, sourceDir) {
+  return new StyleModuleEntryPlanner(packageContext).createEntry(
+    sourceDir,
+    collectModuleStyleImports(packageContext),
+  );
+}
+export function createComponentStyleEntryPlans(packageContext) {
+  return new StyleModuleEntryPlanner(packageContext).createEntries(
+    collectModuleStyleImports(packageContext),
+  );
+}

package/dist/css/production/format/entryWriter.js

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { createStyleEntryParts } from '#auklet/css/core/style/plan';
+import { createStyleEntryParts } from '#auklet/css/core/style/entries';
 import { toRelativeImportSpecifier } from '#auklet/css/production/format/shared';
 export class StyleEntryWriter {
   config;

package/dist/css/production/format/externalWriter.js

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { createExternalEntryParts } from '#auklet/css/core/style/plan';
+import { createExternalEntryParts } from '#auklet/css/core/style/entries';
 export class ExternalStyleWriter {
   config;
   packageContext;

package/dist/css/production/format/themeWriter.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { THEMES_DIR } from '#auklet/css/constants';
-import { createThemeEntryParts } from '#auklet/css/core/style/plan';
+import { createThemeEntryParts } from '#auklet/css/core/style/entries';
 import { toRelativeImportSpecifier } from '#auklet/css/production/format/shared';
 export class ThemeStyleWriter {
   config;

package/dist/css/production/moduleOutputWriter.js

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { StyleModuleEntryPlanner } from '#auklet/css/core/styleModuleEntryPlanner';
+import { createComponentStyleEntryPlans } from '#auklet/css/core/style/entries';
 import { ComponentStyleEntryWriter } from '#auklet/css/production/format/componentWriter';
 import { StyleEntryWriter } from '#auklet/css/production/format/entryWriter';
 import { ExternalStyleWriter } from '#auklet/css/production/format/externalWriter';
@@ -40,13 +40,7 @@ export class ModuleStyleOutputWriter {
     return path.join(this.context.packageRoot, this.context.outputDir);
   }
   createComponentEntries() {
-    const moduleStyleImports = this.packageContext.importCollector.collect(
-      this.packageContext.sourceFiles,
-      this.packageContext.normalizedConfig,
-    );
-    return new StyleModuleEntryPlanner(this.packageContext).createEntries(
-      moduleStyleImports,
-    );
+    return createComponentStyleEntryPlans(this.packageContext);
   }
   writeFormat(format, componentEntries) {
     const outRoot = path.join(this.outputRoot, format);

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

@@ -1,5 +1,5 @@
 import type { HotUpdateOptions, ViteDevServer } from 'vite';
-import type { ModuleStyleGraph } from '#auklet/css/core/moduleGraph';
+import type { ModuleStyleGraph } from '#auklet/css/vite/moduleGraph/graph';
 export declare class AukletStyleHmr {
   private readonly graph;
   private readonly lastUpdateTimes;

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

@@ -0,0 +1,13 @@
+import type { PackageStyleContext } from '#auklet/css/vite/moduleGraph/requestCache';
+export declare function toDevDependencyImportSpecifier(
+  context: PackageStyleContext,
+  specifier: string,
+):
+  | {
+      specifier: string;
+      watchFile?: undefined;
+    }
+  | {
+      specifier: string;
+      watchFile: string;
+    };

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

@@ -0,0 +1,12 @@
+import { toFsSpecifier } from '#auklet/utils';
+// 在 Vite 虚拟 CSS 中，第三方 CSS 依赖要用声明它的包作为解析根。
+export function toDevDependencyImportSpecifier(context, specifier) {
+  if (specifier.startsWith('.') || specifier.startsWith('/')) {
+    return { specifier };
+  }
+  const resolved = context.resolver.resolveStyleDependency(specifier);
+  return {
+    specifier: toFsSpecifier(resolved),
+    watchFile: resolved,
+  };
+}

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

@@ -0,0 +1,26 @@
+import type {
+  ModuleStyleGraphOptions,
+  PackageStyleId,
+} from '#auklet/css/vite/moduleGraph/types';
+export declare class ModuleStyleGraph {
+  private readonly config;
+  private readonly workspaceRoot;
+  private readonly packagesDir;
+  private readonly styleCodeFactory;
+  private readonly loadAukletConfig;
+  constructor(options: ModuleStyleGraphOptions);
+  parsePackageStyleId(id: string): {
+    packageName: string;
+    stylePath: string;
+  } | null;
+  isWorkspaceSourceGraphFile(file: string): boolean;
+  isStyleConfigFile(file: string): boolean;
+  isStyleFile(file: string): boolean;
+  getWorkspacePackageNames(): string[];
+  getWatchRoots(): string[];
+  createPackageStyleCode(parsed: PackageStyleId): Promise<{
+    code: string;
+    watchFiles: string[];
+  }>;
+  private createRequestCache;
+}

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

@@ -0,0 +1,73 @@
+import path from 'node:path';
+import { aukletConfigFile } from '#auklet/config';
+import { loadAukletConfig } from '#auklet/configLoader';
+import { moduleStyleBuildConfig } from '#auklet/css/config';
+import { ModuleStyleGraphRequestCache } from '#auklet/css/vite/moduleGraph/requestCache';
+import { StyleCodeFactory } from '#auklet/css/vite/moduleGraph/styleCodeFactory';
+import { parsePackageStyleId } from '#auklet/css/vite/moduleGraph/styleId';
+import { SOURCE_COMPONENT_MODULE_RE } from '#auklet/css/constants';
+import { normalizeFileKey, toWatchPath } from '#auklet/utils';
+// package style graph 的对外门面，负责 workspace 发现、watch 边界和请求分发。
+export class ModuleStyleGraph {
+  config;
+  workspaceRoot;
+  packagesDir;
+  styleCodeFactory;
+  loadAukletConfig;
+  constructor(options) {
+    this.config = options.config ?? moduleStyleBuildConfig;
+    this.workspaceRoot = normalizeFileKey(options.workspaceRoot);
+    this.packagesDir = options.packagesDir ?? 'packages';
+    this.loadAukletConfig = options.loadAukletConfig ?? loadAukletConfig;
+    this.styleCodeFactory = new StyleCodeFactory(this.config);
+  }
+  parsePackageStyleId(id) {
+    return parsePackageStyleId(id, this.getWorkspacePackageNames());
+  }
+  isWorkspaceSourceGraphFile(file) {
+    const normalizedFile = normalizeFileKey(file);
+    const packagesRoot = normalizeFileKey(
+      path.join(this.workspaceRoot, this.packagesDir),
+    );
+    if (!normalizedFile.startsWith(`${packagesRoot}/`)) {
+      return false;
+    }
+    if (normalizedFile.endsWith(aukletConfigFile)) return true;
+    if (SOURCE_COMPONENT_MODULE_RE.test(normalizedFile)) {
+      return true;
+    }
+    return this.config.styleExtensions.some((extension) =>
+      normalizedFile.endsWith(extension),
+    );
+  }
+  isStyleConfigFile(file) {
+    return normalizeFileKey(file).endsWith(aukletConfigFile);
+  }
+  isStyleFile(file) {
+    return this.config.styleExtensions.includes(path.extname(file));
+  }
+  getWorkspacePackageNames() {
+    return this.createRequestCache().getWorkspacePackageNames();
+  }
+  getWatchRoots() {
+    const packagesRoot = path.join(this.workspaceRoot, this.packagesDir);
+    return [
+      toWatchPath(packagesRoot, '*', 'src'),
+      toWatchPath(packagesRoot, '*', aukletConfigFile),
+    ];
+  }
+  createPackageStyleCode(parsed) {
+    return this.styleCodeFactory.createPackageStyleCode(
+      parsed,
+      this.createRequestCache(),
+    );
+  }
+  createRequestCache() {
+    return new ModuleStyleGraphRequestCache({
+      workspaceRoot: this.workspaceRoot,
+      packagesDir: this.packagesDir,
+      config: this.config,
+      loadAukletConfig: this.loadAukletConfig,
+    });
+  }
+}

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

@@ -0,0 +1,7 @@
+import type { PackageStyleLoadResult } from '#auklet/css/vite/moduleGraph/types';
+export declare function mergeLoadResults(
+  ...results: Array<PackageStyleLoadResult>
+): {
+  code: string;
+  watchFiles: string[];
+};

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

@@ -0,0 +1,12 @@
+// 合并递归 style graph 加载结果，同时保留 CSS 顺序并去重 watch files。
+export function mergeLoadResults(...results) {
+  return {
+    code: results
+      .map((result) => result.code)
+      .filter((code) => code.trim())
+      .join('\n'),
+    watchFiles: Array.from(
+      new Set(results.flatMap((result) => result.watchFiles)),
+    ),
+  };
+}

package/dist/css/{core/moduleGraphRequestCache.d.ts → vite/moduleGraph/requestCache.d.ts}

@@ -1,13 +1,15 @@
 import { StylePackageContext } from '#auklet/css/core/stylePackageContext';
 import type {
-  AukletConfig,
   ModuleStyleBuildConfig,
   NormalizedAukletConfig,
   ResolvedModuleStyleBuildContext,
 } from '#auklet/types';
 import type { StyleProcessor } from '#auklet/css/core/styleProcessor';
 import type { WorkspaceStyleResolver } from '#auklet/css/core/workspaceStyleResolver';
-import type { PackageStyleId } from '#auklet/css/core/moduleGraph';
+import type {
+  LoadAukletConfig,
+  PackageStyleId,
+} from '#auklet/css/vite/moduleGraph/types';
 export type PackageStyleContext = {
   normalizedConfig: NormalizedAukletConfig;
   context: ResolvedModuleStyleBuildContext;
@@ -18,12 +20,6 @@ export type PackageStyleContext = {
   sourceRoot: string;
   styleProcessor: StyleProcessor;
 };
-export type LoadAukletConfig = (
-  packageRoot: string,
-  options?: {
-    cacheBust?: boolean;
-  },
-) => Promise<AukletConfig>;
 export type ModuleStyleGraphRequestCacheOptions = {
   workspaceRoot: string;
   packagesDir: string;

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

@@ -0,0 +1,23 @@
+import type { ModuleStyleBuildConfig } from '#auklet/types';
+import type { ModuleStyleGraphRequestCache } from '#auklet/css/vite/moduleGraph/requestCache';
+import type { PackageStyleId } from '#auklet/css/vite/moduleGraph/types';
+export declare class StyleCodeFactory {
+  private readonly config;
+  constructor(config: ModuleStyleBuildConfig);
+  createPackageStyleCode(
+    parsed: PackageStyleId,
+    cache: ModuleStyleGraphRequestCache,
+  ): Promise<{
+    code: string;
+    watchFiles: string[];
+  }>;
+  private createStyleCode;
+  private createDependencyStyleCode;
+  private createExternalStyleCode;
+  private createThemeStyleCode;
+  private createModuleStyleCode;
+  private createSourceModuleStyleCode;
+  private toDevModuleImportSpecifier;
+  private toDevExternalStyleSpecifier;
+  private parsePackageStyleIdInRequest;
+}

package/dist/css/{core/moduleGraph.js → vite/moduleGraph/styleCodeFactory.js}

@@ -1,96 +1,32 @@
 import path from 'node:path';
-import { aukletConfigFile } from '#auklet/config';
-import { loadAukletConfig } from '#auklet/configLoader';
-import { moduleStyleBuildConfig } from '#auklet/css/config';
-import { ModuleStyleGraphRequestCache } from '#auklet/css/core/moduleGraphRequestCache';
-import { StyleModuleEntryPlanner } from '#auklet/css/core/styleModuleEntryPlanner';
+import { mergeLoadResults } from '#auklet/css/vite/moduleGraph/loadResult';
+import { parsePackageStyleId } from '#auklet/css/vite/moduleGraph/styleId';
+import { toDevDependencyImportSpecifier } from '#auklet/css/vite/moduleGraph/devDependency';
 import {
   EXTERNAL_ENTRY,
   MODULE_ENTRY,
-  SOURCE_COMPONENT_MODULE_RE,
   STYLE_ENTRY,
   THEMES_ENTRY_PREFIX,
 } from '#auklet/css/constants';
 import {
+  createComponentStyleEntryPlan,
   createExternalEntryParts,
   createStyleEntryParts,
   createThemeEntryParts,
-} from '#auklet/css/core/style/plan';
+} from '#auklet/css/core/style/entries';
 import {
   createImportCode,
   parsePackageStyleSpecifier,
   removeStyleExtension,
 } from '#auklet/css/core/style/specifier';
-import {
-  normalizeFileKey,
-  toFsSpecifier,
-  toPosixPath,
-  toWatchPath,
-} from '#auklet/utils';
-const mergeLoadResults = (...results) => {
-  return {
-    code: results
-      .map((result) => result.code)
-      .filter((code) => code.trim())
-      .join('\n'),
-    watchFiles: Array.from(
-      new Set(results.flatMap((result) => result.watchFiles)),
-    ),
-  };
-};
-export class ModuleStyleGraph {
+import { toFsSpecifier, toPosixPath } from '#auklet/utils';
+// 生成 Vite/dev 虚拟 CSS；production writer 共享入口语义，但写入真实文件。
+export class StyleCodeFactory {
   config;
-  workspaceRoot;
-  packagesDir;
-  loadAukletConfig;
-  constructor(options) {
-    this.config = options.config ?? moduleStyleBuildConfig;
-    this.workspaceRoot = normalizeFileKey(options.workspaceRoot);
-    this.packagesDir = options.packagesDir ?? 'packages';
-    this.loadAukletConfig = options.loadAukletConfig ?? loadAukletConfig;
-  }
-  parsePackageStyleId(id) {
-    return parsePackageStyleId(id, this.getWorkspacePackageNames());
-  }
-  isWorkspaceSourceGraphFile(file) {
-    const normalizedFile = normalizeFileKey(file);
-    const packagesRoot = normalizeFileKey(
-      path.join(this.workspaceRoot, this.packagesDir),
-    );
-    if (!normalizedFile.startsWith(`${packagesRoot}/`)) {
-      return false;
-    }
-    if (normalizedFile.endsWith(aukletConfigFile)) return true;
-    if (SOURCE_COMPONENT_MODULE_RE.test(normalizedFile)) {
-      return true;
-    }
-    return this.config.styleExtensions.some((extension) =>
-      normalizedFile.endsWith(extension),
-    );
-  }
-  isStyleConfigFile(file) {
-    return normalizeFileKey(file).endsWith(aukletConfigFile);
-  }
-  isStyleFile(file) {
-    return this.config.styleExtensions.includes(path.extname(file));
+  constructor(config) {
+    this.config = config;
   }
-  getWorkspacePackageNames() {
-    return this.createRequestCache().getWorkspacePackageNames();
-  }
-  getWatchRoots() {
-    const packagesRoot = path.join(this.workspaceRoot, this.packagesDir);
-    return [
-      toWatchPath(packagesRoot, '*', 'src'),
-      toWatchPath(packagesRoot, '*', aukletConfigFile),
-    ];
-  }
-  async createPackageStyleCode(parsed) {
-    return this.createPackageStyleCodeWithCache(
-      parsed,
-      this.createRequestCache(),
-    );
-  }
-  async createPackageStyleCodeWithCache(parsed, cache) {
+  async createPackageStyleCode(parsed, cache) {
     const context = await cache.getContext(parsed);
     if (!context) {
       return {
@@ -148,19 +84,27 @@ export class ModuleStyleGraph {
   ) {
     const results = [];
     const imports = [];
+    const watchFiles = [context.configPath];
     for (const specifier of specifiers) {
       const outputSpecifier = mapSpecifier(specifier);
       const parsed = this.parsePackageStyleIdInRequest(outputSpecifier, cache);
       if (parsed) {
-        results.push(await this.createPackageStyleCodeWithCache(parsed, cache));
+        results.push(await this.createPackageStyleCode(parsed, cache));
         continue;
       }
-      imports.push(outputSpecifier);
+      const resolvedSpecifier = toDevDependencyImportSpecifier(
+        context,
+        outputSpecifier,
+      );
+      imports.push(resolvedSpecifier.specifier);
+      if (resolvedSpecifier.watchFile) {
+        watchFiles.push(resolvedSpecifier.watchFile);
+      }
     }
     return mergeLoadResults(
       {
         code: createImportCode(imports),
-        watchFiles: [context.configPath],
+        watchFiles,
       },
       ...results,
     );
@@ -168,16 +112,14 @@ export class ModuleStyleGraph {
   async createExternalStyleCode(context, cache) {
     const results = [];
     for (const part of createExternalEntryParts(context.normalizedConfig)) {
-      if (part.type === 'dependencies') {
-        results.push(
-          await this.createDependencyStyleCode(
-            context,
-            cache,
-            part.specifiers,
-            (specifier) => this.toDevExternalStyleSpecifier(specifier, cache),
-          ),
-        );
-      }
+      results.push(
+        await this.createDependencyStyleCode(
+          context,
+          cache,
+          part.specifiers,
+          (specifier) => this.toDevExternalStyleSpecifier(specifier, cache),
+        ),
+      );
     }
     return mergeLoadResults(...results);
   }
@@ -248,13 +190,10 @@ export class ModuleStyleGraph {
   async createSourceModuleStyleCode(context, cache, stylePath) {
     const sourceModuleDir = removeStyleExtension(stylePath);
     const { styleFiles, sourceFiles } = context.packageContext;
-    const moduleStyleImports = context.packageContext.importCollector.collect(
-      sourceFiles,
-      context.normalizedConfig,
-    );
-    const entry = new StyleModuleEntryPlanner(
+    const entry = createComponentStyleEntryPlan(
       context.packageContext,
-    ).createEntry(sourceModuleDir, moduleStyleImports);
+      sourceModuleDir,
+    );
     const sourceStyleDir = path.join(
       context.sourceRoot,
       sourceModuleDir,
@@ -262,6 +201,7 @@ export class ModuleStyleGraph {
     );
     const moduleStyleResults = [];
     const moduleStyleSpecifiers = [];
+    const moduleStyleWatchFiles = [];
     for (const specifier of entry.moduleStyleImports) {
       const result = this.toDevModuleImportSpecifier(
         context,
@@ -272,11 +212,15 @@ export class ModuleStyleGraph {
       const parsed = this.parsePackageStyleIdInRequest(result, cache);
       if (parsed) {
         moduleStyleResults.push(
-          await this.createPackageStyleCodeWithCache(parsed, cache),
+          await this.createPackageStyleCode(parsed, cache),
         );
         continue;
       }
-      moduleStyleSpecifiers.push(result);
+      const resolvedSpecifier = toDevDependencyImportSpecifier(context, result);
+      moduleStyleSpecifiers.push(resolvedSpecifier.specifier);
+      if (resolvedSpecifier.watchFile) {
+        moduleStyleWatchFiles.push(resolvedSpecifier.watchFile);
+      }
     }
     const root = context.styleProcessor.createRoot();
     const seen = new Set();
@@ -296,6 +240,7 @@ export class ModuleStyleGraph {
       watchFiles: [
         context.configPath,
         ...styleFiles,
+        ...moduleStyleWatchFiles,
         ...sourceFiles.filter((file) => /\.(ts|tsx)$/.test(file)),
       ],
     });
@@ -318,7 +263,7 @@ export class ModuleStyleGraph {
   toDevExternalStyleSpecifier(specifier, cache) {
     const parsed = parsePackageStyleSpecifier(specifier);
     if (!parsed) return specifier;
-    if (this.isWorkspacePackageName(parsed.packageName, cache)) {
+    if (cache.isWorkspacePackageName(parsed.packageName)) {
       if (parsed.stylePath === STYLE_ENTRY) {
         return `${parsed.packageName}/${EXTERNAL_ENTRY}`;
       }
@@ -336,28 +281,4 @@ export class ModuleStyleGraph {
   parsePackageStyleIdInRequest(id, cache) {
     return parsePackageStyleId(id, cache.getWorkspacePackageNames());
   }
-  isWorkspacePackageName(packageName, cache) {
-    return cache.isWorkspacePackageName(packageName);
-  }
-  createRequestCache() {
-    return new ModuleStyleGraphRequestCache({
-      workspaceRoot: this.workspaceRoot,
-      packagesDir: this.packagesDir,
-      config: this.config,
-      loadAukletConfig: this.loadAukletConfig,
-    });
-  }
-}
-export function parsePackageStyleId(id, packageNames) {
-  if (!id.endsWith('.css')) {
-    return null;
-  }
-  const packageName = [...packageNames]
-    .sort((left, right) => right.length - left.length)
-    .find((name) => id.startsWith(`${name}/`));
-  if (!packageName) return null;
-  return {
-    packageName,
-    stylePath: id.slice(packageName.length + 1),
-  };
 }

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

@@ -0,0 +1,7 @@
+export declare function parsePackageStyleId(
+  id: string,
+  packageNames: Array<string>,
+): {
+  packageName: string;
+  stylePath: string;
+} | null;

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

@@ -0,0 +1,14 @@
+// 根据已知 workspace 包名解析 package CSS id，并优先匹配最长包名。
+export function parsePackageStyleId(id, packageNames) {
+  if (!id.endsWith('.css')) {
+    return null;
+  }
+  const packageName = [...packageNames]
+    .sort((left, right) => right.length - left.length)
+    .find((name) => id.startsWith(`${name}/`));
+  if (!packageName) return null;
+  return {
+    packageName,
+    stylePath: id.slice(packageName.length + 1),
+  };
+}

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

@@ -0,0 +1,21 @@
+import type { AukletConfig, ModuleStyleBuildConfig } from '#auklet/types';
+export interface ModuleStyleGraphOptions {
+  workspaceRoot: string;
+  packagesDir?: string;
+  config?: ModuleStyleBuildConfig;
+  loadAukletConfig?: LoadAukletConfig;
+}
+export type PackageStyleId = {
+  packageName: string;
+  stylePath: string;
+};
+export type PackageStyleLoadResult = {
+  code: string;
+  watchFiles: Array<string>;
+};
+export type LoadAukletConfig = (
+  packageRoot: string,
+  options?: {
+    cacheBust?: boolean;
+  },
+) => Promise<AukletConfig>;

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

@@ -1,5 +1,5 @@
 import type { HotUpdateOptions, ViteDevServer } from 'vite';
-import { type ModuleStyleGraphOptions } from '#auklet/css/core/moduleGraph';
+import type { ModuleStyleGraphOptions } from '#auklet/css/vite/moduleGraph/types';
 export type AukletStylePluginOptions = Partial<
   Pick<ModuleStyleGraphOptions, 'workspaceRoot'>
 > &

package/dist/css/vite/vitePlugin.js

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { ModuleStyleGraph } from '#auklet/css/core/moduleGraph';
+import { ModuleStyleGraph } from '#auklet/css/vite/moduleGraph/graph';
 import { AukletStyleHmr } from '#auklet/css/vite/hmr';
 const WORKSPACE_FILE = 'pnpm-workspace.yaml';
 const VIRTUAL_ID_PREFIX = 'virtual:auklet-css:';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auklet",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "author": "chentao.arthur",
   "packageManager": "pnpm@10.27.0",
@@ -53,6 +53,15 @@
     "dist",
     "!dist/__tests__"
   ],
+  "keywords": [
+    "build",
+    "typescript",
+    "css",
+    "vite",
+    "components",
+    "monorepo",
+    "tsdown"
+  ],
   "dependencies": {
     "unrun": "^0.3.0",
     "execa": "^9.1.0",

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

@@ -1,55 +0,0 @@
-import { type LoadAukletConfig } from '#auklet/css/core/moduleGraphRequestCache';
-import type { ModuleStyleBuildConfig } from '#auklet/types';
-export interface ModuleStyleGraphOptions {
-  workspaceRoot: string;
-  packagesDir?: string;
-  config?: ModuleStyleBuildConfig;
-  loadAukletConfig?: LoadAukletConfig;
-}
-export type PackageStyleId = {
-  packageName: string;
-  stylePath: string;
-};
-export type PackageStyleLoadResult = {
-  code: string;
-  watchFiles: Array<string>;
-};
-export declare class ModuleStyleGraph {
-  private readonly config;
-  private readonly workspaceRoot;
-  private readonly packagesDir;
-  private readonly loadAukletConfig;
-  constructor(options: ModuleStyleGraphOptions);
-  parsePackageStyleId(id: string): {
-    packageName: string;
-    stylePath: string;
-  } | null;
-  isWorkspaceSourceGraphFile(file: string): boolean;
-  isStyleConfigFile(file: string): boolean;
-  isStyleFile(file: string): boolean;
-  getWorkspacePackageNames(): string[];
-  getWatchRoots(): string[];
-  createPackageStyleCode(parsed: PackageStyleId): Promise<{
-    code: string;
-    watchFiles: string[];
-  }>;
-  private createPackageStyleCodeWithCache;
-  private createStyleCode;
-  private createDependencyStyleCode;
-  private createExternalStyleCode;
-  private createThemeStyleCode;
-  private createModuleStyleCode;
-  private createSourceModuleStyleCode;
-  private toDevModuleImportSpecifier;
-  private toDevExternalStyleSpecifier;
-  private parsePackageStyleIdInRequest;
-  private isWorkspacePackageName;
-  private createRequestCache;
-}
-export declare function parsePackageStyleId(
-  id: string,
-  packageNames: Array<string>,
-): {
-  packageName: string;
-  stylePath: string;
-} | null;