happy-css-modules 4.0.0 → 5.0.0

package/package.json

@@ -1,53 +1,73 @@
 {
   "name": "happy-css-modules",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Creates .d.ts files from CSS Modules .css files",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json"
-  },
-  "bin": {
-    "hcm": "bin/hcm.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mizdra/happy-css-modules.git",
-    "directory": "packages/happy-css-modules"
-  },
   "keywords": [
     "css-modules",
     "typescript"
   ],
+  "license": "MIT",
+  "author": "mizdra",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mizdra/happy-css-modules.git"
+  },
+  "bin": {
+    "hcm": "bin/hcm.js"
+  },
   "files": [
     "bin",
     "src",
     "dist"
   ],
-  "author": "mizdra",
-  "license": "MIT",
-  "engines": {
-    "node": ">=18.0.0"
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "update-example": "cd example && node ../bin/hcm.js '*-*/*.{css,scss,less}' --no-cache",
+    "dev": "npm run build && npm run update-example",
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "run-s -c lint:*",
+    "lint:oxfmt": "oxfmt --check",
+    "lint:oxlint": "oxlint --type-aware",
+    "lint:tsc": "tsc -p tsconfig.json",
+    "test": "vitest run"
   },
   "dependencies": {
     "@file-cache/core": "^2.0.0",
     "@file-cache/npm": "^2.0.0",
-    "async-mutex": "^0.5.0",
-    "camelcase": "^8.0.0",
-    "chalk": "^5.3.0",
-    "chokidar": "^3.6.0",
-    "enhanced-resolve": "^5.16.1",
-    "glob": "^10.3.15",
-    "import-meta-resolve": "^4.1.0",
-    "minimatch": "^9.0.4",
-    "postcss": "^8.4.38",
-    "postcss-load-config": "^5.1.0",
-    "postcss-modules": "^6.0.0",
-    "postcss-selector-parser": "^6.0.16",
+    "camelcase": "^9.0.0",
+    "chokidar": "^5.0.0",
+    "enhanced-resolve": "^5.22.2",
+    "import-meta-resolve": "^4.2.0",
+    "postcss": "^8.5.15",
+    "postcss-load-config": "^6.0.1",
+    "postcss-modules": "^6.0.1",
+    "postcss-selector-parser": "^7.1.1",
     "postcss-value-parser": "^4.2.0",
-    "source-map": "^0.7.4",
-    "yargs": "^17.7.2"
+    "source-map": "^0.7.6"
+  },
+  "devDependencies": {
+    "@mizdra/oxfmt-config": "^0.2.0",
+    "@mizdra/oxlint-config": "^0.5.0",
+    "@types/dedent": "^0.7.2",
+    "@types/less": "^3.0.8",
+    "@types/node": "^22.19.19",
+    "@typescript/server-harness": "^0.3.5",
+    "dedent": "^1.7.2",
+    "less": "^4.6.4",
+    "less-3": "npm:less@^3.13.1",
+    "less-4": "npm:less@^4.6.4",
+    "npm-run-all2": "^9.0.1",
+    "oxfmt": "^0.53.0",
+    "oxlint": "^1.68.0",
+    "oxlint-tsgolint": "^0.23.0",
+    "postcss-import": "^16.1.1",
+    "postcss-simple-vars": "^7.0.1",
+    "sass": "^1.100.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "peerDependencies": {
     "less": "^3.0.0 || ^4.0.0",
@@ -61,5 +81,9 @@
     "less": {
       "optional": true
     }
-  }
+  },
+  "engines": {
+    "node": "^22.20.0 || ^24.8.0 || >=26.0.0"
+  },
+  "packageManager": "npm@11.16.0"
 }

package/src/cli.ts

@@ -1,126 +1,128 @@
-import yargs from 'yargs';
-import { hideBin } from 'yargs/helpers';
+import { parseArgs } from 'node:util';
 import { DEFAULT_ARBITRARY_EXTENSIONS } from './config.js';
 import { type RunnerOptions } from './runner.js';
 import { getPackageJson } from './util.js';
 
