@css-modules-kit/core 0.1.0 → 0.3.0

package/src/dts-creator.ts

@@ -1,12 +1,11 @@
-import type { MatchesPattern } from './file.js';
-import type { CSSModule } from './parser/css-module-parser.js';
-import type { Resolver } from './resolver.js';
+import type { CSSModule, MatchesPattern, Resolver, Token, TokenImporter } from './type.js';
 
 export const STYLES_EXPORT_NAME = 'styles';
 
 export interface CreateDtsOptions {
   resolver: Resolver;
   matchesPattern: MatchesPattern;
+  namedExports: boolean;
 }
 
 interface CodeMapping {
@@ -31,8 +30,122 @@ interface LinkedCodeMapping extends CodeMapping {
   generatedLengths: number[];
 }
 
+interface CreateDtsResult {
+  text: string;
+  mapping: CodeMapping;
+  linkedCodeMapping: LinkedCodeMapping;
+}
+
+/**
+ * Create a d.ts file.
+ */
+export function createDts(cssModules: CSSModule, options: CreateDtsOptions): CreateDtsResult {
+  // Filter external files
+  const tokenImporters = cssModules.tokenImporters.filter((tokenImporter) => {
+    const resolved = options.resolver(tokenImporter.from, { request: cssModules.fileName });
+    return resolved !== undefined && options.matchesPattern(resolved);
+  });
+  if (options.namedExports) {
+    return createNamedExportsDts(cssModules.localTokens, tokenImporters);
+  } else {
+    return createDefaultExportDts(cssModules.localTokens, tokenImporters);
+  }
+}
+
 /**
- * Create a d.ts file from a CSS module file.
+ * Create a d.ts file with named exports.
+ * @example
+ * If the CSS module file is:
+ * ```css
+ * @import './a.module.css';
+ * @value local1: string;
+ * @value imported1, imported2 as aliasedImported2 from './b.module.css';
+ * .local2 { color: red }
+ * ```
+ * The d.ts file would be:
+ * ```ts
+ * // @ts-nocheck
+ * export var local1: string;
+ * export var local2: string;
+ * export * from './a.module.css';
+ * export {
+ *   imported1,
+ *   imported2 as aliasedImported2,
+ * } from './b.module.css';
+ * ```
+ */
+function createNamedExportsDts(
+  localTokens: Token[],
+  tokenImporters: TokenImporter[],
+): { text: string; mapping: CodeMapping; linkedCodeMapping: LinkedCodeMapping } {
+  const mapping: CodeMapping = { sourceOffsets: [], lengths: [], generatedOffsets: [] };
+  const linkedCodeMapping: LinkedCodeMapping = {
+    sourceOffsets: [],
+    lengths: [],
+    generatedOffsets: [],
+    generatedLengths: [],
+  };
+
+  // MEMO: Depending on the TypeScript compilation options, the generated type definition file contains compile errors.
+  // For example, it contains `Top-level 'await' expressions are only allowed when the 'module' option is set to ...` error.
+  //
+  // If `--skipLibCheck` is false, those errors will be reported by `tsc`. However, these are negligible errors.
+  // Therefore, `@ts-nocheck` is added to the generated type definition file.
+  let text = `// @ts-nocheck\n`;
+
+  for (const token of localTokens) {
+    text += `export var `;
+    mapping.sourceOffsets.push(token.loc.start.offset);
+    mapping.generatedOffsets.push(text.length);
+    mapping.lengths.push(token.name.length);
+    text += `${token.name}: string;\n`;
+  }
+  for (const tokenImporter of tokenImporters) {
+    if (tokenImporter.type === 'import') {
+      text += `export * from `;
+      mapping.sourceOffsets.push(tokenImporter.fromLoc.start.offset - 1);
+      mapping.lengths.push(tokenImporter.from.length + 2);
+      mapping.generatedOffsets.push(text.length);
+      text += `'${tokenImporter.from}';\n`;
+    } else {
+      text += `export {\n`;
+      // eslint-disable-next-line no-loop-func
+      tokenImporter.values.forEach((value) => {
+        const localName = value.localName ?? value.name;
+        const localLoc = value.localLoc ?? value.loc;
+        text += `  `;
+        if ('localName' in value) {
+          mapping.sourceOffsets.push(value.loc.start.offset);
+          mapping.lengths.push(value.name.length);
+          mapping.generatedOffsets.push(text.length);
+          linkedCodeMapping.generatedOffsets.push(text.length);
+          linkedCodeMapping.generatedLengths.push(value.name.length);
+          text += `${value.name} as `;
+          mapping.sourceOffsets.push(localLoc.start.offset);
+          mapping.lengths.push(localName.length);
+          mapping.generatedOffsets.push(text.length);
+          linkedCodeMapping.sourceOffsets.push(text.length);
+          linkedCodeMapping.lengths.push(localName.length);
+          text += `${localName},\n`;
+        } else {
+          mapping.sourceOffsets.push(value.loc.start.offset);
+          mapping.lengths.push(value.name.length);
+          mapping.generatedOffsets.push(text.length);
+          text += `${value.name},\n`;
+        }
+      });
+      text += `} from `;
+      mapping.sourceOffsets.push(tokenImporter.fromLoc.start.offset - 1);
+      mapping.lengths.push(tokenImporter.from.length + 2);
+      mapping.generatedOffsets.push(text.length);
+      text += `'${tokenImporter.from}';\n`;
+    }
+  }
+  return { text, mapping, linkedCodeMapping };
+}
+
+/**
+ * Create a d.ts file with a default export.
  * @example
  * If the CSS module file is:
  * ```css
@@ -54,9 +167,9 @@ interface LinkedCodeMapping extends CodeMapping {
  * export default styles;
  * ```
  */
-export function createDts(
-  { fileName, localTokens, tokenImporters: _tokenImporters }: CSSModule,
-  options: CreateDtsOptions,
+function createDefaultExportDts(
+  localTokens: Token[],
+  tokenImporters: TokenImporter[],
 ): { text: string; mapping: CodeMapping; linkedCodeMapping: LinkedCodeMapping } {
   const mapping: CodeMapping = { sourceOffsets: [], lengths: [], generatedOffsets: [] };
   const linkedCodeMapping: LinkedCodeMapping = {
@@ -66,12 +179,6 @@ export function createDts(
     generatedLengths: [],
   };
 
-  // Filter external files
-  const tokenImporters = _tokenImporters.filter((tokenImporter) => {
-    const resolved = options.resolver(tokenImporter.from, { request: fileName });
-    return resolved !== undefined && options.matchesPattern(resolved);
-  });
-
   // MEMO: Depending on the TypeScript compilation options, the generated type definition file contains compile errors.
   // For example, it contains `Top-level 'await' expressions are only allowed when the 'module' option is set to ...` error.
   //

package/src/export-builder.ts

@@ -1,6 +1,4 @@
-import type { MatchesPattern } from './file.js';
-import type { CSSModule } from './parser/css-module-parser.js';
-import type { Resolver } from './resolver.js';
+import type { CSSModule, ExportBuilder, ExportRecord, MatchesPattern, Resolver } from './type.js';
 
 export interface ExportBuilderHost {
   matchesPattern: MatchesPattern;
@@ -8,19 +6,6 @@ export interface ExportBuilderHost {
   resolver: Resolver;
 }
 
-/**
- * The export token record of a CSS module.
- */
-export interface ExportRecord {
-  /** The all exported tokens of the CSS module. */
-  allTokens: string[];
-}
-
-export interface ExportBuilder {
-  build(cssModule: CSSModule): ExportRecord;
-  clearCache(): void;
-}
-
 /**
  * A builder for exported token records of CSS modules.
  */

package/src/file.ts

@@ -1,5 +1,6 @@
 import ts from 'typescript';
 import { join, parse } from './path.js';
+import type { MatchesPattern } from './type.js';
 
 export const CSS_MODULE_EXTENSION = '.module.css';
 const COMPONENT_EXTENSIONS = ['.tsx', '.jsx'];
@@ -53,8 +54,6 @@ export function findComponentFileSync(
   return undefined;
 }
 
-export type MatchesPattern = (fileName: string) => boolean;
-
 /**
  * Create a function that checks whether the given file name matches the pattern.
  * This does not access the file system.

package/src/index.ts

@@ -1,28 +1,28 @@
 export type { CMKConfig } from './config.js';
 export { readConfigFile } from './config.js';
 export { TsConfigFileNotFoundError, SystemError } from './error.js';
+export { parseCSSModule, type ParseCSSModuleOptions, type ParseCSSModuleResult } from './parser/css-module-parser.js';
+export { parseRule } from './parser/rule-parser.js';
 export {
-  parseCSSModule,
-  type ParseCSSModuleOptions,
+  type Location,
+  type Position,
   type CSSModule,
   type Token,
   type AtImportTokenImporter,
   type TokenImporter,
   type AtValueTokenImporter,
   type AtValueTokenImporterValue,
-  type ParseCSSModuleResult,
-} from './parser/css-module-parser.js';
-export { type Location, type Position } from './parser/location.js';
-export { parseRule } from './parser/rule-parser.js';
-export {
+  type Resolver,
+  type MatchesPattern,
+  type ExportBuilder,
+  type DiagnosticSourceFile,
   type Diagnostic,
-  type SemanticDiagnostic,
-  type SyntacticDiagnostic,
+  type DiagnosticWithLocation,
   type DiagnosticCategory,
   type DiagnosticPosition,
-} from './diagnostic.js';
+} from './type.js';
 export { type CreateDtsOptions, createDts, STYLES_EXPORT_NAME } from './dts-creator.js';
-export { createResolver, type Resolver } from './resolver.js';
+export { createResolver } from './resolver.js';
 export {
   CSS_MODULE_EXTENSION,
   getCssModuleFileName,
@@ -30,11 +30,11 @@ export {
   isCSSModuleFile,
   findComponentFile,
   findComponentFileSync,
-  type MatchesPattern,
   createMatchesPattern,
   getFileNamesByPattern,
 } from './file.js';
 export { checkCSSModule } from './checker.js';
-export { type ExportBuilder, createExportBuilder } from './export-builder.js';
-export { join, resolve, relative, dirname, basename, parse, matchesGlob, isAbsolute } from './path.js';
+export { createExportBuilder } from './export-builder.js';
+export { join, resolve, relative, dirname, basename, parse, isAbsolute } from './path.js';
 export { findUsedTokenNames } from './util.js';
+export { convertDiagnostic, convertDiagnosticWithLocation, convertSystemError } from './diagnostic.js';

package/src/parser/at-import-parser.ts

@@ -1,6 +1,6 @@
 import type { AtRule } from 'postcss';
 import postcssValueParser from 'postcss-value-parser';
-import type { Location } from './location.js';
+import type { Location } from '../type.js';
 
 interface ParsedAtImport {
   from: string;

package/src/parser/at-value-parser.ts

@@ -1,6 +1,5 @@
 import type { AtRule } from 'postcss';
-import type { DiagnosticPosition, SyntacticDiagnostic } from '../diagnostic.js';
-import type { Location } from './location.js';
+import type { DiagnosticPosition, DiagnosticWithDetachedLocation, Location } from '../type.js';
 
 interface ValueDeclaration {
   type: 'valueDeclaration';
@@ -25,7 +24,7 @@ type ParsedAtValue = ValueDeclaration | ValueImportDeclaration;
 
 interface ParseAtValueResult {
   atValue?: ParsedAtValue;
-  diagnostics: SyntacticDiagnostic[];
+  diagnostics: DiagnosticWithDetachedLocation[];
 }
 
 const VALUE_IMPORT_PATTERN = /^(.+?)\s+from\s+("[^"]*"|'[^']*')$/du;
@@ -53,7 +52,7 @@ const IMPORTED_ITEM_PATTERN = /^([\w-]+)(?:\s+as\s+([\w-]+))?/du;
 // MEMO: css-modules-kit does not support `@value` with variable module name (e.g., `@value a from moduleName;`) to simplify the implementation.
 export function parseAtValue(atValue: AtRule): ParseAtValueResult {
   const matchesForValueImport = atValue.params.match(VALUE_IMPORT_PATTERN);
-  const diagnostics: SyntacticDiagnostic[] = [];
+  const diagnostics: DiagnosticWithDetachedLocation[] = [];
   if (matchesForValueImport) {
     const [, importedItems, from] = matchesForValueImport as [string, string, string];
     // The length of the `@value  ` part in `@value  import1 from '...'`
@@ -101,15 +100,9 @@ export function parseAtValue(atValue: AtRule): ParseAtValueResult {
           line: atValue.source!.start!.line,
           column: atValue.source!.start!.column + baseLength + currentItemIndex,
         };
-        const end: DiagnosticPosition = {
-          line: start.line,
-          column: start.column + alias.length,
-        };
         diagnostics.push({
-          type: 'syntactic',
-          fileName: atValue.source!.input.file!,
           start,
-          end,
+          length: alias.length,
           text: `\`${alias}\` is invalid syntax.`,
           category: 'error',
         });
@@ -160,16 +153,11 @@ export function parseAtValue(atValue: AtRule): ParseAtValueResult {
     return { atValue: parsedAtValue, diagnostics };
   }
   diagnostics.push({
-    type: 'syntactic',
-    fileName: atValue.source!.input.file!,
     start: {
       line: atValue.source!.start!.line,
       column: atValue.source!.start!.column,
     },
-    end: {
-      line: atValue.source!.end!.line,
-      column: atValue.source!.end!.column + 1,
-    },
+    length: atValue.source!.end!.offset - atValue.source!.start!.offset,
     text: `\`${atValue.toString()}\` is a invalid syntax.`,
     category: 'error',
   });

package/src/parser/css-module-parser.ts

@@ -1,10 +1,15 @@
 import type { AtRule, Node, Root, Rule } from 'postcss';
 import { CssSyntaxError, parse } from 'postcss';
 import safeParser from 'postcss-safe-parser';
-import type { SyntacticDiagnostic } from '../diagnostic.js';
+import type {
+  CSSModule,
+  DiagnosticWithDetachedLocation,
+  DiagnosticWithLocation,
+  Token,
+  TokenImporter,
+} from '../type.js';
 import { parseAtImport } from './at-import-parser.js';
 import { parseAtValue } from './at-value-parser.js';
-import { type Location } from './location.js';
 import { parseRule } from './rule-parser.js';
 
 type AtImport = AtRule & { name: 'import' };
@@ -30,7 +35,7 @@ function isRuleNode(node: Node): node is Rule {
  * Collect tokens from the AST.
  */
 function collectTokens(ast: Root) {
-  const allDiagnostics: SyntacticDiagnostic[] = [];
+  const allDiagnostics: DiagnosticWithDetachedLocation[] = [];
   const localTokens: Token[] = [];
   const tokenImporters: TokenImporter[] = [];
   ast.walk((node) => {
@@ -59,92 +64,6 @@ function collectTokens(ast: Root) {
   return { localTokens, tokenImporters, diagnostics: allDiagnostics };
 }
 
-/** The item being exported from a CSS module file (a.k.a. token). */
-export interface Token {
-  /** The token name. */
-  name: string;
-  /** The location of the token in the source file. */
-  loc: Location;
-}
-
-/**
- * A token importer using `@import '...'`.
- * `@import` imports all tokens from the file. Therefore, it does not have
- * the name of the imported token unlike {@link AtValueTokenImporter}.
- */
-export interface AtImportTokenImporter {
-  type: 'import';
-  /**
-   * The specifier of the file from which the token is imported.
-   * This is a string before being resolved and unquoted.
-   * @example `@import './a.module.css'` would have `from` as `'./a.module.css'`.
-   */
-  from: string;
-  /** The location of the `from` in *.module.css file. */
-  fromLoc: Location;
-}
-
-/** A token importer using `@value ... from '...'`. */
-export interface AtValueTokenImporter {
-  type: 'value';
-  /** The values imported from the file. */
-  values: AtValueTokenImporterValue[];
-  /**
-   * The specifier of the file from which the token is imported.
-   * This is a string before being resolved and unquoted.
-   * @example `@value a from './a.module.css'` would have `from` as `'./a.module.css'`.
-   */
-  from: string;
-  /** The location of the `from` in *.module.css file. */
-  fromLoc: Location;
-}
-
-/** A value imported from a CSS module file using `@value ... from '...'`. */
-export interface AtValueTokenImporterValue {
-  /**
-   * The name of the token in the file from which it is imported.
-   * @example `@value a from './a.module.css'` would have `name` as `'a'`.
-   * @example `@value a as b from './a.module.css'` would have `name` as `'a'`.
-   */
-  name: string;
-  /** The location of the `name` in *.module.css file. */
-  loc: Location;
-  /**
-   * The name of the token in the current file.
-   * @example `@value a from './a.module.css'` would not have `localName`.
-   * @example `@value a as b from './a.module.css'` would have `localName` as `'b'`.
-   */
-  localName?: string;
-  /**
-   * The location of the `localName` in *.module.css file.
-   * This is `undefined` when `localName` is `undefined`.
-   */
-  localLoc?: Location;
-}
-
-export type TokenImporter = AtImportTokenImporter | AtValueTokenImporter;
-
-export interface CSSModule {
-  /** Absolute path of the file */
-  fileName: string;
-  /**
-   * List of token names defined in the file.
-   * @example
-   * Consider the following file:
-   * ```css
-   * .foo { color: red }
-   * .bar, .baz { color: red }
-   * ```
-   * The `localTokens` for this file would be `['foo', 'bar', 'baz']`.
-   */
-  localTokens: Token[];
-  /**
-   * List of token importers in the file.
-   * Token importer is a statement that imports tokens from another file.
-   */
-  tokenImporters: TokenImporter[];
-}
-
 export interface ParseCSSModuleOptions {
   fileName: string;
   safe: boolean;
@@ -152,11 +71,12 @@ export interface ParseCSSModuleOptions {
 
 export interface ParseCSSModuleResult {
   cssModule: CSSModule;
-  diagnostics: SyntacticDiagnostic[];
+  diagnostics: DiagnosticWithLocation[];
 }
 
 export function parseCSSModule(text: string, { fileName, safe }: ParseCSSModuleOptions): ParseCSSModuleResult {
   let ast: Root;
+  const diagnosticSourceFile = { fileName, text };
   try {
     const parser = safe ? safeParser : parse;
     ast = parser(text, { from: fileName });
@@ -164,16 +84,13 @@ export function parseCSSModule(text: string, { fileName, safe }: ParseCSSModuleO
     if (e instanceof CssSyntaxError) {
       const start = { line: e.line ?? 1, column: e.column ?? 1 };
       return {
-        cssModule: { fileName, localTokens: [], tokenImporters: [] },
+        cssModule: { fileName, text, localTokens: [], tokenImporters: [] },
         diagnostics: [
           {
-            type: 'syntactic',
-            fileName,
+            file: diagnosticSourceFile,
             start,
-            ...(e.endLine !== undefined &&
-              e.endColumn !== undefined && {
-                end: { line: e.endLine, column: e.endColumn },
-              }),
+            // TODO: Assign correct length (e.g. `e.endOffset - e.offset`)
+            length: 1,
             text: e.reason,
             category: 'error',
           },
@@ -185,8 +102,9 @@ export function parseCSSModule(text: string, { fileName, safe }: ParseCSSModuleO
   const { localTokens, tokenImporters, diagnostics } = collectTokens(ast);
   const cssModule = {
     fileName,
+    text,
     localTokens,
     tokenImporters,
   };
-  return { cssModule, diagnostics };
+  return { cssModule, diagnostics: diagnostics.map((diagnostic) => ({ ...diagnostic, file: diagnosticSourceFile })) };
 }

package/src/parser/rule-parser.ts

@@ -1,16 +1,25 @@
 import type { Rule } from 'postcss';
 import selectorParser from 'postcss-selector-parser';
-import type { SyntacticDiagnostic } from '../diagnostic.js';
-import { calcDiagnosticsLocationForSelectorParserNode, type Location } from './location.js';
+import type { DiagnosticPosition, DiagnosticWithDetachedLocation, Location } from '../type.js';
+
+function calcDiagnosticsLocationForSelectorParserNode(
+  rule: Rule,
+  node: selectorParser.Node,
+): { start: DiagnosticPosition; length: number } {
+  const start = rule.positionBy({ index: node.sourceIndex });
+  const length = node.toString().length;
+  return { start, length };
+}
+export { calcDiagnosticsLocationForSelectorParserNode as calcDiagnosticsLocationForSelectorParserNodeForTest };
 
 interface CollectResult {
   classNames: selectorParser.ClassName[];
-  diagnostics: SyntacticDiagnostic[];
+  diagnostics: DiagnosticWithDetachedLocation[];
 }
 
 function flatCollectResults(results: CollectResult[]): CollectResult {
   const classNames: selectorParser.ClassName[] = [];
-  const diagnostics: SyntacticDiagnostic[] = [];
+  const diagnostics: DiagnosticWithDetachedLocation[] = [];
   for (const result of results) {
     classNames.push(...result.classNames);
     diagnostics.push(...result.diagnostics);
@@ -25,9 +34,7 @@ function convertClassNameToCollectResult(rule: Rule, node: selectorParser.ClassN
   const name = (node as any).raws?.value ?? node.value;
 
   if (!JS_IDENTIFIER_PATTERN.test(name)) {
-    const diagnostic: SyntacticDiagnostic = {
-      type: 'syntactic',
-      fileName: rule.source!.input.file!,
+    const diagnostic: DiagnosticWithDetachedLocation = {
       ...calcDiagnosticsLocationForSelectorParserNode(rule, node),
       text: `\`${name}\` is not allowed because it is not a valid JavaScript identifier.`,
       category: 'error',
@@ -67,9 +74,7 @@ function collectLocalClassNames(rule: Rule, root: selectorParser.Root): CollectR
       if (node.nodes.length === 0) {
         // `node` is `:local` or `:global` (without any arguments)
         // We don't support `:local` and `:global` (without any arguments) because they are complex.
-        const diagnostic: SyntacticDiagnostic = {
-          type: 'syntactic',
-          fileName: rule.source!.input.file!,
+        const diagnostic: DiagnosticWithDetachedLocation = {
           ...calcDiagnosticsLocationForSelectorParserNode(rule, node),
           text: `\`${node.value}\` is not supported. Use \`${node.value}(...)\` instead.`,
           category: 'error',
@@ -78,9 +83,7 @@ function collectLocalClassNames(rule: Rule, root: selectorParser.Root): CollectR
       } else {
         // `node` is `:local(...)` or `:global(...)` (with arguments)
         if (wrappedBy !== undefined) {
-          const diagnostic: SyntacticDiagnostic = {
-            type: 'syntactic',
-            fileName: rule.source!.input.file!,
+          const diagnostic: DiagnosticWithDetachedLocation = {
             ...calcDiagnosticsLocationForSelectorParserNode(rule, node),
             text: `A \`${node.value}(...)\` is not allowed inside of \`${wrappedBy}\`.`,
             category: 'error',
@@ -107,7 +110,7 @@ interface ClassSelector {
 
 interface ParseRuleResult {
   classSelectors: ClassSelector[];
-  diagnostics: SyntacticDiagnostic[];
+  diagnostics: DiagnosticWithDetachedLocation[];
 }
 
 /**

package/src/path.ts

@@ -33,8 +33,5 @@ export function parse(path: string): ParsedPath {
   return { root: slash(root), dir: slash(dir), base, name, ext };
 }
 
-// eslint-disable-next-line n/no-unsupported-features/node-builtins, @typescript-eslint/unbound-method
-export const matchesGlob = nodePath.matchesGlob;
-
 // eslint-disable-next-line @typescript-eslint/unbound-method
 export const isAbsolute = nodePath.isAbsolute;

package/src/resolver.ts

@@ -2,21 +2,12 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 import type { CompilerOptions } from 'typescript';
 import ts from 'typescript';
 import { isAbsolute, resolve } from './path.js';
+import type { Resolver, ResolverOptions } from './type.js';
 
-export interface ResolverOptions {
-  /** The file that imports the specifier. It is a absolute path. */
-  request: string;
-}
-
-/**
- * A resolver function that resolves import specifiers.
- * @param specifier The import specifier.
- * @param options The options.
- * @returns The resolved import specifier. It is a absolute path. If the import specifier cannot be resolved, return `undefined`.
- */
-export type Resolver = (specifier: string, options: ResolverOptions) => string | undefined;
-
-export function createResolver(compilerOptions: CompilerOptions): Resolver {
+export function createResolver(
+  compilerOptions: CompilerOptions,
+  moduleResolutionCache: ts.ModuleResolutionCache | undefined,
+): Resolver {
   return (_specifier: string, options: ResolverOptions) => {
     let specifier = _specifier;
 
@@ -29,7 +20,13 @@ export function createResolver(compilerOptions: CompilerOptions): Resolver {
         return ts.sys.fileExists(fileName);
       },
     };
-    const { resolvedModule } = ts.resolveModuleName(specifier, options.request, compilerOptions, host);
+    const { resolvedModule } = ts.resolveModuleName(
+      specifier,
+      options.request,
+      compilerOptions,
+      host,
+      moduleResolutionCache,
+    );
     if (resolvedModule) {
       // TODO: Logging that the paths is used.
       specifier = resolvedModule.resolvedFileName.replace(/\.module\.d\.css\.ts$/u, '.module.css');