@css-modules-kit/core 0.0.5 → 0.2.0

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/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');

package/src/type.ts

@@ -0,0 +1,191 @@
+/** The position of the node in the source file. */
+export interface Position {
+  /**
+   * The line number in the source file. It is 1-based.
+   * This is compatible with postcss and tsserver.
+   */
+  line: number;
+  /**
+   * The column number in the source file. It is 1-based.
+   * This is compatible with postcss and tsserver.
+   */
+  column: number;
+  /** The offset in the source file. It is 0-based. */
+  offset: number;
+}
+
+/** The location of the node in the source file. */
+export interface Location {
+  /**
+   * The starting position of the node. It is inclusive.
+   * This is compatible with postcss and tsserver.
+   */
+  start: Position;
+  /**
+   * The ending position of the node. It is exclusive.
+   * This is compatible with tsserver, but not postcss.
+   */
+  end: Position;
+}
+
+/** 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;
+  /** The content of the file */
+  text: 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 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;
+
+/**
+ * A function that checks if a file name matches a pattern.
+ * @param fileName The file name. It is an absolute path.
+ * @returns `true` if the file name matches the pattern, otherwise `false`.
+ */
+export type MatchesPattern = (fileName: string) => boolean;
+
+/** 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;
+}
+
+export type DiagnosticCategory = 'error' | 'warning';
+
+export interface DiagnosticSourceFile {
+  fileName: string;
+  text: string;
+}
+
+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;
+}
+
+interface DiagnosticWithoutLocation {
+  /** Text of diagnostic message. */
+  text: string;
+  /** The category of the diagnostic message. */
+  category: DiagnosticCategory;
+}
+
+export interface DiagnosticWithLocation extends DiagnosticWithoutLocation {
+  /** The file in which the diagnostic occurred */
+  file: DiagnosticSourceFile;
+  /** Starting file position at which text applies. It is inclusive. */
+  start: DiagnosticPosition;
+  /** Length of the diagnostic. */
+  length: number;
+}
+
+export type Diagnostic = DiagnosticWithLocation | DiagnosticWithoutLocation;
+
+/**
+ * A diagnostic with location information detached from the source file.
+ * It is an intermediate representation used inside the CSS Module parser.
+ */
+export interface DiagnosticWithDetachedLocation extends DiagnosticWithoutLocation {
+  /** Starting file position at which text applies. It is inclusive. */
+  start: DiagnosticPosition;
+  /** Length of the diagnostic. */
+  length: number;
+}

package/src/util.ts

@@ -1,3 +1,21 @@
 export function isPosixRelativePath(path: string): boolean {
   return path.startsWith(`./`) || path.startsWith(`../`);
 }
+
+/**
+ * The syntax pattern for consuming tokens imported from CSS Module.
+ * @example `styles.foo`
+ */
+// TODO(#125): Support `styles['foo']` and `styles["foo"]`
+// MEMO: The `xxxStyles.foo` format is not supported, because the css module file for current component file is usually imported with `styles`.
+//       It is sufficient to support only the `styles.foo` format.
+const TOKEN_CONSUMER_PATTERN = /styles\.([$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*)/gu;
+
+export function findUsedTokenNames(componentText: string): Set<string> {
+  const usedClassNames = new Set<string>();
+  let match;
+  while ((match = TOKEN_CONSUMER_PATTERN.exec(componentText)) !== null) {
+    usedClassNames.add(match[1]!);
+  }
+  return usedClassNames;
+}

package/dist/parser/location.d.ts

@@ -1,34 +0,0 @@
-import type { Rule } from 'postcss';
-import type selectorParser from 'postcss-selector-parser';
-import type { DiagnosticPosition } from '../diagnostic.js';
-export interface Position {
-    /**
-     * The line number in the source file. It is 1-based.
-     * This is compatible with postcss and tsserver.
-     */
-    line: number;
-    /**
-     * The column number in the source file. It is 1-based.
-     * This is compatible with postcss and tsserver.
-     */
-    column: number;
-    /** The offset in the source file. It is 0-based. */
-    offset: number;
-}
-export interface Location {
-    /**
-     * The starting position of the node. It is inclusive.
-     * This is compatible with postcss and tsserver.
-     */
-    start: Position;
-    /**
-     * The ending position of the node. It is exclusive.
-     * This is compatible with tsserver, but not postcss.
-     */
-    end: Position;
-}
-export declare function calcDiagnosticsLocationForSelectorParserNode(rule: Rule, node: selectorParser.Node): {
-    start: DiagnosticPosition;
-    end: DiagnosticPosition;
-};
-//# sourceMappingURL=location.d.ts.map

package/dist/parser/location.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"location.d.ts","sourceRoot":"","sources":["../../src/parser/location.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,KAAK,cAAc,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,WAAW,QAAQ;IACvB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB;;;OAGG;IACH,KAAK,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,GAAG,EAAE,QAAQ,CAAC;CACf;AAED,wBAAgB,4CAA4C,CAC1D,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,cAAc,CAAC,IAAI,GACxB;IAAE,KAAK,EAAE,kBAAkB,CAAC;IAAC,GAAG,EAAE,kBAAkB,CAAA;CAAE,CAIxD"}

package/dist/parser/location.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcDiagnosticsLocationForSelectorParserNode = calcDiagnosticsLocationForSelectorParserNode;
-function calcDiagnosticsLocationForSelectorParserNode(rule, node) {
-    const start = rule.positionBy({ index: node.sourceIndex });
-    const end = rule.positionBy({ index: node.sourceIndex + node.toString().length });
-    return { start, end };
-}
-//# sourceMappingURL=location.js.map

package/dist/parser/location.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"location.js","sourceRoot":"","sources":["../../src/parser/location.ts"],"names":[],"mappings":";;AAgCA,oGAOC;AAPD,SAAgB,4CAA4C,CAC1D,IAAU,EACV,IAAyB;IAEzB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC;IAClF,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AACxB,CAAC"}

package/src/parser/location.ts

@@ -1,40 +0,0 @@
-import type { Rule } from 'postcss';
-import type selectorParser from 'postcss-selector-parser';
-import type { DiagnosticPosition } from '../diagnostic.js';
-
-export interface Position {
-  /**
-   * The line number in the source file. It is 1-based.
-   * This is compatible with postcss and tsserver.
-   */
-  line: number;
-  /**
-   * The column number in the source file. It is 1-based.
-   * This is compatible with postcss and tsserver.
-   */
-  column: number;
-  /** The offset in the source file. It is 0-based. */
-  offset: number;
-}
-
-export interface Location {
-  /**
-   * The starting position of the node. It is inclusive.
-   * This is compatible with postcss and tsserver.
-   */
-  start: Position;
-  /**
-   * The ending position of the node. It is exclusive.
-   * This is compatible with tsserver, but not postcss.
-   */
-  end: Position;
-}
-
-export function calcDiagnosticsLocationForSelectorParserNode(
-  rule: Rule,
-  node: selectorParser.Node,
-): { start: DiagnosticPosition; end: DiagnosticPosition } {
-  const start = rule.positionBy({ index: node.sourceIndex });
-  const end = rule.positionBy({ index: node.sourceIndex + node.toString().length });
-  return { start, end };
-}