honey-css-modules/インターフェイス

はじめに

まず作るものの全体像を把握する。今回作る必要があるのは全部で 3 つ。

その TypeScript Language Server Plugin を組み込んだ VS Code Extension (vscode-extension)

tsserver は通常 JavaScript ファイルや TypeScript ファイルのみを解析する

honey-css-modules でも、これと同じことをやらないといけないはず

cli

基本は happy-css-modules を踏襲したら良かろう

こういう感じかな

code:interface.d.ts

// 設定の型

interface HCMConfig {

pattern: string;

dtsOutDir: string;

resolver?: Resolver | undefined;

alias?: Record<string, string> | undefined;

arbitraryExtensions?: boolean | undefined;

logLevel?: 'debug' | 'info' | 'silent' | undefined;

cwd?: string | undefined;

}

function defineConfig(config: HCMConfig): HCMConfig;

// 型定義ファイルを生成する処理を実行する

function runDtsGenerator(config: HCMConfig): Promise<void>;

// Resolver

interface ResolverOptions {

request: string;

};

type Resolver = (specifier: string, options: ResolverOptions) => string | false | Promise<string | false>;

interface DefaultResolverOptions {

alias?: Record<string, string> | undefined;

}

function createDefaultResolver(options: DefaultResolverOptions): Resolver;

// CSS Module ファイルをパースする部分のインターフェイス

interface CSSModuleFile {

/** ファイルの絶対パス */

filename: string;

/**

* ファイル内で定義している token の名前のリスト。

*/

localTokens: string[];

/**

* ファイル内で @import している他の CSS Module ファイルの speficier。

*/

imports: string[];

}

function parseCSSModuleCode(code: string, filename: string): CSSModuleFile;

// 型定義ファイルを生成する部分のインターフェイス

interface CreateDtsCodeOptions {

resolver: Resolver,

isExternalFile: (filename: string) => boolean,

}

function createDtsCode(

cssModuleFile: CSSModuleFile,

options: CreateDtsCodeOptions,

): string;

// 型定義ファイルをファイルシステムに書き込む部分のインターフェイス

interface WriteDtsFileOption {

outDir: string;

cwd: string;

arbitraryExtensions: boolean;

}

function writeDtsFile(

dtsCode: string,

options: WriteDtsFileOption,

): Promise<void>;

happy-css-modules ではコマンドライン引数で設定を渡していたが、honey-css-modules では設定ファイルを導入して、そのファイルを経由して設定を渡したい

honey-css-modules は CLI ツールと typescript-plugin の両方があるので、2つから同じ設定を読めるようにしたという狙い

code:hcm.config.js

import { defineConfig } from 'honey-css-modules';

export default defineConfig({

pattern: 'src/**.module.css',

dtsOutDir: 'generated/hcm',

alias: { '@': path.resolve(import.meta.dirname, 'src') },

});

Vite っぽくイマドキな感じにしておく

typescript-plugin

それ以外のケースでは何もしない

vscode-extension