-/**
- * Parse command line arguments.
- * @returns Runner options.
- */
+const HELP_TEXT = `
+Generate .d.ts and .d.ts.map for CSS modules.
+
+Usage: hcm [options] <glob>
+
+Options:
+  -w, --[no-]watch               Watch input directory's css files or pattern (default: false)
+      --localsConvention         Style of exported class names.
+                                 [choices: camelCase, camelCaseOnly, dashes, dashesOnly]
+      --[no-]declarationMap      Create sourcemaps for d.ts files (default: true)
+      --sassLoadPaths            The option compatible with sass's \`--load-path\`.
+      --lessIncludePaths         The option compatible with less's \`--include-path\`.
+      --webpackResolveAlias      The option compatible with webpack's \`resolve.alias\`.
+      --postcssConfig            The option compatible with postcss's \`--config\`.
+      --[no-]arbitraryExtensions Generate \`.d.css.ts\` instead of \`.css.d.ts\` (default: false)
+      --[no-]cache               Only generate .d.ts and .d.ts.map for changed files (default: true)
+      --cacheStrategy            Strategy for the cache to use for detecting changed files.
+                                 [choices: content, metadata] (default: content)
+      --logLevel                 What level of logs to report.
+                                 [choices: debug, info, silent] (default: info)
+  -o, --outDir                   Output directory for generated files.
+  -h, --help                     Show help
+  -v, --version                  Show version number
+
+Examples:
+  hcm 'src/**/*.module.css'
+  hcm 'src/**/*.module.{css,scss,less}'
+  hcm 'src/**/*.module.css' --watch
+  hcm 'src/**/*.module.css' --no-declarationMap
+  hcm 'src/**/*.module.css' --sassLoadPaths src/style
+  hcm 'src/**/*.module.css' --lessIncludePaths src/style
+  hcm 'src/**/*.module.css' --webpackResolveAlias '{"@": "src"}'
+  hcm 'src/**/*.module.css' --no-cache
+`.trim();
+
 export function parseArgv(argv: string[]): RunnerOptions {
   const pkgJson = getPackageJson();
-  const parsedArgv = yargs(hideBin(argv))
-    .wrap(Math.min(140, process.stdout.columns))
-    .scriptName('hcm')
-    .usage('Generate .d.ts and .d.ts.map for CSS modules.\n\n$0 [options] <glob>')
-    .example("$0 'src/**/*.module.css'", 'Generate .d.ts and .d.ts.map.')
-    .example("$0 'src/**/*.module.{css,scss,less}'", 'Also generate files for sass and less.')
-    .example("$0 'src/**/*.module.css' --watch", 'Watch for changes and generate .d.ts and .d.ts.map.')
-    .example("$0 'src/**/*.module.css' --declarationMap=false", 'Generate .d.ts only.')
-    .example("$0 'src/**/*.module.css' --sassLoadPaths=src/style", "Run with sass's `--load-path`.")
-    .example("$0 'src/**/*.module.css' --lessIncludePaths=src/style", "Run with less's `--include-path`.")
-    .example('$0 \'src/**/*.module.css\' --webpackResolveAlias=\'{"@": "src"}\'', "Run with webpack's `resolve.alias`.")
-    .example("$0 'src/**/*.module.css' --cache=false", 'Disable cache.')
-    .detectLocale(false)
-    .option('watch', {
-      type: 'boolean',
-      alias: 'w',
-      default: false,
-      describe: "Watch input directory's css files or pattern",
-    })
-    .option('localsConvention', {
-      choices: ['camelCase', 'camelCaseOnly', 'dashes', 'dashesOnly'] as const,
-      describe: 'Style of exported class names.',
-    })
-    .option('declarationMap', {
-      type: 'boolean',
-      default: true,
-      describe: 'Create sourcemaps for d.ts files',
-    })
-    .option('sassLoadPaths', {
-      array: true,
-      nargs: 1,
-      describe: "The option compatible with sass's `--load-path`.",
-    })
-    .option('lessIncludePaths', {
-      array: true,
-      nargs: 1,
-      describe: "The option compatible with less's `--include-path`.",
-    })
-    .option('webpackResolveAlias', {
-      string: true,
-      describe: "The option compatible with webpack's `resolve.alias`.",
-    })
-    // TODO: Support --noPostcssConfig option.
-    .option('postcssConfig', {
-      string: true,
-      describe: "The option compatible with postcss's `--config`.",
-    })
-    .option('arbitraryExtensions', {
-      type: 'boolean',
-      default: DEFAULT_ARBITRARY_EXTENSIONS,
-      describe: 'Generate `.d.css.ts` instead of `.css.d.ts`.',
-    })
-    .option('cache', {
-      type: 'boolean',
-      default: true,
-      describe: 'Only generate .d.ts and .d.ts.map for changed files.',
-    })
-    .option('cacheStrategy', {
-      choices: ['content', 'metadata'] as const,
-      // NOTE: This is a workaround for `parsedArgv.cacheStrategy` type breaks.
-      default: 'content' as RunnerOptions['cacheStrategy'],
-      describe: 'Strategy for the cache to use for detecting changed files.',
-    })
-    .option('logLevel', {
-      choices: ['debug', 'info', 'silent'] as const,
-      default: 'info' as RunnerOptions['logLevel'],
-      describe: 'What level of logs to report.',
-    })
-    .option('outDir', {
-      type: 'string',
-      alias: 'o',
-      describe: 'Output directory for generated files.',
-    })
-    .alias('h', 'help')
-    .alias('v', 'version')
-    .version(pkgJson.version)
-    .check((argv) => {
-      const patterns = argv._;
-      // TODO: support multiple patterns
-      if (patterns.length !== 1) throw new Error('Only one pattern is allowed.');
-      if (argv.webpackResolveAlias) {
-        let parsedWebpackResolveAlias: unknown;
-        try {
-          parsedWebpackResolveAlias = JSON.parse(argv.webpackResolveAlias);
-        } catch (e) {
-          throw new Error('--webpackResolveAlias must be a valid JSON string.');
-        }
-        if (typeof parsedWebpackResolveAlias !== 'object' || parsedWebpackResolveAlias === null)
-          throw new Error('--webpackResolveAlias must be an object');
-        if (!Object.keys(parsedWebpackResolveAlias).every((key) => typeof key === 'string'))
-          throw new Error('--webpackResolveAlias must be an object of string keys');
-        if (!Object.values(parsedWebpackResolveAlias).every((value) => typeof value === 'string'))
-          throw new Error('--webpackResolveAlias must be an object of string values');
-      }
-      return true;
-    })
-    .parseSync();
-  const patterns: string[] = parsedArgv._.map((pattern) => pattern.toString());
+
+  const { values, positionals } = parseArgs({
+    args: argv.slice(2),
+    options: {
+      watch: { type: 'boolean', short: 'w', default: false },
+      localsConvention: { type: 'string' },
+      declarationMap: { type: 'boolean', default: true },
+      sassLoadPaths: { type: 'string', multiple: true },
+      lessIncludePaths: { type: 'string', multiple: true },
+      webpackResolveAlias: { type: 'string' },
+      postcssConfig: { type: 'string' },
+      arbitraryExtensions: { type: 'boolean', default: DEFAULT_ARBITRARY_EXTENSIONS },
+      cache: { type: 'boolean', default: true },
+      cacheStrategy: { type: 'string', default: 'content' },
+      logLevel: { type: 'string', default: 'info' },
+      outDir: { type: 'string', short: 'o' },
+      help: { type: 'boolean', short: 'h' },
+      version: { type: 'boolean', short: 'v' },
+    },
+    allowPositionals: true,
+    allowNegative: true,
+  });
+
+  if (values.help) {
+    // oxlint-disable-next-line no-console
+    console.log(HELP_TEXT);
+    // oxlint-disable-next-line unicorn/no-process-exit
+    process.exit(0);
+  }
+
+  if (values.version) {
+    // oxlint-disable-next-line no-console
+    console.log(pkgJson.version);
+    // oxlint-disable-next-line unicorn/no-process-exit
+    process.exit(0);
+  }
+
+  if (positionals.length !== 1) throw new Error('Only one pattern is allowed.');
+
+  const validLocalsConventions = ['camelCase', 'camelCaseOnly', 'dashes', 'dashesOnly'];
+  if (values.localsConvention !== undefined && !validLocalsConventions.includes(values.localsConvention)) {
+    throw new Error(`--localsConvention must be one of: ${validLocalsConventions.join(', ')}`);
+  }
+
+  const validCacheStrategies = ['content', 'metadata'];
+  if (!validCacheStrategies.includes(values.cacheStrategy)) {
+    throw new Error(`--cacheStrategy must be one of: ${validCacheStrategies.join(', ')}`);
+  }
+
+  const validLogLevels = ['debug', 'info', 'silent'];
+  if (!validLogLevels.includes(values.logLevel)) {
+    throw new Error(`--logLevel must be one of: ${validLogLevels.join(', ')}`);
+  }
+
+  let webpackResolveAlias: Record<string, string> | undefined;
+  if (values.webpackResolveAlias) {
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(values.webpackResolveAlias);
+    } catch {
+      throw new Error('--webpackResolveAlias must be a valid JSON string.');
+    }
+    if (typeof parsed !== 'object' || parsed === null) throw new Error('--webpackResolveAlias must be an object');
+    if (!Object.keys(parsed).every((key) => typeof key === 'string'))
+      throw new Error('--webpackResolveAlias must be an object of string keys');
+    if (!Object.values(parsed).every((value) => typeof value === 'string'))
+      throw new Error('--webpackResolveAlias must be an object of string values');
+    webpackResolveAlias = parsed as Record<string, string>;
+  }
+
   return {
-    pattern: patterns[0]!,
-    watch: parsedArgv.watch,
-    localsConvention: parsedArgv.localsConvention,
-    declarationMap: parsedArgv.declarationMap,
-    sassLoadPaths: parsedArgv.sassLoadPaths?.map((item) => item.toString()),
-    lessIncludePaths: parsedArgv.lessIncludePaths?.map((item) => item.toString()),
-    webpackResolveAlias: parsedArgv.webpackResolveAlias ? JSON.parse(parsedArgv.webpackResolveAlias) : undefined,
-    postcssConfig: parsedArgv.postcssConfig,
-    arbitraryExtensions: parsedArgv.arbitraryExtensions,
-    cache: parsedArgv.cache,
-    cacheStrategy: parsedArgv.cacheStrategy,
-    logLevel: parsedArgv.logLevel,
-    outDir: parsedArgv.outDir,
+    pattern: positionals[0]!,
+    watch: values.watch,
+    localsConvention: values.localsConvention as RunnerOptions['localsConvention'],
+    declarationMap: values.declarationMap,
+    sassLoadPaths: values.sassLoadPaths,
+    lessIncludePaths: values.lessIncludePaths,
+    webpackResolveAlias,
+    postcssConfig: values.postcssConfig,
+    arbitraryExtensions: values.arbitraryExtensions,
+    cache: values.cache,
+    cacheStrategy: values.cacheStrategy as RunnerOptions['cacheStrategy'],
+    logLevel: values.logLevel as RunnerOptions['logLevel'],
+    outDir: values.outDir,
   };
 }

