Migrate from CJS to ESM (#286)

mizdra · web-flow · commit 352f53c2b9a3 · 2025-12-31T00:05:31.000+09:00
* refactor: fix to jumpable links

* chore!: migrate CJS to ESM

* add changelog

* refactor: fix lint errors

* refactor: do not use `__dirname` in ESM

* add comment for workaround

* chore!: migrate several files from CJS to ESM
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-  "changelog": ["./custom-changelog-github.mts", { "repo": "mizdra/css-modules-kit" }],
+  "changelog": ["./custom-changelog-github.ts", { "repo": "mizdra/css-modules-kit" }],
   "commit": false,
   "fixed": [],
   "linked": [],
diff --git a/.changeset/custom-changelog-github.ts b/.changeset/custom-changelog-github.ts
diff --git a/.changeset/major-friends-pick.md b/.changeset/major-friends-pick.md
@@ -0,0 +1,5 @@
+---
+'@css-modules-kit/ts-plugin': minor
+---
+
+chore: migrate modules other than entry points from CJS to ESM
diff --git a/.changeset/sweet-tools-press.md b/.changeset/sweet-tools-press.md
@@ -0,0 +1,9 @@
+---
+'@css-modules-kit/stylelint-plugin': minor
+'@css-modules-kit/eslint-plugin': minor
+'@css-modules-kit/codegen': minor
+'css-modules-kit-vscode': minor
+'@css-modules-kit/core': minor
+---
+
+chore: migrate from CJS to ESM
diff --git a/.vscode-test.js b/.vscode-test.js
@@ -1,18 +1,21 @@
-const { defineConfig } = require('@vscode/test-cli');
+import { defineConfig } from '@vscode/test-cli';
 
 const baseConfig = /** @type {Parameters<typeof defineConfig>[0]} */ ({
   extensionDevelopmentPath: 'packages/vscode',
   version: process.env.VSCODE_VERSION ?? 'stable',
   mocha: {
     timeout: 30_000,
+    // If the test file is ESM, importing 'vscode' can cause a deadlock.
+    // ref: https://github.com/microsoft/vscode-test-cli/issues/77#issuecomment-3696907905
+    // Therefore, we transpile with tsx to CJS before executing.
     require: ['tsx/cjs', './scripts/vscode-test-setup.ts'],
   },
   download: {
     timeout: 60_000,
   },
 });
 
-module.exports = defineConfig([
+export default defineConfig([
   {
     ...baseConfig,
     label: 'open-css-file',
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/codegen/bin/cmk.js b/packages/codegen/bin/cmk.js
diff --git a/packages/codegen/e2e-test/index.test.ts b/packages/codegen/e2e-test/index.test.ts
@@ -5,8 +5,8 @@ import dedent from 'dedent';
 import { expect, test } from 'vitest';
 import { createIFF } from '../src/test/fixture.js';
 
-const binPath = join(__dirname, '../bin/cmk.mjs');
-const tscPath = join(__dirname, '../../../node_modules/typescript/bin/tsc');
+const binPath = join(import.meta.dirname, '../bin/cmk.js');
+const tscPath = join(import.meta.dirname, '../../../node_modules/typescript/bin/tsc');
 
 test('generates .d.ts', async () => {
   const iff = await createIFF({
diff --git a/packages/codegen/package.json b/packages/codegen/package.json
@@ -2,7 +2,7 @@
   "name": "@css-modules-kit/codegen",
   "description": "A tool for generating `*.d.ts` files for `*.module.css`.",
   "version": "0.7.0",
-  "type": "commonjs",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "bin": {
-    "cmk": "bin/cmk.mjs"
+    "cmk": "bin/cmk.js"
   },
   "keywords": [
     "css-modules",
diff --git a/packages/codegen/src/cli.ts b/packages/codegen/src/cli.ts
@@ -1,6 +1,6 @@
 import { parseArgs } from 'node:util';
 import { resolve } from '@css-modules-kit/core';
-import packageJson from '../package.json';
+import packageJson from '../package.json' with { type: 'json' };
 import { ParseCLIArgsError } from './error.js';
 
 const helpText = `
diff --git a/packages/codegen/src/logger/formatter.test.ts b/packages/codegen/src/logger/formatter.test.ts
@@ -1,7 +1,7 @@
 import dedent from 'dedent';
 import ts from 'typescript';
 import { describe, expect, test } from 'vitest';
-import { formatDiagnostics, formatTime } from './formatter';
+import { formatDiagnostics, formatTime } from './formatter.js';
 
 describe('formatDiagnostics', () => {
   const file = ts.createSourceFile(
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -2,7 +2,7 @@
   "name": "@css-modules-kit/core",
   "description": "The core of css-modules-kit",
   "version": "0.7.0",
-  "type": "commonjs",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -2,7 +2,7 @@
   "name": "@css-modules-kit/eslint-plugin",
   "description": "A eslint plugin for CSS Modules",
   "version": "0.3.1",
-  "type": "commonjs",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
diff --git a/packages/eslint-plugin/src/index.ts b/packages/eslint-plugin/src/index.ts
@@ -1,5 +1,5 @@
 import type { ESLint } from 'eslint';
-import packageJson from '../package.json';
+import packageJson from '../package.json' with { type: 'json' };
 import { noMissingComponentFile } from './rules/no-missing-component-file.js';
 import { noUnusedClassNames } from './rules/no-unused-class-names.js';
 
@@ -60,4 +60,4 @@ const plugin = {
 } satisfies ESLint.Plugin;
 plugin.configs.recommended.plugins['css-modules-kit'] = plugin;
 
-export = plugin;
+export default plugin;
diff --git a/packages/stylelint-plugin/package.json b/packages/stylelint-plugin/package.json
@@ -2,7 +2,7 @@
   "name": "@css-modules-kit/stylelint-plugin",
   "description": "A stylelint plugin for CSS Modules",
   "version": "0.4.1",
-  "type": "commonjs",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
diff --git a/packages/stylelint-plugin/src/index.ts b/packages/stylelint-plugin/src/index.ts
@@ -1,4 +1,4 @@
 import { noMissingComponentFile } from './rules/no-missing-component-file.js';
 import { noUnusedClassNames } from './rules/no-unused-class-names.js';
 
-export = [noUnusedClassNames, noMissingComponentFile];
+export default [noUnusedClassNames, noMissingComponentFile];
diff --git a/packages/stylelint-plugin/src/recommended.ts b/packages/stylelint-plugin/src/recommended.ts
@@ -42,4 +42,4 @@ const recommendedConfig: Config = {
   },
 };
 
-export = recommendedConfig;
+export default recommendedConfig;
diff --git a/packages/ts-plugin/e2e-test/test-util/tsserver.ts b/packages/ts-plugin/e2e-test/test-util/tsserver.ts
@@ -42,7 +42,7 @@ export function launchTsserver(): Tsserver {
       '--globalPlugins',
       '@css-modules-kit/ts-plugin',
       '--pluginProbeLocations',
-      __dirname,
+      import.meta.dirname,
     ],
     [],
   );
diff --git a/packages/ts-plugin/package.json b/packages/ts-plugin/package.json
@@ -2,7 +2,7 @@
   "name": "@css-modules-kit/ts-plugin",
   "description": "A TypeScript Language Service Plugin for CSS Modules",
   "version": "0.7.0",
-  "type": "commonjs",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   "author": "mizdra <pp.mizdra@gmail.com>",
   "license": "MIT",
   "private": false,
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "scripts": {
     "build": "tsc -b tsconfig.build.json"
   },
@@ -25,8 +25,8 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.cts",
+      "default": "./dist/index.cjs"
     },
     "./type": {
       "types": "./dist/type.d.ts",
diff --git a/packages/ts-plugin/src/index.cts b/packages/ts-plugin/src/index.cts
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -3,7 +3,7 @@
   "displayName": "CSS Modules Kit",
   "description": "The VS Code extension for CSS Modules",
   "version": "0.4.0",
-  "type": "commonjs",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/mizdra/css-modules-kit.git",
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -4,11 +4,11 @@
     "composite": true
   },
   "references": [
-    { "path": "packages/core/tsconfig.build.json" },
-    { "path": "packages/codegen/tsconfig.build.json" },
-    { "path": "packages/ts-plugin/tsconfig.build.json" },
-    { "path": "packages/vscode/tsconfig.build.json" },
-    { "path": "packages/stylelint-plugin/tsconfig.build.json" },
-    { "path": "packages/eslint-plugin/tsconfig.build.json" }
+    { "path": "./packages/core/tsconfig.build.json" },
+    { "path": "./packages/codegen/tsconfig.build.json" },
+    { "path": "./packages/ts-plugin/tsconfig.build.json" },
+    { "path": "./packages/vscode/tsconfig.build.json" },
+    { "path": "./packages/stylelint-plugin/tsconfig.build.json" },
+    { "path": "./packages/eslint-plugin/tsconfig.build.json" }
   ]
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.base.json",
-  "include": ["**/*", ".changeset/custom-changelog-github.mts"],
+  "include": ["**/*", ".changeset/custom-changelog-github.ts"],
   "exclude": ["node_modules", "**/dist", "examples"],
   "compilerOptions": {
     "target": "ES2022",
@@ -9,5 +9,5 @@
 
     "noEmit": true
   },
-  "references": [{ "path": "tsconfig.build.json" }]
+  "references": [{ "path": "./tsconfig.build.json" }]
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",`
`3`		`- "changelog": ["./custom-changelog-github.mts", { "repo": "mizdra/css-modules-kit" }],`
	`3`	`+ "changelog": ["./custom-changelog-github.ts", { "repo": "mizdra/css-modules-kit" }],`
`4`	`4`	`"commit": false,`
`5`	`5`	`"fixed": [],`
`6`	`6`	`"linked": [],`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@css-modules-kit/ts-plugin': minor
 +---
++
 +chore: migrate modules other than entry points from CJS to ESM