feat: add cmkOptions.keyframes

Author: mizdra

README.md

@@ -198,6 +198,23 @@ When this option is `true`, `import { button } from '...'` will be added. When t
 }
 ```
 
+### `cmkOptions.keyframes`
+
+Type: `boolean`, Default: `true`
+
+Determines whether to generate the [token](docs/glossary.md#token) of keyframes in the d.ts file.
+
+```jsonc
+{
+  "compilerOptions": {
+    // ...
+  },
+  "cmkOptions": {
+    "keyframes": false,
+  },
+}
+```
+
 ## Supported CSS Modules features
 
 - `:local(...)` and `:global(...)`

packages/codegen/src/runner.ts

@@ -27,14 +27,14 @@ import type { Logger } from './logger/logger.js';
 /**
  * @throws {ReadCSSModuleFileError} When failed to read CSS Module file.
  */
-async function parseCSSModuleByFileName(fileName: string): Promise<ParseCSSModuleResult> {
+async function parseCSSModuleByFileName(fileName: string, config: CMKConfig): Promise<ParseCSSModuleResult> {
   let text: string;
   try {
     text = await readFile(fileName, 'utf-8');
   } catch (error) {
     throw new ReadCSSModuleFileError(fileName, error);
   }
-  return parseCSSModule(text, { fileName, safe: false });
+  return parseCSSModule(text, { fileName, safe: false, keyframes: config.keyframes });
 }
 
 /**
@@ -95,7 +95,7 @@ export async function runCMK(args: ParsedArgs, logger: Logger): Promise<void> {
     ]);
     return;
   }
-  const parseResults = await Promise.all(fileNames.map(async (fileName) => parseCSSModuleByFileName(fileName)));
+  const parseResults = await Promise.all(fileNames.map(async (fileName) => parseCSSModuleByFileName(fileName, config)));
   for (const parseResult of parseResults) {
     cssModuleMap.set(parseResult.cssModule.fileName, parseResult.cssModule);
     syntacticDiagnostics.push(...parseResult.diagnostics);

packages/core/src/config.test.ts

@@ -30,7 +30,8 @@ describe('readTsConfigFile', () => {
             "dtsOutDir": "generated/cmk",
             "arbitraryExtensions": false,
             "namedExports": true,
-            "prioritizeNamedImports": true
+            "prioritizeNamedImports": true,
+            "keyframes": false
           }
         }
       `,
