auklet 0.2.7 → 0.2.9

package/README.md

@@ -181,8 +181,10 @@ pattern syntax is a small glob subset: `*`, `**`, and `?`.
 
 For example, `components/CodeBlock/index.css` may import
 `../../internal/syntaxHighlight.css` when it matches `styles.shared`; component
-CSS outputs inline that shared CSS and its local helper CSS imports, while
-package-level CSS dedupes repeated shared imports. Shared CSS cannot import
-component CSS or theme CSS. Component-to-component CSS imports are still
-rejected; package CSS dependencies should be expressed through
-`styles.dependencies`.
+CSS outputs keep that `@import` relationship instead of expanding the shared
+rules into every component output. The shared CSS file is still copied as its
+own source-level CSS file. `dist/index.css` remains the full package CSS
+aggregate, while format-level and component-level CSS entries preserve the
+import graph as much as possible. Shared CSS cannot import component CSS or
+theme CSS. Component-to-component CSS imports are still rejected; package CSS
+dependencies should be expressed through `styles.dependencies`.

package/dist/css/core/styleModuleEntryPlanner.js

@@ -62,7 +62,7 @@ export class StyleModuleEntryPlanner {
                 throw new Error(`[css] cross-package CSS import detected: ${importer} imports ${imported}. ` +
                     'Use styles.dependencies to express package style dependencies.');
             }
