@css-modules-kit/core 0.0.5 → 0.2.0

package/src/checker.ts

@@ -1,13 +1,13 @@
-import type { SemanticDiagnostic } from './diagnostic.js';
-import type { ExportBuilder } from './export-builder.js';
-import type { MatchesPattern } from './file.js';
 import type {
   AtValueTokenImporter,
   AtValueTokenImporterValue,
   CSSModule,
+  Diagnostic,
+  ExportBuilder,
+  MatchesPattern,
+  Resolver,
   TokenImporter,
-} from './parser/css-module-parser.js';
-import type { Resolver } from './resolver.js';
+} from './type.js';
 
 export function checkCSSModule(
   cssModule: CSSModule,
@@ -15,8 +15,8 @@ export function checkCSSModule(
   matchesPattern: MatchesPattern,
   resolver: Resolver,
   getCSSModule: (path: string) => CSSModule | undefined,
-): SemanticDiagnostic[] {
-  const diagnostics: SemanticDiagnostic[] = [];
+): Diagnostic[] {
+  const diagnostics: Diagnostic[] = [];
 
   for (const tokenImporter of cssModule.tokenImporters) {
     const from = resolver(tokenImporter.from, { request: cssModule.fileName });
@@ -39,14 +39,13 @@ export function checkCSSModule(
   return diagnostics;
 }
 
-function createCannotImportModuleDiagnostic(cssModule: CSSModule, tokenImporter: TokenImporter): SemanticDiagnostic {
+function createCannotImportModuleDiagnostic(cssModule: CSSModule, tokenImporter: TokenImporter): Diagnostic {
   return {
-    type: 'semantic',
     text: `Cannot import module '${tokenImporter.from}'`,
     category: 'error',
-    fileName: cssModule.fileName,
+    file: { fileName: cssModule.fileName, text: cssModule.text },
     start: { line: tokenImporter.fromLoc.start.line, column: tokenImporter.fromLoc.start.column },
-    end: { line: tokenImporter.fromLoc.end.line, column: tokenImporter.fromLoc.end.column },
+    length: tokenImporter.fromLoc.end.offset - tokenImporter.fromLoc.start.offset,
   };
 }
 
@@ -54,13 +53,12 @@ function createModuleHasNoExportedTokenDiagnostic(
   cssModule: CSSModule,
   tokenImporter: AtValueTokenImporter,
   value: AtValueTokenImporterValue,
-): SemanticDiagnostic {
+): Diagnostic {
   return {
-    type: 'semantic',
     text: `Module '${tokenImporter.from}' has no exported token '${value.name}'.`,
     category: 'error',
-    fileName: cssModule.fileName,
+    file: { fileName: cssModule.fileName, text: cssModule.text },
     start: { line: value.loc.start.line, column: value.loc.start.column },
-    end: { line: value.loc.end.line, column: value.loc.end.column },
+    length: value.loc.end.offset - value.loc.start.offset,
   };
 }

package/src/config.ts

@@ -1,7 +1,7 @@
 import ts from 'typescript';
-import type { SemanticDiagnostic } from './diagnostic.js';
 import { TsConfigFileNotFoundError } from './error.js';
 import { basename, dirname, join, resolve } from './path.js';
+import type { Diagnostic } from './type.js';
 
 // https://github.com/microsoft/TypeScript/blob/caf1aee269d1660b4d2a8b555c2d602c97cb28d7/src/compiler/commandLineParser.ts#L3006
 const DEFAULT_INCLUDE_SPEC = '**/*';
@@ -60,7 +60,7 @@ export interface CMKConfig {
   configFileName: string;
   compilerOptions: ts.CompilerOptions;
   /** The diagnostics that occurred while reading the config file. */
-  diagnostics: SemanticDiagnostic[];
+  diagnostics: Diagnostic[];
 }
 
 /**
@@ -79,7 +79,7 @@ interface UnnormalizedRawConfig {
  */
 interface ParsedRawData {
   config: UnnormalizedRawConfig;
-  diagnostics: SemanticDiagnostic[];
+  diagnostics: Diagnostic[];
 }
 
 export function findTsConfigFile(project: string): string | undefined {
@@ -91,7 +91,7 @@ export function findTsConfigFile(project: string): string | undefined {
   return resolve(configFile);
 }
 
-function parseRawData(raw: unknown, configFileName: string): ParsedRawData {
+function parseRawData(raw: unknown, tsConfigSourceFile: ts.TsConfigSourceFile): ParsedRawData {
   const result: ParsedRawData = {
     config: {
       includes: undefined,
@@ -126,10 +126,9 @@ function parseRawData(raw: unknown, configFileName: string): ParsedRawData {
         result.config.dtsOutDir = raw.cmkOptions.dtsOutDir;
       } else {
         result.diagnostics.push({
-          type: 'semantic',
           category: 'error',
-          text: '`dtsOutDir` must be a string.',
-          fileName: configFileName,
+          text: `\`dtsOutDir\` in ${tsConfigSourceFile.fileName} must be a string.`,
+          // MEMO: Location information can be obtained from `tsConfigSourceFile.statements`, but this is complicated and will be omitted.
         });
       }
     }
@@ -138,10 +137,9 @@ function parseRawData(raw: unknown, configFileName: string): ParsedRawData {
         result.config.arbitraryExtensions = raw.cmkOptions.arbitraryExtensions;
       } else {
         result.diagnostics.push({
-          type: 'semantic',
           category: 'error',
-          text: '`arbitraryExtensions` must be a boolean.',
-          fileName: configFileName,
+          text: `\`arbitraryExtensions\` in ${tsConfigSourceFile.fileName} must be a boolean.`,
+          // MEMO: Location information can be obtained from `tsConfigSourceFile.statements`, but this is complicated and will be omitted.
         });
       }
     }
@@ -168,7 +166,7 @@ export function readTsConfigFile(project: string): {
   configFileName: string;
   config: UnnormalizedRawConfig;
   compilerOptions: ts.CompilerOptions;
-  diagnostics: SemanticDiagnostic[];
+  diagnostics: Diagnostic[];
 } {
   const configFileName = findTsConfigFile(project);
   if (!configFileName) throw new TsConfigFileNotFoundError();
@@ -195,7 +193,7 @@ export function readTsConfigFile(project: string): {
     ],
   );
   // Read options from `parsedCommandLine.raw`
-  let parsedRawData = parseRawData(parsedCommandLine.raw, configFileName);
+  let parsedRawData = parseRawData(parsedCommandLine.raw, tsConfigSourceFile);
 
   // The options read from `parsedCommandLine.raw` do not inherit values from the file specified in `extends`.
   // So here we read the options from those files and merge them into `parsedRawData`.

package/src/diagnostic.ts

@@ -1,37 +1,77 @@
-export type DiagnosticCategory = 'error' | 'warning';
+import ts from 'typescript';
+import type { SystemError } from './error.js';
+import type { Diagnostic, DiagnosticSourceFile, DiagnosticWithLocation } from './type.js';
 
-export interface DiagnosticPosition {
-  /** The line number in the source file. It is 1-based. */
-  line: number;
-  /** The column number in the source file. It is 1-based. */
-  column: number;
-}
+/** The error code used by tsserver to display the css-modules-kit error in the editor. */
+const TS_ERROR_CODE = 0;
+
+const TS_ERROR_SOURCE = 'css-modules-kit';
 
-export type Diagnostic = SemanticDiagnostic | SyntacticDiagnostic;
+function convertErrorCategory(category: 'error' | 'warning' | 'suggestion'): ts.DiagnosticCategory {
+  switch (category) {
+    case 'error':
+      return ts.DiagnosticCategory.Error;
+    case 'warning':
+      return ts.DiagnosticCategory.Warning;
+    case 'suggestion':
+      return ts.DiagnosticCategory.Suggestion;
+    default:
+      throw new Error(`Unknown category: ${String(category)}`);
+  }
+}
 
-interface DiagnosticBase {
-  /** Text of diagnostic message. */
-  text: string;
-  /** The category of the diagnostic message. */
-  category: DiagnosticCategory;
+export function convertDiagnostic(
+  diagnostic: Diagnostic,
+  getSourceFile: (file: DiagnosticSourceFile) => ts.SourceFile,
+): ts.Diagnostic {
+  if ('file' in diagnostic) {
+    return convertDiagnosticWithLocation(diagnostic, getSourceFile);
+  } else {
+    return {
+      file: undefined,
+      start: undefined,
+      length: undefined,
+      category: convertErrorCategory(diagnostic.category),
+      messageText: diagnostic.text,
+      code: TS_ERROR_CODE,
+      source: TS_ERROR_SOURCE,
+    };
+  }
 }
 
-export interface SemanticDiagnostic extends DiagnosticBase {
-  type: 'semantic';
-  /** The filename of the file in which the diagnostic occurred */
-  fileName?: string;
-  /** Starting file position at which text applies. It is inclusive. */
-  start?: DiagnosticPosition;
-  /**  The last file position at which the text applies. It is exclusive. */
-  end?: DiagnosticPosition;
+export function convertDiagnosticWithLocation(
+  diagnostic: DiagnosticWithLocation,
+  getSourceFile: (file: DiagnosticSourceFile) => ts.SourceFile,
+): ts.DiagnosticWithLocation {
+  const sourceFile = getSourceFile(diagnostic.file);
+  const start = ts.getPositionOfLineAndCharacter(sourceFile, diagnostic.start.line - 1, diagnostic.start.column - 1);
+  return {
+    file: sourceFile,
+    start,
+    length: diagnostic.length,
+    category: convertErrorCategory(diagnostic.category),
+    messageText: diagnostic.text,
+    code: TS_ERROR_CODE,
+    source: TS_ERROR_SOURCE,
+  };
 }
 
-export interface SyntacticDiagnostic extends DiagnosticBase {
-  type: 'syntactic';
-  /** The filename of the file in which the diagnostic occurred */
-  fileName: string;
-  /** Starting file position at which text applies. It is inclusive. */
-  start: DiagnosticPosition;
-  /**  The last file position at which the text applies. It is exclusive. */
-  end?: DiagnosticPosition;
+export function convertSystemError(systemError: SystemError): ts.Diagnostic {
+  let messageText = systemError.message;
+  if (systemError.cause) {
+    if (systemError.cause instanceof Error) {
+      messageText += `: ${systemError.cause.message}`;
+    } else {
+      messageText += `: ${JSON.stringify(systemError.cause)}`;
+    }
+  }
+  return {
+    file: undefined,
+    start: undefined,
+    length: undefined,
+    category: ts.DiagnosticCategory.Error,
+    messageText,
+    code: TS_ERROR_CODE,
+    source: TS_ERROR_SOURCE,
+  };
 }

package/src/dts-creator.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, MatchesPattern, Resolver } from './type.js';
 
 export const STYLES_EXPORT_NAME = 'styles';
 

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'];
@@ -36,7 +37,22 @@ export async function findComponentFile(
   return undefined;
 }
 
-export type MatchesPattern = (fileName: string) => boolean;
+export function findComponentFileSync(
+  cssModuleFileName: string,
+  readFileSync: (path: string) => string,
+): { fileName: string; text: string } | undefined {
+  const pathWithoutExtension = cssModuleFileName.slice(0, -CSS_MODULE_EXTENSION.length);
+  for (const path of COMPONENT_EXTENSIONS.map((ext) => pathWithoutExtension + ext)) {
+    try {
+      // TODO: Cache the result of readFile
+      const text = readFileSync(path);
+      return { fileName: path, text };
+    } catch {
+      continue;
+    }
+  }
+  return undefined;
+}
 
 /**
  * Create a function that checks whether the given file name matches the pattern.

package/src/index.ts

@@ -1,38 +1,40 @@
 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,
   isComponentFileName,
   isCSSModuleFile,
   findComponentFile,
-  type MatchesPattern,
+  findComponentFileSync,
   createMatchesPattern,
   getFileNamesByPattern,
 } from './file.js';
 export { checkCSSModule } from './checker.js';
-export { type ExportBuilder, createExportBuilder } from './export-builder.js';
+export { createExportBuilder } from './export-builder.js';
 export { join, resolve, relative, dirname, basename, parse, matchesGlob, 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 })) };
 }