@@ -44,6 +45,7 @@ describe('readTsConfigFile', () => {
         arbitraryExtensions: false,
         namedExports: true,
         prioritizeNamedImports: true,
+        keyframes: false,
       },
       compilerOptions: expect.objectContaining({
         module: ts.ModuleKind.ESNext,

packages/core/src/config.ts

@@ -17,6 +17,7 @@ export interface CMKConfig {
   arbitraryExtensions: boolean;
   namedExports: boolean;
   prioritizeNamedImports: boolean;
+  keyframes: boolean;
   /**
    * A root directory to resolve relative path entries in the config file to.
    * This is an absolute path.
@@ -72,6 +73,7 @@ interface UnnormalizedRawConfig {
   arbitraryExtensions?: boolean;
   namedExports?: boolean;
   prioritizeNamedImports?: boolean;
+  keyframes?: boolean;
 }
 
 /**
@@ -138,6 +140,16 @@ function parseRawData(raw: unknown, tsConfigSourceFile: ts.TsConfigSourceFile):
         });
       }
     }
+    if ('keyframes' in raw.cmkOptions) {
+      if (typeof raw.cmkOptions.keyframes === 'boolean') {
+        result.config.keyframes = raw.cmkOptions.keyframes;
+      } else {
+        result.diagnostics.push({
+          category: 'error',
+          text: `\`keyframes\` in ${tsConfigSourceFile.fileName} must be a boolean.`,
+        });
+      }
+    }
     if ('namedExports' in raw.cmkOptions) {
       if (typeof raw.cmkOptions.namedExports === 'boolean') {
         result.config.namedExports = raw.cmkOptions.namedExports;
@@ -247,14 +259,15 @@ export function readConfigFile(project: string): CMKConfig {
   const { configFileName, config, compilerOptions, diagnostics } = readTsConfigFile(project);
   const basePath = dirname(configFileName);
   return {
-    // If `include` is not specified, fallback to the default include spec.
+    // If `include` is not specified, fallback to the default include spec。
     // ref: https://github.com/microsoft/TypeScript/blob/caf1aee269d1660b4d2a8b555c2d602c97cb28d7/src/compiler/commandLineParser.ts#L3102
     includes: (config.includes ?? [DEFAULT_INCLUDE_SPEC]).map((i) => join(basePath, i)),
     excludes: (config.excludes ?? []).map((e) => join(basePath, e)),
     dtsOutDir: join(basePath, config.dtsOutDir ?? 'generated'),
     arbitraryExtensions: config.arbitraryExtensions ?? false,
     namedExports: config.namedExports ?? false,
     prioritizeNamedImports: config.prioritizeNamedImports ?? false,
+    keyframes: config.keyframes ?? true,
     basePath,
     configFileName,
     compilerOptions,

packages/core/src/parser/css-module-parser.test.ts

@@ -2,7 +2,7 @@ import dedent from 'dedent';
 import { describe, expect, test } from 'vitest';
 import { parseCSSModule, type ParseCSSModuleOptions } from './css-module-parser.js';
 
-const options: ParseCSSModuleOptions = { fileName: '/test.module.css', safe: false };
+const options: ParseCSSModuleOptions = { fileName: '/test.module.css', safe: false, keyframes: true };
 
 describe('parseCSSModule', () => {
   test('collects local tokens', () => {
@@ -789,4 +789,8 @@ describe('parseCSSModule', () => {
       }
     `);
   });
+  test('does not include the token of keyframes if keyframes is false', () => {
+    const parsed = parseCSSModule('@keyframes slide-in {}', { ...options, keyframes: false });
+    expect(parsed.cssModule.localTokens).toMatchInlineSnapshot(`[]`);
+  });
 });

packages/core/src/parser/css-module-parser.ts

@@ -40,7 +40,7 @@ function isRuleNode(node: Node): node is Rule {
 /**
  * Collect tokens from the AST.
  */
-function collectTokens(ast: Root) {
+function collectTokens(ast: Root, keyframes: boolean) {
   const allDiagnostics: DiagnosticWithDetachedLocation[] = [];
   const localTokens: Token[] = [];
   const tokenImporters: TokenImporter[] = [];
@@ -59,7 +59,7 @@ function collectTokens(ast: Root) {
       } else if (atValue.type === 'valueImportDeclaration') {
         tokenImporters.push({ ...atValue, type: 'value' });
       }
-    } else if (isAtKeyframesNode(node)) {
+    } else if (keyframes && isAtKeyframesNode(node)) {
       const { keyframe, diagnostics } = parseAtKeyframes(node);
       allDiagnostics.push(...diagnostics);
       if (keyframe) {
@@ -79,14 +79,18 @@ function collectTokens(ast: Root) {
 export interface ParseCSSModuleOptions {
   fileName: string;
   safe: boolean;
+  keyframes: boolean;
 }
 
 export interface ParseCSSModuleResult {
   cssModule: CSSModule;
   diagnostics: DiagnosticWithLocation[];
 }
 
-export function parseCSSModule(text: string, { fileName, safe }: ParseCSSModuleOptions): ParseCSSModuleResult {
+export function parseCSSModule(
+  text: string,
+  { fileName, safe, keyframes }: ParseCSSModuleOptions,
+): ParseCSSModuleResult {
   let ast: Root;
   const diagnosticSourceFile = { fileName, text };
   try {
@@ -110,7 +114,7 @@ export function parseCSSModule(text: string, { fileName, safe }: ParseCSSModuleO
     }
     throw e;
   }
-  const { localTokens, tokenImporters, diagnostics } = collectTokens(ast);
+  const { localTokens, tokenImporters, diagnostics } = collectTokens(ast, keyframes);
   const cssModule = {
     fileName,
     text,

packages/ts-plugin/src/language-plugin.ts

@@ -52,6 +52,7 @@ export function createCSSLanguagePlugin(
         // The CSS in the process of being written in an editor often contains invalid syntax.
         // So, ts-plugin uses a fault-tolerant Parser to parse CSS.
         safe: true,
+        keyframes: config.keyframes,
       });
       // eslint-disable-next-line prefer-const
       let { text, mapping, linkedCodeMapping } = createDts(