-            if (this.packageContext.shouldInlineSharedStyleImport(item))
+            if (this.packageContext.shouldAllowSharedStyleImport(item))
                 continue;
             if (this.packageContext.isSharedStyleFile(item.importer)) {
                 const importer = this.toRelativeSourceFile(item.importer);

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

@@ -22,14 +22,19 @@ export declare class StylePackageContext {
     private readonly sourceModuleDirs;
     private readonly themeStyleFileKeys;
     private readonly sharedStyleFileKeys;
+    private hasValidatedSourceRootLocalStyleImports;
+    private hasValidatedPreservedLocalStyleImports;
     private moduleStyleEntryPlanner?;
     private moduleStyleImports?;
     constructor(options: StylePackageContextOptions);
     getStyleFiles(files: Array<string>): string[];
     getModuleStyleImports(): Map<string, string[]>;
     getModuleStyleEntryPlanner(): StyleModuleEntryPlanner;
+    getStyleEntryFiles(): string[];
     isSharedStyleFile(file: string): boolean;
-    shouldInlineSharedStyleImport(reference: StyleFileImportReference): boolean;
+    shouldAllowSharedStyleImport(reference: StyleFileImportReference): boolean;
+    assertPreservedLocalStyleImports(): void;
+    assertNoSourceRootEscapingLocalStyleImports(): void;
     private isSharedHelperStyleFile;
     private getSourceModuleDirs;
     private isSourceModuleStyleFile;

package/dist/css/core/stylePackageContext.js

@@ -23,6 +23,8 @@ export class StylePackageContext {
     sourceModuleDirs;
     themeStyleFileKeys;
     sharedStyleFileKeys;
+    hasValidatedSourceRootLocalStyleImports = false;
+    hasValidatedPreservedLocalStyleImports = false;
     moduleStyleEntryPlanner;
     moduleStyleImports;
     constructor(options) {
@@ -61,15 +63,35 @@ export class StylePackageContext {
         this.moduleStyleEntryPlanner ??= new StyleModuleEntryPlanner(this);
         return this.moduleStyleEntryPlanner;
     }
+    getStyleEntryFiles() {
+        const importedStyleFiles = this.styleProcessor.collectImportedStyleFiles(this.styleFiles);
+        return this.styleFiles.filter((styleFile) => !importedStyleFiles.has(path.resolve(styleFile)));
+    }
     isSharedStyleFile(file) {
         return this.sharedStyleFileKeys.has(normalizeFileKey(file));
     }
-    shouldInlineSharedStyleImport(reference) {
+    shouldAllowSharedStyleImport(reference) {
         return ((this.isSharedStyleFile(reference.imported) &&
             this.isSharedHelperStyleFile(reference.imported)) ||
             (this.isSharedStyleFile(reference.importer) &&
                 this.isSharedHelperStyleFile(reference.imported)));
     }
+    assertPreservedLocalStyleImports() {
+        if (this.hasValidatedPreservedLocalStyleImports)
+            return;
+        this.assertNoSourceRootEscapingLocalStyleImports();
+        this.styleProcessor.assertNoLocalStyleImportCycles(this.styleFiles);
+        this.hasValidatedPreservedLocalStyleImports = true;
+    }
+    assertNoSourceRootEscapingLocalStyleImports() {
+        if (this.hasValidatedSourceRootLocalStyleImports)
+            return;
+        this.styleProcessor.assertNoSourceRootEscapingLocalStyleImports([
+            ...this.styleFiles,
+            ...this.themeFiles.values(),
+        ]);
+        this.hasValidatedSourceRootLocalStyleImports = true;
+    }
     isSharedHelperStyleFile(file) {
         return (this.isInsideSourceRoot(file) &&
             !this.isThemeStyleFile(file) &&

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

@@ -4,8 +4,10 @@ import type { WorkspaceStyleResolver } from '#auklet/css/core/workspaceStyleReso
 export type StyleFileImportReference = {
     importer: string;
     imported: string;
+    specifier: string;
 };
 export type StyleFileImportExpandOptions = {
+    mapImportSpecifier?: (reference: StyleFileImportReference) => string;
     shouldExpandImport?: (reference: StyleFileImportReference) => boolean;
 };
 export declare class StyleProcessor {
@@ -17,9 +19,17 @@ export declare class StyleProcessor {
     stringify(root: Root): string;
     appendStyleContent(target: Root, content: string, from: string): void;
     readStyleFile(stylePath: string, seen?: Set<string>, options?: StyleFileImportExpandOptions): string;
+    private isSourceStyleImportSpecifier;
+    private throwMissingLocalStyleImport;
     collectImportedStyleFiles(styleFiles: Array<string>): Set<string>;
     collectImportedStyleFileReferences(styleFiles: Array<string>): StyleFileImportReference[];
     collectStyleImportSpecifiers(styleFiles: Array<string>): Set<string>;
+    assertNoLocalStyleImportCycles(styleFiles: Array<string>): void;
+    assertNoSourceRootEscapingLocalStyleImports(styleFiles: Array<string>): void;
     private parse;
     private parseImportSpecifier;
+    private resolveStyleImportReference;
+    private assertSourceRootLocalStyleImport;
+    private collectLocalStyleImportReferences;
+    private parseImportSpecifierReference;
 }

package/dist/css/core/styleProcessor.js

@@ -44,29 +44,39 @@ export class StyleProcessor {
         const root = this.parse(css, stylePath);
         const imports = [];
         root.walkAtRules('import', (rule) => {
-            const specifier = this.parseImportSpecifier(rule.params);
-            if (specifier)
-                imports.push({ rule, specifier });
+            const reference = this.parseImportSpecifierReference(rule.params);
+            if (reference)
+                imports.push({ rule, ...reference });
         });
-        for (const { rule, specifier } of imports) {
-            const importedPath = this.resolver.resolveStyleDependency(specifier, path.dirname(stylePath));
-            if (!importedPath)
-                continue;
-            const reference = {
-                importer: normalizedPath,
-                imported: path.resolve(importedPath),
-            };
-            if (options.shouldExpandImport?.(reference) === false)
+        for (const { rule, specifier, specifierStart, specifierEnd } of imports) {
+            const { reference, isLocalStyleImport } = this.resolveStyleImportReference(specifier, stylePath);
+            this.assertSourceRootLocalStyleImport(reference, isLocalStyleImport);
+            const mappedSpecifier = options.mapImportSpecifier?.(reference);
+            if (mappedSpecifier) {
+                rule.params = `${rule.params.slice(0, specifierStart)}${mappedSpecifier}${rule.params.slice(specifierEnd)}`;
+            }
+            if (options.shouldExpandImport?.(reference) === false) {
                 continue;
-            const content = this.readStyleFile(importedPath, seen, options);
+            }
+            const content = this.readStyleFile(reference.imported, seen, options);
             if (!content.trim()) {
                 rule.remove();
                 continue;
             }
-            rule.replaceWith(...(this.parse(content, importedPath).nodes ?? []));
+            rule.replaceWith(...(this.parse(content, reference.imported).nodes ?? []));
         }
         return root.toString();
     }
+    isSourceStyleImportSpecifier(specifier, importedPath) {
+        if (specifier.startsWith('#'))
+            return true;
+        return (this.config.styleExtensions.includes(path.extname(importedPath ?? specifier)) &&
+            (specifier.startsWith('.') ||
+                (importedPath ? this.resolver.isInsideSourceRoot(importedPath) : false)));
+    }
+    throwMissingLocalStyleImport(specifier, stylePath) {
+        throw new Error(`[css] local CSS import not found: ${specifier} from ${stylePath}`);
+    }
     collectImportedStyleFiles(styleFiles) {
         return new Set(this.collectImportedStyleFileReferences(styleFiles).map((item) => item.imported));
     }
@@ -77,14 +87,13 @@ export class StyleProcessor {
             const root = this.parse(css, styleFile);
             root.walkAtRules('import', (rule) => {
                 const specifier = this.parseImportSpecifier(rule.params);
-                if (!specifier?.startsWith('.') ||
-                    !this.config.styleExtensions.includes(path.extname(specifier))) {
+                if (!specifier)
+                    return;
+                const { reference, isLocalStyleImport } = this.resolveStyleImportReference(specifier, styleFile);
+                if (!isLocalStyleImport) {
                     return;
                 }
-                imports.push({
-                    importer: path.resolve(styleFile),
-                    imported: path.resolve(path.dirname(styleFile), specifier),
-                });
+                imports.push(reference);
             });
         }
         return imports;
@@ -102,17 +111,117 @@ export class StyleProcessor {
         }
         return specifiers;
     }
+    assertNoLocalStyleImportCycles(styleFiles) {
+        const visited = new Set();
+        const visiting = new Set();
+        const stack = [];
+        const visit = (styleFile) => {
+            const normalizedPath = path.resolve(styleFile);
+            if (visited.has(normalizedPath))
+                return;
+            if (visiting.has(normalizedPath)) {
+                const cycleStart = stack.indexOf(normalizedPath);
+                const cycle = cycleStart >= 0
+                    ? [...stack.slice(cycleStart), normalizedPath]
+                    : [normalizedPath, normalizedPath];
+                throw new Error(`[css] circular CSS import detected: ${cycle.join(' -> ')}`);
+            }
+            if (!fs.existsSync(normalizedPath))
+                return;
+            visiting.add(normalizedPath);
+            stack.push(normalizedPath);
+            for (const reference of this.collectLocalStyleImportReferences(normalizedPath)) {
+                visit(reference.imported);
+            }
+            stack.pop();
+            visiting.delete(normalizedPath);
+            visited.add(normalizedPath);
+        };
+        for (const styleFile of styleFiles) {
+            visit(styleFile);
+        }
+    }
+    assertNoSourceRootEscapingLocalStyleImports(styleFiles) {
+        for (const styleFile of styleFiles) {
+            if (!fs.existsSync(styleFile))
+                continue;
+            for (const reference of this.collectLocalStyleImportReferences(path.resolve(styleFile))) {
+                this.assertSourceRootLocalStyleImport(reference, true);
+            }
+        }
+    }
     parse(code, from) {
         // Keep parsing behind one method so future style languages can transform
         // to CSS before PostCSS reads the final stylesheet.
         return postcss.parse(code, { from });
     }
     parseImportSpecifier(params) {
+        return this.parseImportSpecifierReference(params)?.specifier ?? null;
+    }
+    resolveStyleImportReference(specifier, stylePath) {
+        const fromDir = path.dirname(stylePath);
+        const sourceStylePath = this.resolver.resolveSourceStyleDependency(specifier, fromDir);
+        const isSourceStyleSpecifier = this.isSourceStyleImportSpecifier(specifier, sourceStylePath);
+        if (isSourceStyleSpecifier) {
+            if (!sourceStylePath || !fs.existsSync(sourceStylePath)) {
+                this.throwMissingLocalStyleImport(specifier, stylePath);
+            }
+            return {
+                reference: {
+                    importer: path.resolve(stylePath),
+                    imported: path.resolve(sourceStylePath),
+                    specifier,
+                },
+                isLocalStyleImport: true,
+            };
+        }
+        const importedPath = this.resolver.resolveStyleDependency(specifier, fromDir);
+        return {
+            reference: {
+                importer: path.resolve(stylePath),
+                imported: path.resolve(importedPath),
+                specifier,
+            },
+            isLocalStyleImport: false,
+        };
+    }
+    assertSourceRootLocalStyleImport(reference, isLocalStyleImport) {
+        if (!isLocalStyleImport ||
+            !this.resolver.isInsideSourceRoot(reference.importer) ||
+            this.resolver.isInsideSourceRoot(reference.imported)) {
+            return;
+        }
+        throw new Error(`[css] local CSS import escapes source root: ${reference.specifier} from ${reference.importer}`);
+    }
+    collectLocalStyleImportReferences(styleFile) {
+        const imports = [];
+        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, isLocalStyleImport } = this.resolveStyleImportReference(specifier, styleFile);
+            if (!isLocalStyleImport) {
+                return;
+            }
+            imports.push(reference);
+        });
+        return imports;
+    }
+    parseImportSpecifierReference(params) {
         const value = params.trim();
+        const valueOffset = params.indexOf(value);
         const first = value[0];
         if (first === '"' || first === "'") {
             const end = value.indexOf(first, 1);
-            return end > 0 ? value.slice(1, end) : null;
+            return end > 0
+                ? {
+                    specifier: value.slice(1, end),
+                    specifierStart: valueOffset + 1,
+                    specifierEnd: valueOffset + end,
+                }
+                : null;
         }
         if (!value.startsWith('url(')) {
             return null;
@@ -124,8 +233,24 @@ export class StyleProcessor {
         const quote = url[0];
         if (quote === '"' || quote === "'") {
             const quoteEnd = url.indexOf(quote, 1);
-            return quoteEnd > 0 ? url.slice(1, quoteEnd) : null;
+            const quotedValueStart = value.indexOf(quote, 4);
+            return quoteEnd > 0
+                ? {
+                    specifier: url.slice(1, quoteEnd),
+                    specifierStart: valueOffset + quotedValueStart + 1,
+                    specifierEnd: valueOffset + quotedValueStart + quoteEnd,
+                }
+                : null;
         }
-        return url || null;
+        if (!url)
+            return null;
+        const rawUrl = value.slice(4, end);
+        const leadingSpaces = rawUrl.length - rawUrl.trimStart().length;
+        const trailingSpaces = rawUrl.length - rawUrl.trimEnd().length;
+        return {
+            specifier: url,
+            specifierStart: valueOffset + 4 + leadingSpaces,
+            specifierEnd: valueOffset + end - trailingSpaces,
+        };
     }
 }

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

@@ -3,8 +3,13 @@ export declare class WorkspaceStyleResolver {
     private readonly config;
     private readonly context;
     private readonly require;
+    readonly sourceRoot: string;
     constructor(config: ModuleStyleBuildConfig, context: ResolvedModuleStyleBuildContext);
     resolveStyleDependency(specifier: string, fromDir?: string): string;
+    resolveSourceStyleDependency(specifier: string, fromDir?: string): string | null;
+    isInsideSourceRoot(file: string): boolean;
+    isStyleFile(file: string): boolean;
     toOutputStyleSpecifier(specifier: string, outRoot: string): string;
     toExternalStyleSpecifier(specifier: string, outRoot: string): string;
+    private resolveSourceImportPaths;
 }

package/dist/css/core/workspaceStyleResolver.js

@@ -1,20 +1,26 @@
 import path from 'node:path';
 import { createRequire } from 'node:module';
 import { NODE_MODULES_DIR } from '#auklet/css/constants';
+import { resolvePackageImportsSourceImport } from '#auklet/css/core/resolvers/packageImports';
+import { resolveTsconfigPathsSourceImport } from '#auklet/css/core/resolvers/tsconfigPaths';
 import { createExternalStyleSpecifier, createOutputStyleSpecifier, } from '#auklet/css/core/style/specifier';
 export class WorkspaceStyleResolver {
     config;
     context;
     require;
+    sourceRoot;
     constructor(config, context) {
         this.config = config;
         this.context = context;
+        this.sourceRoot = path.isAbsolute(context.sourceDir)
+            ? context.sourceDir
+            : path.join(context.packageRoot, context.sourceDir);
         this.require = createRequire(path.join(this.context.packageRoot, 'package.json'));
     }
     resolveStyleDependency(specifier, fromDir = this.context.packageRoot) {
-        if (specifier.startsWith('.')) {
-            return path.resolve(fromDir, specifier);
-        }
+        const sourceStyleDependency = this.resolveSourceStyleDependency(specifier, fromDir);
+        if (sourceStyleDependency)
+            return sourceStyleDependency;
         try {
             return this.require.resolve(specifier, {
                 paths: [this.context.packageRoot],
@@ -24,6 +30,26 @@ export class WorkspaceStyleResolver {
             return path.resolve(this.context.packageRoot, NODE_MODULES_DIR, specifier);
         }
     }
+    resolveSourceStyleDependency(specifier, fromDir = this.context.packageRoot) {
+        if (specifier.startsWith('.')) {
+            return path.resolve(fromDir, specifier);
+        }
+        for (const sourceRelativePath of this.resolveSourceImportPaths(specifier)) {
+            const file = path.join(this.sourceRoot, sourceRelativePath);
+            if (this.isStyleFile(file))
+                return file;
+        }
+        return null;
+    }
+    isInsideSourceRoot(file) {
+        const relative = path.relative(this.sourceRoot, file);
+        return (Boolean(relative) &&
+            !relative.startsWith('..') &&
+            !path.isAbsolute(relative));
+    }
+    isStyleFile(file) {
+        return this.config.styleExtensions.includes(path.extname(file));
+    }
     toOutputStyleSpecifier(specifier, outRoot) {
         return createOutputStyleSpecifier(specifier, {
             currentOutputFormat: path.basename(outRoot),
@@ -39,4 +65,10 @@ export class WorkspaceStyleResolver {
             externalStyleFile: this.config.output.externalStyleFile,
         });
     }
+    resolveSourceImportPaths(specifier) {
+        return [
+            ...resolvePackageImportsSourceImport(this.context.packageRoot, this.sourceRoot, specifier),
+            ...resolveTsconfigPathsSourceImport(this.context.packageRoot, this.sourceRoot, specifier),
+        ];
+    }
 }

package/dist/css/production/builder.js

@@ -21,6 +21,7 @@ export class ModuleStyleBuilder {
         const normalizedConfig = normalizeAukletConfig(rawConfig);
         const context = this.createBuildContext(normalizedConfig);
         const packageContext = this.createPackageContext(context, normalizedConfig);
+        packageContext.assertNoSourceRootEscapingLocalStyleImports();
         const writerOptions = {
             config: this.config,
             context,

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

@@ -1,5 +1,6 @@
 import { type FormatWriterOptions } from '#auklet/css/production/format/shared';
 export declare class ModuleStyleWriter {
+    private readonly sourceRoot;
     private readonly config;
     private readonly packageContext;
     private readonly styleProcessor;

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

@@ -1,23 +1,23 @@
 import path from 'node:path';
-import { writeStyleFile, } from '#auklet/css/production/format/shared';
+import { toRelativeImportSpecifier, writeStyleFile, } from '#auklet/css/production/format/shared';
 export class ModuleStyleWriter {
+    sourceRoot;
     config;
     packageContext;
     styleProcessor;
     constructor(options) {
         this.config = options.config;
         this.packageContext = options.packageContext;
+        this.sourceRoot = options.packageContext.sourceRoot;
         this.styleProcessor = options.packageContext.styleProcessor;
     }
     write(outRoot) {
         const target = path.join(outRoot, this.config.output.styleDir, this.config.output.moduleStyleFile);
-        const seen = new Set();
+        const targetDir = path.dirname(target);
         const root = this.styleProcessor.createRoot();
-        for (const styleFile of this.packageContext.styleFiles) {
-            const content = this.styleProcessor.readStyleFile(styleFile, seen);
-            if (content.trim()) {
-                this.styleProcessor.appendStyleContent(root, content, styleFile);
-            }
+        for (const styleFile of this.packageContext.getStyleEntryFiles()) {
+            const outputStyleFile = path.join(outRoot, path.relative(this.sourceRoot, styleFile));
+            this.styleProcessor.appendImportRule(root, toRelativeImportSpecifier(targetDir, outputStyleFile));
         }
         if (!root.nodes?.length)
             return null;

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

@@ -1,7 +1,7 @@
 import { type FormatWriterOptions } from '#auklet/css/production/format/shared';
 export declare class SourceStyleFileWriter {
     private readonly sourceRoot;
-    private readonly packageContext;
+    private readonly resolver;
     private readonly styleProcessor;
     constructor(options: FormatWriterOptions);
     copy(files: Array<string>, outRoot: string): void;

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

@@ -1,12 +1,12 @@
 import path from 'node:path';
-import { writeStyleFile, } from '#auklet/css/production/format/shared';
+import { toRelativeImportSpecifier, writeStyleFile, } from '#auklet/css/production/format/shared';
 export class SourceStyleFileWriter {
     sourceRoot;
-    packageContext;
+    resolver;
     styleProcessor;
     constructor(options) {
         this.sourceRoot = options.packageContext.sourceRoot;
-        this.packageContext = options.packageContext;
+        this.resolver = options.packageContext.resolver;
         this.styleProcessor = options.packageContext.styleProcessor;
     }
     copy(files, outRoot) {
@@ -14,7 +14,13 @@ export class SourceStyleFileWriter {
             const relative = path.relative(this.sourceRoot, sourceFile);
             const target = path.join(outRoot, relative);
             const content = this.styleProcessor.readStyleFile(sourceFile, undefined, {
-                shouldExpandImport: (reference) => this.packageContext.shouldInlineSharedStyleImport(reference),
+                mapImportSpecifier: (reference) => {
+                    if (!this.resolver.isInsideSourceRoot(reference.imported)) {
+                        return reference.specifier;
+                    }
+                    return toRelativeImportSpecifier(path.dirname(target), path.join(outRoot, path.relative(this.sourceRoot, reference.imported)));
+                },
+                shouldExpandImport: () => false,
             });
             writeStyleFile(target, content);
         }

package/dist/css/production/moduleOutputWriter.js

@@ -29,6 +29,7 @@ export class ModuleStyleOutputWriter {
         this.moduleEntryWriter = new ModuleStyleEntryWriter(options);
     }
     write() {
+        this.packageContext.assertPreservedLocalStyleImports();
         const moduleEntries = this.createModuleEntries();
         const outputs = [];
         for (const format of this.config.output.outputFormats) {

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

@@ -10,11 +10,14 @@ export declare class StyleCodeFactory {
     private createDependencyStyleCode;
     private createExternalStyleCode;
     private createThemeStyleCode;
+    private createFullModuleStyleCode;
     private createModuleStyleCode;
     private createSourceModuleStyleCode;
+    private createOwnSourceStyleCode;
     private toDevModuleImportSpecifier;
     private toDevExternalStyleSpecifier;
     private parsePackageStyleIdInRequest;
+    private toBrowserVirtualStyleSpecifier;
     private withDependencyPackage;
     private normalizeTopLevelImports;
     private isTopLevelImportRule;

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

@@ -6,6 +6,7 @@ import { toDevDependencyImportSpecifier } from '#auklet/css/vite/moduleGraph/dev
 import { EXTERNAL_ENTRY, MODULE_ENTRY, STYLE_ENTRY, THEMES_ENTRY_PREFIX, } from '#auklet/css/constants';
 import { createModuleStyleEntryPlan, createExternalEntryParts, createStyleEntryParts, createThemeEntryParts, } from '#auklet/css/core/style/entries';
 import { createDevExternalStyleSpecifier, createDevModuleStyleSpecifier, createImportCode, removeStyleExtension, } from '#auklet/css/core/style/specifier';
+import { toFsSpecifier } from '#auklet/utils';
 // 生成 Vite/dev 虚拟 CSS；production writer 共享入口语义，但写入真实文件。
 export class StyleCodeFactory {
     config;
@@ -57,7 +58,7 @@ export class StyleCodeFactory {
                 results.push(await this.createThemeStyleCode(context, cache, part.themeNames, false));
                 continue;
             }
-            results.push(this.createModuleStyleCode(context));
+            results.push(this.createFullModuleStyleCode(context));
         }
         return mergeLoadResults(...results);
     }
@@ -125,7 +126,7 @@ export class StyleCodeFactory {
             watchFiles: [],
         });
     }
-    createModuleStyleCode(context) {
+    createFullModuleStyleCode(context) {
         const { styleFiles } = context.packageContext;
         const root = context.styleProcessor.createRoot();
         const seen = new Set();
@@ -140,7 +141,19 @@ export class StyleCodeFactory {
             watchFiles: [...context.configPaths, ...styleFiles],
         };
     }
+    createModuleStyleCode(context) {
+        context.packageContext.assertPreservedLocalStyleImports();
+        const { styleFiles } = context.packageContext;
+        const imports = context.packageContext
+            .getStyleEntryFiles()
+            .map((styleFile) => toFsSpecifier(styleFile));
+        return {
+            code: createImportCode(imports),
+            watchFiles: [...context.configPaths, ...styleFiles],
+        };
+    }
     async createSourceModuleStyleCode(context, cache, stylePath) {
+        context.packageContext.assertPreservedLocalStyleImports();
         const sourceModuleDir = removeStyleExtension(stylePath);
         const { styleFiles, sourceFiles } = context.packageContext;
         const entry = createModuleStyleEntryPlan(context.packageContext, sourceModuleDir);
@@ -153,8 +166,12 @@ export class StyleCodeFactory {
             const result = this.toDevModuleImportSpecifier(specifier, context, cache, sourceStyleDir);
             const parsed = this.parsePackageStyleIdInRequest(result, cache);
             if (parsed) {
-                const loadResult = await this.createPackageStyleCode(parsed, cache);
-                moduleStyleResults.push(this.withDependencyPackage(loadResult, parsed.packageName));
+                const dependencyResult = await this.createPackageStyleCode(parsed, cache);
+                moduleStyleResults.push(this.withDependencyPackage({
+                    ...dependencyResult,
+                    code: '',
+                }, parsed.packageName));
+                moduleStyleSpecifiers.push(this.toBrowserVirtualStyleSpecifier(parsed));
                 continue;
             }
             const resolvedSpecifier = toDevDependencyImportSpecifier(context, result);
@@ -164,17 +181,7 @@ export class StyleCodeFactory {
                 moduleStyleWatchFiles.push(resolvedSpecifier.watchFile);
             }
         }
-        const root = context.styleProcessor.createRoot();
-        const seen = new Set();
-        for (const ownStyleFile of entry.ownStyleFiles) {
-            const content = context.styleProcessor.readStyleFile(ownStyleFile, seen);
-            if (content.trim()) {
-                context.styleProcessor.appendStyleContent(root, content, ownStyleFile);
-            }
-        }
-        const ownStyleCode = root.nodes?.length
-            ? context.styleProcessor.stringify(root)
-            : '';
+        const ownStyleCode = this.createOwnSourceStyleCode(context, entry.ownStyleFiles);
         return mergeLoadResults(...moduleStyleResults, {
             code: [createImportCode(moduleStyleSpecifiers), ownStyleCode]
                 .filter((code) => code.trim())
@@ -188,6 +195,24 @@ export class StyleCodeFactory {
             cacheInputFiles: moduleStyleCacheInputFiles,
         });
     }
+    createOwnSourceStyleCode(context, styleFiles) {
+        const root = context.styleProcessor.createRoot();
+        for (const styleFile of styleFiles) {
+            const content = context.styleProcessor.readStyleFile(styleFile, undefined, {
+                mapImportSpecifier: (reference) => {
+                    if (!context.resolver.isInsideSourceRoot(reference.imported)) {
+                        return reference.specifier;
+                    }
+                    return toFsSpecifier(reference.imported);
+                },
+                shouldExpandImport: () => false,
+            });
+            if (content.trim()) {
+                context.styleProcessor.appendStyleContent(root, content, styleFile);
+            }
+        }
+        return root.nodes?.length ? context.styleProcessor.stringify(root) : '';
+    }
     toDevModuleImportSpecifier(specifier, context, cache, sourceStyleDir) {
         return createDevModuleStyleSpecifier(specifier, {
             sourceStyleDir,
@@ -209,6 +234,9 @@ export class StyleCodeFactory {
     parsePackageStyleIdInRequest(id, cache) {
         return parsePackageStyleId(id, cache.getPackageNames());
     }
+    toBrowserVirtualStyleSpecifier(parsed) {
+        return `auklet-css:${parsed.packageName}/${parsed.stylePath}`;
+    }
     withDependencyPackage(result, packageName) {
         return {
             ...result,

package/package.json

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