auklet 0.0.17 → 0.0.18

package/README.md

@@ -15,7 +15,7 @@ Build utilities for TypeScript packages and module CSS output.
 - Generate package-level and module-level CSS entries.
 - Infer component style dependencies from source imports.
 - Generate theme and external style entry files.
-- Provide a Vite dev plugin for virtual package CSS entries.
+- Provide a Vite dev plugin for virtual package CSS entries in single-package and monorepo projects.
 - Watch source/config changes and rebuild module CSS output.
 
 ## Requirements
@@ -215,6 +215,25 @@ export default {
 };
 ```
 
+The plugin defaults to `mode: 'package'`, where Vite root is treated as the
+current package root. This is the expected setup for a single-package component
+library.
+
+For a workspace demo or app that imports CSS from packages under
+`packages/*`, enable monorepo mode:
+
+```ts
+import { aukletStylePlugin } from 'auklet';
+
+export default {
+  plugins: [aukletStylePlugin({ mode: 'monorepo' })],
+};
+```
+
+`mode: 'monorepo'` automatically walks upward from Vite root to find
+`pnpm-workspace.yaml`. A custom graph root can be passed with `root` when the
+workspace root cannot be inferred.
+
 The plugin resolves package CSS ids such as:
 
 ```ts
@@ -229,6 +248,23 @@ 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.
 
+## Examples
+
+The repository includes runnable examples for the supported project shapes:
+
+- `examples/components`: monorepo component packages.
+- `examples/libs`: monorepo TypeScript libraries without CSS output.
+- `examples/single-package`: single-package component library with Vite dev mode.
+- `examples/single-lib`: single-package TypeScript library without CSS output.
+
+Useful commands:
+
+```bash
+pnpm run build:examples
+pnpm run test:examples
+pnpm run dev:examples
+```
+
 ## Programmatic API
 
 ```ts

package/dist/css/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const NODE_MODULES_DIR = "node_modules";
-export declare const SOURCE_COMPONENT_MODULE_RE: RegExp;
+export declare const SOURCE_MODULE_RE: RegExp;
 export declare const THEMES_DIR = "themes";
 export declare const THEMES_ENTRY_PREFIX = "themes/";
 export declare const STYLE_ENTRY = "style.css";

package/dist/css/constants.js

@@ -1,5 +1,5 @@
 export const NODE_MODULES_DIR = 'node_modules';
-export const SOURCE_COMPONENT_MODULE_RE = /\.tsx$/;
+export const SOURCE_MODULE_RE = /\.tsx$/;
 export const THEMES_DIR = 'themes';
 export const THEMES_ENTRY_PREFIX = 'themes/';
 export const STYLE_ENTRY = 'style.css';

package/dist/css/core/style/entries.d.ts

@@ -39,12 +39,12 @@ export declare function createExternalEntryParts(config: NormalizedAukletConfig)
     specifiers: string[];
 }[];
 export declare function collectModuleStyleImports(packageContext: StylePackageContext): Map<string, string[]>;
-export declare function createComponentStyleEntryPlan(packageContext: StylePackageContext, sourceDir: string): {
+export declare function createModuleStyleEntryPlan(packageContext: StylePackageContext, sourceDir: string): {
     sourceDir: string;
     moduleStyleImports: string[];
     ownStyleFiles: string[];
 };
-export declare function createComponentStyleEntryPlans(packageContext: StylePackageContext): {
+export declare function createModuleStyleEntryPlans(packageContext: StylePackageContext): {
     sourceDir: string;
     moduleStyleImports: string[];
     ownStyleFiles: string[];

package/dist/css/core/style/entries.js

@@ -27,9 +27,9 @@ export function createExternalEntryParts(config) {
 export function collectModuleStyleImports(packageContext) {
     return packageContext.importCollector.collect(packageContext.sourceFiles, packageContext.normalizedConfig);
 }
-export function createComponentStyleEntryPlan(packageContext, sourceDir) {
+export function createModuleStyleEntryPlan(packageContext, sourceDir) {
     return new StyleModuleEntryPlanner(packageContext).createEntry(sourceDir, collectModuleStyleImports(packageContext));
 }
-export function createComponentStyleEntryPlans(packageContext) {
+export function createModuleStyleEntryPlans(packageContext) {
     return new StyleModuleEntryPlanner(packageContext).createEntries(collectModuleStyleImports(packageContext));
 }

package/dist/css/core/style/specifier.d.ts

@@ -9,3 +9,39 @@ export declare function parsePackageStyleSpecifier(specifier: string): {
 export declare function joinDependencySpecifier(packageName: string, dependencyPath: string): string;
 export declare function createImportCode(specifiers: Array<string>): string;
 export declare function removeStyleExtension(stylePath: string): string;
+export declare function toRelativeImportSpecifier(fromDir: string, file: string): string;
+export declare function getStylePathOutputFormat(stylePath: string, outputFormats: Array<string>): {
+    format: string;
+    path: string;
+} | null;
+export declare function createOutputStyleSpecifier(specifier: string, options: {
+    currentOutputFormat: string;
+    outputFormats: Array<string>;
+}): string;
+export declare function createExternalStyleSpecifier(specifier: string, options: {
+    currentOutputFormat: string;
+    outputFormats: Array<string>;
+    styleDir: string;
+    indexStyleFile: string;
+    externalStyleFile: string;
+}): string;
+export declare function createDevExternalStyleSpecifier(specifier: string, options: {
+    isKnownPackageName: (packageName: string) => boolean;
+    styleDir: string;
+    indexStyleFile: string;
+    externalStyleFile?: string;
+}): string;
+export declare function createOutputModuleStyleSpecifier(specifier: string, styleDir: string): string;
+export declare function createOutputOwnStyleSpecifier(options: {
+    sourceRoot: string;
+    outputRoot: string;
+    styleDir: string;
+}, styleFile: string): string;
+export declare function createDevModuleStyleSpecifier(specifier: string, options: {
+    sourceStyleDir: string;
+    sourceRoot: string;
+    packageName: string;
+    styleDir: string;
+    indexStyleFile: string;
+    mapExternalSpecifier: (specifier: string) => string;
+}): string;

package/dist/css/core/style/specifier.js

@@ -1,4 +1,6 @@
 import path from 'node:path';
+import { EXTERNAL_ENTRY, STYLE_ENTRY } from '#auklet/css/constants';
+import { POSIX_SEPARATOR, toFsSpecifier, toPosixPath } from '#auklet/utils';
 export function parsePackageStyleSpecifier(specifier) {
     if (specifier.startsWith('.'))
         return null;
@@ -28,3 +30,87 @@ export function createImportCode(specifiers) {
 export function removeStyleExtension(stylePath) {
     return stylePath.slice(0, -path.extname(stylePath).length);
 }
+export function toRelativeImportSpecifier(fromDir, file) {
+    const relative = toPosixPath(path.relative(fromDir, file));
+    return relative.startsWith('.') ? relative : `./${relative}`;
+}
+export function getStylePathOutputFormat(stylePath, outputFormats) {
+    for (const format of outputFormats) {
+        const prefix = `${format}${POSIX_SEPARATOR}`;
+        if (!stylePath.startsWith(prefix))
+            continue;
+        return {
+            format,
+            path: stylePath.slice(prefix.length),
+        };
+    }
+    return null;
+}
+export function createOutputStyleSpecifier(specifier, options) {
+    const parsed = parsePackageStyleSpecifier(specifier);
+    if (!parsed)
+        return specifier;
+    const outputFormat = getStylePathOutputFormat(parsed.stylePath, options.outputFormats);
+    if (!outputFormat)
+        return specifier;
+    return [
+        parsed.packageName,
+        options.currentOutputFormat,
+        outputFormat.path,
+    ].join(POSIX_SEPARATOR);
+}
+export function createExternalStyleSpecifier(specifier, options) {
+    const parsed = parsePackageStyleSpecifier(specifier);
+    if (!parsed)
+        return specifier;
+    if (parsed.stylePath === STYLE_ENTRY) {
+        return [parsed.packageName, options.externalStyleFile].join(POSIX_SEPARATOR);
+    }
+    const outputFormat = getStylePathOutputFormat(parsed.stylePath, options.outputFormats);
+    const indexStylePath = [options.styleDir, options.indexStyleFile].join(POSIX_SEPARATOR);
+    if (!outputFormat || outputFormat.path !== indexStylePath)
+        return specifier;
+    return [
+        parsed.packageName,
+        options.currentOutputFormat,
+        options.styleDir,
+        options.externalStyleFile,
+    ].join(POSIX_SEPARATOR);
+}
+export function createDevExternalStyleSpecifier(specifier, options) {
+    const parsed = parsePackageStyleSpecifier(specifier);
+    if (!parsed)
+        return specifier;
+    if (!options.isKnownPackageName(parsed.packageName))
+        return specifier;
+    const indexStylePath = [options.styleDir, options.indexStyleFile].join(POSIX_SEPARATOR);
+    if (parsed.stylePath === STYLE_ENTRY || parsed.stylePath === indexStylePath) {
+        return [
+            parsed.packageName,
+            options.externalStyleFile ?? EXTERNAL_ENTRY,
+        ].join(POSIX_SEPARATOR);
+    }
+    return specifier;
+}
+export function createOutputModuleStyleSpecifier(specifier, styleDir) {
+    if (specifier.startsWith('.'))
+        return specifier;
+    if (!path.isAbsolute(specifier))
+        return specifier;
+    return toRelativeImportSpecifier(styleDir, specifier);
+}
+export function createOutputOwnStyleSpecifier(options, styleFile) {
+    return toRelativeImportSpecifier(options.styleDir, path.join(options.outputRoot, path.relative(options.sourceRoot, styleFile)));
+}
+export function createDevModuleStyleSpecifier(specifier, options) {
+    if (!specifier.startsWith('.')) {
+        return options.mapExternalSpecifier(specifier);
+    }
+    const outputStyleEntry = path.resolve(options.sourceStyleDir, specifier);
+    const styleEntrySuffix = `${path.sep}${options.styleDir}${path.sep}${options.indexStyleFile}`;
+    if (!outputStyleEntry.endsWith(styleEntrySuffix)) {
+        return toFsSpecifier(outputStyleEntry);
+    }
+    const sourceModuleDir = path.relative(options.sourceRoot, outputStyleEntry.slice(0, -styleEntrySuffix.length));
+    return `${options.packageName}/${toPosixPath(sourceModuleDir)}.css`;
+}

package/dist/css/core/styleImports/autoImportRules.d.ts

@@ -0,0 +1,13 @@
+import type { NormalizedAukletConfig } from '#auklet/types';
+export type StyleAutoImportRule = {
+    packageName: string;
+    outputPattern: string;
+};
+export type StyleAutoImportRuleMatch = {
+    rule: StyleAutoImportRule;
+    values: Array<string>;
+};
+export declare function createStyleAutoImportRules(config: NormalizedAukletConfig): StyleAutoImportRule[];
+export declare function matchStyleAutoImportRules(rules: Array<StyleAutoImportRule>, importPath: string): StyleAutoImportRuleMatch[];
+export declare function createStyleAutoImportSpecifier(rule: StyleAutoImportRule, values: Array<string>, importedName: string): string;
+export declare function createDirectStyleAutoImportSpecifier(rule: StyleAutoImportRule, importPath: string): string | null;

package/dist/css/core/styleImports/autoImportRules.js

@@ -0,0 +1,68 @@
+import { isArray } from 'aidly';
+import { joinDependencySpecifier } from '#auklet/css/core/style/specifier';
+import { POSIX_SEPARATOR } from '#auklet/utils';
+const GLOBSTAR_TOKEN = '**';
+export function createStyleAutoImportRules(config) {
+    const rules = [];
+    for (const [packageName, dependency] of Object.entries(config.styles.dependencies)) {
+        const dependencyPaths = isArray(dependency.components)
+            ? dependency.components
+            : dependency.components
+                ? [dependency.components]
+                : [];
+        for (const dependencyPath of dependencyPaths) {
+            rules.push({
+                packageName,
+                outputPattern: joinDependencySpecifier(packageName, dependencyPath),
+            });
+        }
+    }
+    return rules;
+}
+export function matchStyleAutoImportRules(rules, importPath) {
+    const matches = [];
+    for (const rule of rules) {
+        if (importPath !== rule.packageName &&
+            !importPath.startsWith(`${rule.packageName}${POSIX_SEPARATOR}`)) {
+            continue;
+        }
+        matches.push({
+            rule,
+            values: getImportPathValues(rule.packageName, importPath),
+        });
+    }
+    return matches;
+}
+export function createStyleAutoImportSpecifier(rule, values, importedName) {
+    const pathValues = [...values];
+    return rule.outputPattern.replace(/\*\*|\*/g, (token) => {
+        const matchedValue = pathValues.shift();
+        if (matchedValue)
+            return matchedValue;
+        if (token === GLOBSTAR_TOKEN)
+            return importedName;
+        return matchedValue ?? importedName;
+    });
+}
+export function createDirectStyleAutoImportSpecifier(rule, importPath) {
+    const wildcardIndex = rule.outputPattern.indexOf('*');
+    if (wildcardIndex < 0) {
+        return null;
+    }
+    const wildcardLength = rule.outputPattern.startsWith(GLOBSTAR_TOKEN, wildcardIndex)
+        ? GLOBSTAR_TOKEN.length
+        : 1;
+    const prefix = rule.outputPattern.slice(0, wildcardIndex);
+    const suffix = rule.outputPattern.slice(wildcardIndex + wildcardLength);
+    if (!importPath.startsWith(prefix)) {
+        return null;
+    }
+    return `${importPath}${suffix}`;
+}
+const getImportPathValues = (packageName, importPath) => {
+    return importPath
+        .slice(packageName.length)
+        .replace(new RegExp(`^${POSIX_SEPARATOR}`), '')
+        .split(POSIX_SEPARATOR)
+        .filter(Boolean);
+};