package/src/emitter/dts.test.ts

@@ -28,17 +28,17 @@ describe('generateDtsContentWithSourceMap', () => {
   test('generate dts content with source map', async () => {
     createFixtures({
       '/test/1.css': dedent`
-      @import './2.css';
-      .a {}
-      .b {}
-      .b {}
+        @import './2.css';
+        .a {}
+        .b {}
+        .b {}
       `,
       '/test/2.css': dedent`
-      @import './3.css';
-      .c {}
+        @import './3.css';
+        .c {}
       `,
       '/test/3.css': dedent`
-      .d {}
+        .d {}
       `,
     });
     const result = await locator.load(filePath);
@@ -91,8 +91,8 @@ describe('generateDtsContentWithSourceMap', () => {
     async function getResult(filePath: string) {
       createFixtures({
         '/test/1.css': dedent`
-        .foo-bar {}
-        .foo_bar {}
+          .foo-bar {}
+          .foo_bar {}
         `,
       });
       return locator.load(filePath);
@@ -238,9 +238,9 @@ describe('generateDtsContentWithSourceMap', () => {
   test('treats imported tokens from external files the same as local tokens', async () => {
     createFixtures({
       '/test/1.css': dedent`
-      @import './2.css';
-      @import './3.css';
-      .a {}
+        @import './2.css';
+        @import './3.css';
+        .a {}
       `,
       '/test/2.css': `.b {}`,
       '/test/3.css': `.c {}`,

package/src/emitter/dts.ts

@@ -1,5 +1,5 @@
-import { EOL } from 'os';
-import path, { basename, parse, join } from 'path';
+import { EOL } from 'node:os';
+import path, { basename, parse, join } from 'node:path';
 import camelcase from 'camelcase';
 import { SourceNode, type CodeWithSourceMap } from 'source-map';
 import { type Token } from '../locator/index.js';
@@ -34,7 +34,7 @@ export function getDtsFilePath(
 }
 
 function dashesCamelCase(str: string): string {
-  return str.replace(/-+(\w)/gu, (match, firstLetter) => {
+  return str.replace(/-+(\w)/gu, (_match, firstLetter) => {
     return firstLetter.toUpperCase();
   });
 }
@@ -107,35 +107,34 @@ function generateTokenDeclarations(
             ': string }>',
           ])
         : typeof token.importedName === 'string'
-        ? new SourceNode(null, null, null, [
-            `& Readonly<{ `,
-            new SourceNode(
-              originalLocation.start.line,
-              // The SourceNode's column is 0-based, but the originalLocation's column is 1-based.
-              originalLocation.start.column - 1,
-              getRelativePath(sourceMapFilePath, originalLocation.filePath),
+          ? new SourceNode(null, null, null, [
+              `& Readonly<{ `,
+              new SourceNode(
+                originalLocation.start.line,
+                // The SourceNode's column is 0-based, but the originalLocation's column is 1-based.
+                originalLocation.start.column - 1,
+                getRelativePath(sourceMapFilePath, originalLocation.filePath),
+                `"${token.name}"`,
+                token.name,
+              ),
+              `: (typeof import(`,
+              `"${getRelativePath(filePath, originalLocation.filePath)}"`,
+              `))["default"]["${token.importedName}"] }>`,
+            ])
+          : // Imported tokens in non-external files are typed by dynamic import.
+            // See https://github.com/mizdra/happy-css-modules/issues/106.
+            new SourceNode(null, null, null, [
+              '& Readonly<Pick<(typeof import(',
+              `"${getRelativePath(filePath, originalLocation.filePath)}"`,
+              '))["default"], ',
               `"${token.name}"`,
-              token.name,
-            ),
-            `: (typeof import(`,
-            `"${getRelativePath(filePath, originalLocation.filePath)}"`,
-            `))["default"]["${token.importedName}"] }>`,
-          ])
-        : // Imported tokens in non-external files are typed by dynamic import.
-          // See https://github.com/mizdra/happy-css-modules/issues/106.
-          new SourceNode(null, null, null, [
-            '& Readonly<Pick<(typeof import(',
-            `"${getRelativePath(filePath, originalLocation.filePath)}"`,
-            '))["default"], ',
-            `"${token.name}"`,
-            '>>',
-          ]),
+              '>>',
+            ]),
     );
   }
   return result;
 }
 
-// eslint-disable-next-line max-params
 export function generateDtsContentWithSourceMap(
   filePath: string,
   dtsFilePath: string,

package/src/emitter/file-system.test.ts

@@ -1,4 +1,4 @@
-import { readFile, rm, stat } from 'fs/promises';
+import { readFile, rm, stat } from 'node:fs/promises';
 import { createFixtures, getFixturePath } from '../test-util/util.js';
 import { writeFileIfChanged } from './file-system.js';
 

package/src/emitter/file-system.ts

@@ -1,5 +1,5 @@
-import { mkdir, readFile, writeFile } from 'fs/promises';
-import { dirname } from 'path';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname } from 'node:path';
 import { isSystemError } from '../util.js';
 
 /**

package/src/emitter/index.test.ts

@@ -1,8 +1,7 @@
-import { readFile, stat } from 'fs/promises';
+import { readFile, stat } from 'node:fs/promises';
 import { createFixtures, exists, fakeToken, getFixturePath, waitForAsyncTask } from '../test-util/util.js';
 import { emitGeneratedFiles, getRelativePath, isSubDirectoryFile } from './index.js';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
 
 beforeEach(() => {

package/src/emitter/index.ts

@@ -1,4 +1,4 @@
-import { dirname, isAbsolute, relative } from 'path';
+import { dirname, isAbsolute, relative } from 'node:path';
 import { DEFAULT_ARBITRARY_EXTENSIONS } from '../config.js';
 import { type Token } from '../locator/index.js';
 import { type LocalsConvention } from '../runner.js';

package/src/emitter/source-map.test.ts

@@ -1,4 +1,4 @@
-import { EOL } from 'os';
+import { EOL } from 'node:os';
 import { getSourceMapFilePath, generateSourceMappingURLComment } from './source-map.js';
 
 test('getSourceMapFilePath', () => {

package/src/emitter/source-map.ts

@@ -1,4 +1,4 @@
-import { EOL } from 'os';
+import { EOL } from 'node:os';
 import { getDtsFilePath } from './dts.js';
 import type { OutDirOptions } from './index.js';
 import { getRelativePath } from './index.js';