package/dist/css/core/styleImports/collector.d.ts

@@ -13,9 +13,4 @@ export declare class ModuleStyleImportCollector {
     private resolveSourceImportPaths;
     private toSourceBase;
     private toRelativeSpecifier;
-    private createAutoImportRules;
-    private matchAutoImportRules;
-    private getImportPathValues;
-    private createStyleSpecifier;
-    private createDirectStyleSpecifier;
 }

package/dist/css/core/styleImports/collector.js

@@ -1,14 +1,12 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { isArray } from 'aidly';
-import { SOURCE_COMPONENT_MODULE_RE } from '#auklet/css/constants';
-import { joinDependencySpecifier } from '#auklet/css/core/style/specifier';
-import { appendUniqueMapValue, getSourceModuleDir, POSIX_SEPARATOR, } from '#auklet/utils';
-import { collectModuleStyleSourceReferences, getSourceReferenceImportedNames, isTypeOnlySourceReference, } from '#auklet/css/core/styleImports/sourceReference';
+import { SOURCE_MODULE_RE } from '#auklet/css/constants';
+import { appendUniqueMapValue, getSourceModuleDir } from '#auklet/utils';
+import { isTypeOnlyModuleReference, collectModuleImportReferences, getModuleReferenceImportedNames, } from '#auklet/css/core/styleImports/sourceImportExportAnalyzer';
 import { resolveRelativeSourceImport } from '#auklet/css/core/resolvers/relative';
 import { resolvePackageImportsSourceImport } from '#auklet/css/core/resolvers/packageImports';
 import { resolveTsconfigPathsSourceImport } from '#auklet/css/core/resolvers/tsconfigPaths';
-const GLOBSTAR_TOKEN = '**';
+import { matchStyleAutoImportRules, createStyleAutoImportRules, createStyleAutoImportSpecifier, createDirectStyleAutoImportSpecifier, } from '#auklet/css/core/styleImports/autoImportRules';
 const SOURCE_EXTENSION_RE = /\.(?:[cm]?[jt]s|[jt]sx)$/;
 const SOURCE_INDEX_RE = new RegExp(`[/\\\\]index${SOURCE_EXTENSION_RE.source}`);
 export class ModuleStyleImportCollector {
@@ -24,26 +22,26 @@ export class ModuleStyleImportCollector {
     }
     collect(files, config) {
         const entries = new Map();
-        const rules = this.createAutoImportRules(config);
+        const rules = createStyleAutoImportRules(config);
         for (const file of files) {
-            if (!SOURCE_COMPONENT_MODULE_RE.test(file)) {
+            if (!SOURCE_MODULE_RE.test(file)) {
                 continue;
             }
             const sourceRelative = path.relative(this.srcRoot, file);
             const sourceDir = path.dirname(sourceRelative);
             const sourceModuleDir = getSourceModuleDir(sourceRelative);
             const code = fs.readFileSync(file, 'utf8');
-            const imports = collectModuleStyleSourceReferences(file, code);
+            const imports = collectModuleImportReferences(file, code);
             for (const item of imports) {
                 this.collectSourceImportStyle(entries, sourceDir, sourceModuleDir, item);
-                if (isTypeOnlySourceReference(item))
+                if (isTypeOnlyModuleReference(item))
                     continue;
                 const importPath = item.importPath;
-                const ruleMatches = this.matchAutoImportRules(rules, importPath);
+                const ruleMatches = matchStyleAutoImportRules(rules, importPath);
                 if (!ruleMatches.length)
                     continue;
                 const directSpecifiers = ruleMatches.flatMap((ruleMatch) => {
-                    const specifier = this.createDirectStyleSpecifier(ruleMatch.rule, importPath);
+                    const specifier = createDirectStyleAutoImportSpecifier(ruleMatch.rule, importPath);
                     return specifier ? [specifier] : [];
                 });
                 if (directSpecifiers.length) {
@@ -56,9 +54,9 @@ export class ModuleStyleImportCollector {
                     continue;
                 }
                 for (const ruleMatch of ruleMatches) {
-                    const importedNames = getSourceReferenceImportedNames(file, item);
+                    const importedNames = getModuleReferenceImportedNames(file, item);
                     for (const importedName of importedNames) {
-                        const specifier = this.createStyleSpecifier(ruleMatch.rule, ruleMatch.values, importedName);
+                        const specifier = createStyleAutoImportSpecifier(ruleMatch.rule, ruleMatch.values, importedName);
                         const cssFile = this.resolver.resolveStyleDependency(specifier);
                         if (!fs.existsSync(cssFile)) {
                             continue;
@@ -71,7 +69,7 @@ export class ModuleStyleImportCollector {
         return entries;
     }
     collectSourceImportStyle(entries, sourceDir, sourceModuleDir, item) {
-        if (isTypeOnlySourceReference(item))
+        if (isTypeOnlyModuleReference(item))
             return;
         const importedStyleEntry = this.resolveSourceImportStyleEntry(sourceDir, item.importPath);
         if (!importedStyleEntry)
@@ -119,68 +117,4 @@ export class ModuleStyleImportCollector {
         const relative = path.relative(fromDir, file).split(path.sep).join('/');
         return relative.startsWith('.') ? relative : `./${relative}`;
     }
-    createAutoImportRules(config) {
-        const rules = [];
-        for (const [packageName, dependency] of Object.entries(config.styles.dependencies)) {
-            const dependencyPaths = isArray(dependency.components)
-                ? dependency.components
-                : dependency.components
-                    ? [dependency.components]
-                    : [];
-            for (const dependencyPath of dependencyPaths) {
-                rules.push({
-                    packageName,
-                    outputPattern: joinDependencySpecifier(packageName, dependencyPath),
-                });
-            }
-        }
-        return rules;
-    }
-    matchAutoImportRules(rules, importPath) {
-        const matches = [];
-        for (const rule of rules) {
-            if (importPath !== rule.packageName &&
-                !importPath.startsWith(`${rule.packageName}${POSIX_SEPARATOR}`)) {
-                continue;
-            }
-            matches.push({
-                rule,
-                values: this.getImportPathValues(rule.packageName, importPath),
-            });
-        }
-        return matches;
-    }
-    getImportPathValues(packageName, importPath) {
-        return importPath
-            .slice(packageName.length)
-            .replace(new RegExp(`^${POSIX_SEPARATOR}`), '')
-            .split(POSIX_SEPARATOR)
-            .filter(Boolean);
-    }
-    createStyleSpecifier(rule, values, importedName) {
-        const pathValues = [...values];
-        return rule.outputPattern.replace(/\*\*|\*/g, (token) => {
-            const matchedValue = pathValues.shift();
-            if (matchedValue)
-                return matchedValue;
-            if (token === GLOBSTAR_TOKEN)
-                return importedName;
-            return matchedValue ?? importedName;
-        });
-    }
-    createDirectStyleSpecifier(rule, importPath) {
-        const wildcardIndex = rule.outputPattern.indexOf('*');
-        if (wildcardIndex < 0) {
-            return null;
-        }
-        const wildcardLength = rule.outputPattern.startsWith(GLOBSTAR_TOKEN, wildcardIndex)
-            ? GLOBSTAR_TOKEN.length
-            : 1;
-        const prefix = rule.outputPattern.slice(0, wildcardIndex);
-        const suffix = rule.outputPattern.slice(wildcardIndex + wildcardLength);
-        if (!importPath.startsWith(prefix)) {
-            return null;
-        }
-        return `${importPath}${suffix}`;
-    }
 }

package/dist/css/core/styleImports/sourceImportExportAnalyzer.d.ts

@@ -0,0 +1,11 @@
+import ts from 'typescript';
+export type ModuleImportReference = {
+    importPath: string;
+    importClause?: ts.ImportClause;
+    importedNames?: Array<string>;
+    isTypeOnly?: boolean;
+    hasNamespaceImport?: boolean;
+};
+export declare function collectModuleImportReferences(file: string, code: string): ModuleImportReference[];
+export declare function isTypeOnlyModuleReference(item: ModuleImportReference): boolean | undefined;
+export declare function getModuleReferenceImportedNames(file: string, item: ModuleImportReference): string[];

package/dist/css/core/styleImports/{sourceReference.js → sourceImportExportAnalyzer.js}

@@ -1,5 +1,5 @@
 import ts from 'typescript';
-export function collectModuleStyleSourceReferences(file, code) {
+export function collectModuleImportReferences(file, code) {
     const imports = [];
     const importBindings = new Map();
     const localDeclarations = new Set();
@@ -27,10 +27,10 @@ export function collectModuleStyleSourceReferences(file, code) {
     });
     return imports;
 }
-export function isTypeOnlySourceReference(item) {
+export function isTypeOnlyModuleReference(item) {
     return isTypeOnlyImportClause(item.importClause) || item.isTypeOnly;
 }
-export function getSourceReferenceImportedNames(file, item) {
+export function getModuleReferenceImportedNames(file, item) {
     if (item.importedNames) {
         if (item.isTypeOnly)
             return [];

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

@@ -6,8 +6,8 @@ export type ModuleStyleEntryPlan = {
 };
 export declare class StyleModuleEntryPlanner {
     private readonly packageContext;
-    private readonly styleFilesByDir;
     private readonly importedStyleFiles;
+    private readonly styleFilesByDir;
     constructor(packageContext: StylePackageContext);
     createEntries(moduleStyleImports: Map<string, Array<string>>): {
         sourceDir: string;

package/dist/css/core/styleModuleEntryPlanner.js

@@ -1,11 +1,11 @@
 import path from 'node:path';
-import { SOURCE_COMPONENT_MODULE_RE } from '#auklet/css/constants';
+import { SOURCE_MODULE_RE } from '#auklet/css/constants';
 import { groupStyleFilesByDir } from '#auklet/css/core/style/files';
 import { getSourceModuleDir, toPosixPath } from '#auklet/utils';
 export class StyleModuleEntryPlanner {
     packageContext;
-    styleFilesByDir;
     importedStyleFiles;
+    styleFilesByDir;
     constructor(packageContext) {
         this.packageContext = packageContext;
         this.styleFilesByDir = groupStyleFilesByDir(this.packageContext.sourceRoot, this.packageContext.styleFiles);
@@ -31,7 +31,7 @@ export class StyleModuleEntryPlanner {
     }
     getSourceModuleDirs() {
         return this.packageContext.sourceFiles
-            .filter((sourceFile) => SOURCE_COMPONENT_MODULE_RE.test(sourceFile))
+            .filter((sourceFile) => SOURCE_MODULE_RE.test(sourceFile))
             .map((sourceFile) => {
             return getSourceModuleDir(path.relative(this.packageContext.sourceRoot, sourceFile));
         })

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

@@ -7,5 +7,4 @@ export declare class WorkspaceStyleResolver {
     resolveStyleDependency(specifier: string, fromDir?: string): string;
     toOutputStyleSpecifier(specifier: string, outRoot: string): string;
     toExternalStyleSpecifier(specifier: string, outRoot: string): string;
-    private getStylePathOutputFormat;
 }

package/dist/css/core/workspaceStyleResolver.js

@@ -1,8 +1,7 @@
 import path from 'node:path';
 import { createRequire } from 'node:module';
-import { NODE_MODULES_DIR, STYLE_ENTRY } from '#auklet/css/constants';
-import { POSIX_SEPARATOR } from '#auklet/utils';
-import { parsePackageStyleSpecifier } from '#auklet/css/core/style/specifier';
+import { NODE_MODULES_DIR } from '#auklet/css/constants';
+import { createExternalStyleSpecifier, createOutputStyleSpecifier, } from '#auklet/css/core/style/specifier';
 export class WorkspaceStyleResolver {
     config;
     context;
@@ -26,49 +25,18 @@ export class WorkspaceStyleResolver {
         }
     }
     toOutputStyleSpecifier(specifier, outRoot) {
-        const parsed = parsePackageStyleSpecifier(specifier);
-        if (!parsed)
-            return specifier;
-        const { packageName, stylePath } = parsed;
-        const currentOutputFormat = path.basename(outRoot);
-        const outputFormat = this.getStylePathOutputFormat(stylePath);
-        if (outputFormat) {
-            return [packageName, currentOutputFormat, outputFormat.path].join(POSIX_SEPARATOR);
-        }
-        return specifier;
+        return createOutputStyleSpecifier(specifier, {
+            currentOutputFormat: path.basename(outRoot),
+            outputFormats: this.config.output.outputFormats,
+        });
     }
     toExternalStyleSpecifier(specifier, outRoot) {
-        const parsed = parsePackageStyleSpecifier(specifier);
-        if (!parsed)
-            return specifier;
-        const { packageName, stylePath } = parsed;
-        const currentOutputFormat = path.basename(outRoot);
-        const outputFormat = this.getStylePathOutputFormat(stylePath);
-        if (stylePath === STYLE_ENTRY) {
-            return [packageName, this.config.output.externalStyleFile].join(POSIX_SEPARATOR);
-        }
-        if (outputFormat &&
-            outputFormat.path ===
-                [this.config.output.styleDir, this.config.output.indexStyleFile].join(POSIX_SEPARATOR)) {
-            return [
-                packageName,
-                currentOutputFormat,
-                this.config.output.styleDir,
-                this.config.output.externalStyleFile,
-            ].join(POSIX_SEPARATOR);
-        }
-        return specifier;
-    }
-    getStylePathOutputFormat(stylePath) {
-        for (const format of this.config.output.outputFormats) {
-            const prefix = `${format}${POSIX_SEPARATOR}`;
-            if (!stylePath.startsWith(prefix))
-                continue;
-            return {
-                format,
-                path: stylePath.slice(prefix.length),
-            };
-        }
-        return null;
+        return createExternalStyleSpecifier(specifier, {
+            currentOutputFormat: path.basename(outRoot),
+            outputFormats: this.config.output.outputFormats,
+            styleDir: this.config.output.styleDir,
+            indexStyleFile: this.config.output.indexStyleFile,
+            externalStyleFile: this.config.output.externalStyleFile,
+        });
     }
 }

package/dist/css/production/format/{componentWriter.d.ts → moduleEntryWriter.d.ts}

@@ -1,6 +1,6 @@
 import type { ModuleStyleEntryPlan } from '#auklet/css/core/styleModuleEntryPlanner';
 import { type FormatWriterOptions } from '#auklet/css/production/format/shared';
-export declare class ComponentStyleEntryWriter {
+export declare class ModuleStyleEntryWriter {
     private readonly config;
     private readonly sourceRoot;
     private readonly resolver;

package/dist/css/production/format/{componentWriter.js → moduleEntryWriter.js}

@@ -1,7 +1,7 @@
 import path from 'node:path';
+import { createOutputModuleStyleSpecifier, createOutputOwnStyleSpecifier, } from '#auklet/css/core/style/specifier';
 import { writeStyleFile, } from '#auklet/css/production/format/shared';
-import { toPosixPath } from '#auklet/utils';
-export class ComponentStyleEntryWriter {
+export class ModuleStyleEntryWriter {
     config;
     sourceRoot;
     resolver;
@@ -36,15 +36,13 @@ export class ComponentStyleEntryWriter {
         return outputs;
     }
     getModuleStyleSpecifiers(specifiers, styleDir) {
-        return specifiers.map((specifier) => {
-            if (specifier.startsWith('.'))
-                return specifier;
-            if (!path.isAbsolute(specifier))
-                return specifier;
-            return toPosixPath(path.relative(styleDir, specifier));
-        });
+        return specifiers.map((specifier) => createOutputModuleStyleSpecifier(specifier, styleDir));
     }
     getOwnStyleSpecifiers(ownStyleFiles, styleDir, outRoot) {
-        return ownStyleFiles.map((styleFile) => toPosixPath(path.relative(styleDir, path.join(outRoot, path.relative(this.sourceRoot, styleFile)))));
+        return ownStyleFiles.map((styleFile) => createOutputOwnStyleSpecifier({
+            sourceRoot: this.sourceRoot,
+            outputRoot: outRoot,
+            styleDir,
+        }, styleFile));
     }
 }

package/dist/css/production/format/shared.d.ts

@@ -1,4 +1,5 @@
 import type { StylePackageContext } from '#auklet/css/core/stylePackageContext';
+export { toRelativeImportSpecifier } from '#auklet/css/core/style/specifier';
 import type { ModuleStyleBuildConfig, ResolvedModuleStyleBuildContext } from '#auklet/types';
 export declare const emptyStyleFileComment = "/* Empty style file kept so automated tooling can resolve this CSS path. */\n";
 export type FormatWriterOptions = {
@@ -10,5 +11,4 @@ export type ThemeStyleOutput = {
     themeName: string;
     file: string;
 };
-export declare function toRelativeImportSpecifier(fromDir: string, file: string): string;
 export declare function writeStyleFile(file: string, code: string): void;

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

@@ -1,11 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { toPosixPath } from '#auklet/utils';
+export { toRelativeImportSpecifier } from '#auklet/css/core/style/specifier';
 export const emptyStyleFileComment = '/* Empty style file kept so automated tooling can resolve this CSS path. */\n';
-export function toRelativeImportSpecifier(fromDir, file) {
-    const relative = toPosixPath(path.relative(fromDir, file));
-    return relative.startsWith('.') ? relative : `./${relative}`;
-}
 export function writeStyleFile(file, code) {
     fs.mkdirSync(path.dirname(file), { recursive: true });
     fs.writeFileSync(file, code.trim() ? code : emptyStyleFileComment);

package/dist/css/production/moduleOutputWriter.d.ts

@@ -14,10 +14,10 @@ export declare class ModuleStyleOutputWriter {
     private readonly externalWriter;
     private readonly moduleWriter;
     private readonly entryWriter;
-    private readonly componentWriter;
+    private readonly moduleEntryWriter;
     constructor(options: ModuleStyleOutputWriterOptions);
     write(): string[];
     private get outputRoot();
-    private createComponentEntries;
+    private createModuleEntries;
     private writeFormat;
 }

package/dist/css/production/moduleOutputWriter.js

@@ -1,6 +1,6 @@
 import path from 'node:path';
-import { createComponentStyleEntryPlans } from '#auklet/css/core/style/entries';
-import { ComponentStyleEntryWriter } from '#auklet/css/production/format/componentWriter';
+import { createModuleStyleEntryPlans } from '#auklet/css/core/style/entries';
+import { ModuleStyleEntryWriter } from '#auklet/css/production/format/moduleEntryWriter';
 import { StyleEntryWriter } from '#auklet/css/production/format/entryWriter';
 import { ExternalStyleWriter } from '#auklet/css/production/format/externalWriter';
 import { ModuleStyleWriter } from '#auklet/css/production/format/moduleWriter';
@@ -16,7 +16,7 @@ export class ModuleStyleOutputWriter {
     externalWriter;
     moduleWriter;
     entryWriter;
-    componentWriter;
+    moduleEntryWriter;
     constructor(options) {
         this.config = options.config;
         this.context = options.context;
@@ -26,23 +26,23 @@ export class ModuleStyleOutputWriter {
         this.externalWriter = new ExternalStyleWriter(options);
         this.moduleWriter = new ModuleStyleWriter(options);
         this.entryWriter = new StyleEntryWriter(options);
-        this.componentWriter = new ComponentStyleEntryWriter(options);
+        this.moduleEntryWriter = new ModuleStyleEntryWriter(options);
     }
     write() {
-        const componentEntries = this.createComponentEntries();
+        const moduleEntries = this.createModuleEntries();
         const outputs = [];
         for (const format of this.config.output.outputFormats) {
-            outputs.push(...this.writeFormat(format, componentEntries));
+            outputs.push(...this.writeFormat(format, moduleEntries));
         }
         return outputs;
     }
     get outputRoot() {
         return path.join(this.context.packageRoot, this.context.outputDir);
     }
-    createComponentEntries() {
-        return createComponentStyleEntryPlans(this.packageContext);
+    createModuleEntries() {
+        return createModuleStyleEntryPlans(this.packageContext);
     }
-    writeFormat(format, componentEntries) {
+    writeFormat(format, moduleEntries) {
         const outRoot = path.join(this.outputRoot, format);
         const outputs = [];
         this.themeWriter.clean(outRoot);
@@ -53,7 +53,7 @@ export class ModuleStyleOutputWriter {
         const externalStyle = this.externalWriter.write(outRoot);
         const moduleStyle = this.moduleWriter.write(outRoot);
         const entryStyle = this.entryWriter.write(outRoot, themeStyleMap, moduleStyle);
-        const componentStyles = this.componentWriter.write(outRoot, componentEntries);
+        const moduleStyleEntries = this.moduleEntryWriter.write(outRoot, moduleEntries);
         outputs.push(...themeStyles.map((themeStyle) => themeStyle.file));
         outputs.push(...themeEntries);
         if (externalStyle)
@@ -62,7 +62,7 @@ export class ModuleStyleOutputWriter {
             outputs.push(moduleStyle);
         if (entryStyle)
             outputs.push(entryStyle);
-        outputs.push(...componentStyles);
+        outputs.push(...moduleStyleEntries);
         return outputs;
     }
 }

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

@@ -13,7 +13,7 @@ export declare class ModuleStyleGraph {
     isStyleConfigFile(file: string): boolean;
     isStyleFile(file: string): boolean;
     getPackageNames(): string[];
-    getWatchRoots(): string[];
+    getWatchRoots(): Promise<string[]>;
     createPackageStyleCode(parsed: PackageStyleId): Promise<{
         code: string;
         watchFiles: string[];

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

@@ -5,7 +5,8 @@ import { moduleStyleBuildConfig } from '#auklet/css/config';
 import { parsePackageStyleId } from '#auklet/css/vite/moduleGraph/styleId';
 import { StyleCodeFactory } from '#auklet/css/vite/moduleGraph/styleCodeFactory';
 import { ModuleStyleGraphRequestCache } from '#auklet/css/vite/moduleGraph/requestCache';
-import { createMonorepoPackageSource } from '#auklet/css/vite/moduleGraph/packageSource/monorepo';
+import { MonorepoPackageSource } from '#auklet/css/vite/moduleGraph/packageSource/monorepo';
+import { SinglePackageSource } from '#auklet/css/vite/moduleGraph/packageSource/singlePackage';
 import { normalizeFileKey } from '#auklet/utils';
 // package style graph 的对外门面，负责 package source、watch 边界和请求分发。
 export class ModuleStyleGraph {
@@ -15,17 +16,20 @@ export class ModuleStyleGraph {
     loadAukletConfig;
     constructor(options) {
         this.config = options.config ?? moduleStyleBuildConfig;
-        const mode = options.mode ?? 'monorepo';
-        if (mode === 'package') {
-            throw new Error('[auklet:css] package mode is not supported yet.');
-        }
-        this.packageSource = createMonorepoPackageSource({
-            workspaceRoot: normalizeFileKey(options.workspaceRoot),
-            packagesDir: options.packagesDir ?? 'packages',
-            styleExtensions: this.config.styleExtensions,
-        });
-        this.loadAukletConfig = options.loadAukletConfig ?? loadAukletConfig;
         this.styleCodeFactory = new StyleCodeFactory(this.config);
+        this.loadAukletConfig = options.loadAukletConfig ?? loadAukletConfig;
+        this.packageSource =
+            (options.mode ?? 'package') === 'monorepo'
+                ? new MonorepoPackageSource({
+                    root: normalizeFileKey(options.root),
+                    packagesDir: options.packagesDir ?? 'packages',
+                    styleExtensions: this.config.styleExtensions,
+                })
+                : new SinglePackageSource({
+                    root: normalizeFileKey(options.root),
+                    styleExtensions: this.config.styleExtensions,
+                    loadAukletConfig: this.loadAukletConfig,
+                });
     }
     parsePackageStyleId(id) {
         return parsePackageStyleId(id, this.getPackageNames());

package/dist/css/vite/moduleGraph/packageSource/monorepo.d.ts

@@ -1,7 +1,18 @@
-import type { StylePackageSource } from '#auklet/css/vite/moduleGraph/packageSource/types';
+import type { StylePackageInfo, StylePackageSource } from '#auklet/css/vite/moduleGraph/packageSource/types';
 export type MonorepoPackageSourceOptions = {
-    workspaceRoot: string;
+    root: string;
     packagesDir: string;
     styleExtensions: Array<string>;
 };
-export declare function createMonorepoPackageSource(options: MonorepoPackageSourceOptions): StylePackageSource;
+export declare class MonorepoPackageSource implements StylePackageSource {
+    private readonly options;
+    private packages?;
+    private packageNames?;
+    private readonly root;
+    constructor(options: MonorepoPackageSourceOptions);
+    getPackages(): StylePackageInfo[];
+    getPackageNames(): string[];
+    isKnownPackageName(packageName: string): boolean;
+    isSourceGraphFile(file: string): boolean;
+    getWatchRoots(): Promise<string[]>;
+}

package/dist/css/vite/moduleGraph/packageSource/monorepo.js

@@ -1,24 +1,21 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { aukletConfigFile } from '#auklet/config';
-import { SOURCE_COMPONENT_MODULE_RE } from '#auklet/css/constants';
+import { SOURCE_MODULE_RE } from '#auklet/css/constants';
 import { normalizeFileKey, toWatchPath } from '#auklet/utils';
-export function createMonorepoPackageSource(options) {
-    return new MonorepoPackageSource(options);
-}
-class MonorepoPackageSource {
+export class MonorepoPackageSource {
     options;
     packages;
     packageNames;
-    workspaceRoot;
+    root;
     constructor(options) {
         this.options = options;
-        this.workspaceRoot = normalizeFileKey(options.workspaceRoot);
+        this.root = normalizeFileKey(options.root);
     }
     getPackages() {
         if (this.packages)
             return this.packages;
-        const packagesRoot = path.join(this.workspaceRoot, this.options.packagesDir);
+        const packagesRoot = path.join(this.root, this.options.packagesDir);
         if (!fs.existsSync(packagesRoot)) {
             this.packages = [];
             return this.packages;
@@ -52,18 +49,18 @@ class MonorepoPackageSource {
     }
     isSourceGraphFile(file) {
         const normalizedFile = normalizeFileKey(file);
-        const packagesRoot = normalizeFileKey(path.join(this.workspaceRoot, this.options.packagesDir));
+        const packagesRoot = normalizeFileKey(path.join(this.root, this.options.packagesDir));
         if (!normalizedFile.startsWith(`${packagesRoot}/`)) {
             return false;
         }
         if (normalizedFile.endsWith(aukletConfigFile))
             return true;
-        if (SOURCE_COMPONENT_MODULE_RE.test(normalizedFile))
+        if (SOURCE_MODULE_RE.test(normalizedFile))
             return true;
         return this.options.styleExtensions.some((extension) => normalizedFile.endsWith(extension));
     }
-    getWatchRoots() {
-        const packagesRoot = path.join(this.workspaceRoot, this.options.packagesDir);
+    async getWatchRoots() {
+        const packagesRoot = path.join(this.root, this.options.packagesDir);
         return [
             toWatchPath(packagesRoot, '*', 'src'),
             toWatchPath(packagesRoot, '*', aukletConfigFile),

package/dist/css/vite/moduleGraph/packageSource/singlePackage.d.ts

@@ -0,0 +1,21 @@
+import type { StylePackageInfo, StylePackageSource } from '#auklet/css/vite/moduleGraph/packageSource/types';
+import type { LoadAukletConfig } from '#auklet/css/vite/moduleGraph/types';
+export type SinglePackageSourceOptions = {
+    root: string;
+    styleExtensions: Array<string>;
+    loadAukletConfig?: LoadAukletConfig;
+};
+export declare class SinglePackageSource implements StylePackageSource {
+    private readonly options;
+    private packageInfo?;
+    private readonly root;
+    private readonly loadAukletConfig;
+    constructor(options: SinglePackageSourceOptions);
+    getPackages(): StylePackageInfo[];
+    getPackageNames(): string[];
+    isKnownPackageName(packageName: string): boolean;
+    isSourceGraphFile(file: string): boolean;
+    getWatchRoots(): Promise<string[]>;
+    private getPackageInfo;
+    private isInsidePackage;
+}

package/dist/css/vite/moduleGraph/packageSource/singlePackage.js

@@ -0,0 +1,63 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { aukletConfigFile, normalizeAukletConfig } from '#auklet/config';
+import { loadAukletConfig } from '#auklet/configLoader';
+import { SOURCE_MODULE_RE } from '#auklet/css/constants';
+import { normalizeFileKey, toWatchPath } from '#auklet/utils';
+export class SinglePackageSource {
+    options;
+    packageInfo;
+    root;
+    loadAukletConfig;
+    constructor(options) {
+        this.options = options;
+        this.root = normalizeFileKey(options.root);
+        this.loadAukletConfig = options.loadAukletConfig ?? loadAukletConfig;
+    }
+    getPackages() {
+        return [this.getPackageInfo()];
+    }
+    getPackageNames() {
+        return [this.getPackageInfo().packageName];
+    }
+    isKnownPackageName(packageName) {
+        return packageName === this.getPackageInfo().packageName;
+    }
+    isSourceGraphFile(file) {
+        const normalizedFile = normalizeFileKey(file);
+        if (!this.isInsidePackage(normalizedFile))
+            return false;
+        if (normalizedFile.endsWith(aukletConfigFile))
+            return true;
+        if (SOURCE_MODULE_RE.test(normalizedFile))
+            return true;
+        return this.options.styleExtensions.some((extension) => normalizedFile.endsWith(extension));
+    }
+    async getWatchRoots() {
+        const normalizedConfig = normalizeAukletConfig(await this.loadAukletConfig(this.root, { cacheBust: true }));
+        return [
+            toWatchPath(this.root, normalizedConfig.source),
+            toWatchPath(this.root, aukletConfigFile),
+        ];
+    }
+    getPackageInfo() {
+        if (this.packageInfo)
+            return this.packageInfo;
+        const packageJsonPath = path.join(this.root, 'package.json');
+        if (!fs.existsSync(packageJsonPath)) {
+            throw new Error(`[auklet:css] package mode requires a package.json at ${this.root}.`);
+        }
+        const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        if (!pkg.name) {
+            throw new Error(`[auklet:css] package mode requires package.json#name at ${this.root}.`);
+        }
+        this.packageInfo = {
+            packageName: pkg.name,
+            packageRoot: this.root,
+        };
+        return this.packageInfo;
+    }
+    isInsidePackage(file) {
+        return file === this.root || file.startsWith(`${this.root}/`);
+    }
+}

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

@@ -7,5 +7,5 @@ export interface StylePackageSource {
     getPackageNames(): Array<string>;
     isKnownPackageName(packageName: string): boolean;
     isSourceGraphFile(file: string): boolean;
-    getWatchRoots(): Array<string>;
+    getWatchRoots(): Promise<Array<string>>;
 }

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

@@ -3,9 +3,8 @@ 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, STYLE_ENTRY, THEMES_ENTRY_PREFIX, } from '#auklet/css/constants';
-import { createComponentStyleEntryPlan, createExternalEntryParts, createStyleEntryParts, createThemeEntryParts, } from '#auklet/css/core/style/entries';
-import { createImportCode, parsePackageStyleSpecifier, removeStyleExtension, } from '#auklet/css/core/style/specifier';
-import { toFsSpecifier, toPosixPath } from '#auklet/utils';
+import { createModuleStyleEntryPlan, createExternalEntryParts, createStyleEntryParts, createThemeEntryParts, } from '#auklet/css/core/style/entries';
+import { createDevExternalStyleSpecifier, createDevModuleStyleSpecifier, createImportCode, removeStyleExtension, } from '#auklet/css/core/style/specifier';
 // 生成 Vite/dev 虚拟 CSS；production writer 共享入口语义，但写入真实文件。
 export class StyleCodeFactory {
     config;
@@ -129,13 +128,13 @@ export class StyleCodeFactory {
     async createSourceModuleStyleCode(context, cache, stylePath) {
         const sourceModuleDir = removeStyleExtension(stylePath);
         const { styleFiles, sourceFiles } = context.packageContext;
-        const entry = createComponentStyleEntryPlan(context.packageContext, sourceModuleDir);
+        const entry = createModuleStyleEntryPlan(context.packageContext, sourceModuleDir);
         const sourceStyleDir = path.join(context.sourceRoot, sourceModuleDir, this.config.output.styleDir);
         const moduleStyleResults = [];
         const moduleStyleSpecifiers = [];
         const moduleStyleWatchFiles = [];
         for (const specifier of entry.moduleStyleImports) {
-            const result = this.toDevModuleImportSpecifier(context, cache, sourceStyleDir, specifier);
+            const result = this.toDevModuleImportSpecifier(specifier, context, cache, sourceStyleDir);
             const parsed = this.parsePackageStyleIdInRequest(result, cache);
             if (parsed) {
                 moduleStyleResults.push(await this.createPackageStyleCode(parsed, cache));
@@ -170,32 +169,23 @@ export class StyleCodeFactory {
             ],
         });
     }
-    toDevModuleImportSpecifier(context, cache, sourceStyleDir, specifier) {
-        if (!specifier.startsWith('.')) {
-            return this.toDevExternalStyleSpecifier(specifier, cache);
-        }
-        const outputStyleEntry = path.resolve(sourceStyleDir, specifier);
-        const styleEntrySuffix = `${path.sep}${this.config.output.styleDir}${path.sep}${this.config.output.indexStyleFile}`;
-        if (!outputStyleEntry.endsWith(styleEntrySuffix)) {
-            return toFsSpecifier(outputStyleEntry);
-        }
-        const sourceModuleDir = path.relative(context.sourceRoot, outputStyleEntry.slice(0, -styleEntrySuffix.length));
-        return `${context.packageName}/${toPosixPath(sourceModuleDir)}.css`;
+    toDevModuleImportSpecifier(specifier, context, cache, sourceStyleDir) {
+        return createDevModuleStyleSpecifier(specifier, {
+            sourceStyleDir,
+            sourceRoot: context.sourceRoot,
+            packageName: context.packageName,
+            styleDir: this.config.output.styleDir,
+            indexStyleFile: this.config.output.indexStyleFile,
+            mapExternalSpecifier: (externalSpecifier) => this.toDevExternalStyleSpecifier(externalSpecifier, cache),
+        });
     }
     toDevExternalStyleSpecifier(specifier, cache) {
-        const parsed = parsePackageStyleSpecifier(specifier);
-        if (!parsed)
-            return specifier;
-        if (cache.isKnownPackageName(parsed.packageName)) {
-            if (parsed.stylePath === STYLE_ENTRY) {
-                return `${parsed.packageName}/${EXTERNAL_ENTRY}`;
-            }
-            if (parsed.stylePath ===
-                [this.config.output.styleDir, this.config.output.indexStyleFile].join('/')) {
-                return `${parsed.packageName}/${EXTERNAL_ENTRY}`;
-            }
-        }
-        return specifier;
+        return createDevExternalStyleSpecifier(specifier, {
+            isKnownPackageName: (packageName) => cache.isKnownPackageName(packageName),
+            styleDir: this.config.output.styleDir,
+            indexStyleFile: this.config.output.indexStyleFile,
+            externalStyleFile: EXTERNAL_ENTRY,
+        });
     }
     parsePackageStyleIdInRequest(id, cache) {
         return parsePackageStyleId(id, cache.getPackageNames());

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

@@ -1,6 +1,6 @@
 import type { AukletConfig, ModuleStyleBuildConfig } from '#auklet/types';
 export interface ModuleStyleGraphOptions {
-    workspaceRoot: string;
+    root: string;
     packagesDir?: string;
     mode?: 'monorepo' | 'package';
     config?: ModuleStyleBuildConfig;

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

@@ -1,6 +1,6 @@
 import type { HotUpdateOptions, ViteDevServer } from 'vite';
 import type { ModuleStyleGraphOptions } from '#auklet/css/vite/moduleGraph/types';
-export type AukletStylePluginOptions = Partial<Pick<ModuleStyleGraphOptions, 'workspaceRoot' | 'mode'>> & Omit<ModuleStyleGraphOptions, 'workspaceRoot'>;
+export type AukletStylePluginOptions = Partial<Pick<ModuleStyleGraphOptions, 'root' | 'mode'>> & Omit<ModuleStyleGraphOptions, 'root'>;
 export declare function aukletStylePlugin(options?: AukletStylePluginOptions): {
     name: string;
     apply: "serve";
@@ -12,7 +12,7 @@ export declare function aukletStylePlugin(options?: AukletStylePluginOptions): {
     load(this: {
         addWatchFile?: (file: string) => void;
     }, id: string): Promise<string | null>;
-    configureServer(server: ViteDevServer): void;
+    configureServer(server: ViteDevServer): Promise<void>;
     hotUpdate: {
         order: "pre";
         handler(context: HotUpdateOptions): never[] | undefined;

package/dist/css/vite/vitePlugin.js

@@ -29,12 +29,19 @@ const findWorkspaceRoot = (startDir) => {
     }
 };
 const createModuleStyleGraph = (options, viteRoot) => {
-    const workspaceRoot = options.workspaceRoot ?? findWorkspaceRoot(viteRoot) ?? process.cwd();
+    const mode = options.mode ?? 'package';
+    const root = options.root ?? resolveGraphRoot(mode, viteRoot);
     return new ModuleStyleGraph({
         ...options,
-        workspaceRoot,
+        mode,
+        root,
     });
 };
+const resolveGraphRoot = (mode, viteRoot) => {
+    if (mode === 'monorepo')
+        return findWorkspaceRoot(viteRoot) ?? process.cwd();
+    return viteRoot;
+};
 const invalidateVirtualModules = (server, graph) => {
     const modules = [];
     for (const packageName of graph.getPackageNames()) {
@@ -92,10 +99,10 @@ export function aukletStylePlugin(options = {}) {
             }
             return result.code;
         },
-        configureServer(server) {
+        async configureServer(server) {
             const graph = getGraph();
             hmr.installFullReloadGuard(server);
-            server.watcher.add(graph.getWatchRoots());
+            server.watcher.add(await graph.getWatchRoots());
             const invalidateStyleGraph = (file) => {
                 if (!graph.isSourceGraphFile(file))
                     return false;

package/dist/css/watch/watcher.js

@@ -3,7 +3,7 @@ import path from 'node:path';
 import chokidar from 'chokidar';
 import { aukletConfigFile, aukletDefaultOptions } from '#auklet/config';
 import { moduleStyleBuildConfig } from '#auklet/css/config';
-import { SOURCE_COMPONENT_MODULE_RE } from '#auklet/css/constants';
+import { SOURCE_MODULE_RE } from '#auklet/css/constants';
 import { ModuleStyleBuilder } from '#auklet/css/production/builder';
 export class ModuleStyleWatcher {
     config;
@@ -82,7 +82,7 @@ export class ModuleStyleWatcher {
     shouldRebuildForFile(file) {
         if (path.basename(file) === aukletConfigFile)
             return true;
-        if (SOURCE_COMPONENT_MODULE_RE.test(file))
+        if (SOURCE_MODULE_RE.test(file))
             return true;
         return this.config.styleExtensions.includes(path.extname(file));
     }

package/package.json

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

package/dist/css/core/styleImports/sourceReference.d.ts

@@ -1,11 +0,0 @@
-import ts from 'typescript';
-export type ModuleStyleSourceReference = {
-    importPath: string;
-    importClause?: ts.ImportClause;
-    importedNames?: Array<string>;
-    isTypeOnly?: boolean;
-    hasNamespaceImport?: boolean;
-};
-export declare function collectModuleStyleSourceReferences(file: string, code: string): ModuleStyleSourceReference[];
-export declare function isTypeOnlySourceReference(item: ModuleStyleSourceReference): boolean | undefined;
-export declare function getSourceReferenceImportedNames(file: string, item: ModuleStyleSourceReference): string[];