@better-css-modules/core

Core library for better-css-modules. Provides CSS Modules parsing, type definition generation, unused class detection, file watching, and a webpack loader.

Install

pnpm add -D @better-css-modules/core

API

import {
  defineConfig,
  loadConfig,
  extractClassNames,
  parseFile,
  generateDts,
  writeDts,
  generateAll,
  scanUnusedClasses,
  startWatcher,
} from "@better-css-modules/core";

// Extract class names from CSS
const classNames = extractClassNames(".container { color: red; }");
// => ['container']

// Generate .d.ts content
const dts = generateDts(classNames);

// Generate all .d.ts files based on config
const config = await loadConfig(process.cwd());
await generateAll(config, process.cwd());

// Detect unused class names
const warnings = await scanUnusedClasses(process.cwd());

webpack Loader

A webpack-compatible loader is available at @better-css-modules/core/loader. This is used internally by @better-css-modules/turbopack for Turbopack integration.

Configuration

import { defineConfig } from "@better-css-modules/core";

export default defineConfig({
  include: ["src/**/*.module.css"],
  exclude: [],
  outDir: "__generated__",
  watch: false,
  silent: false,
});

| Option | Type | Default | Description | | --------- | ---------- | ------------------------- | -------------------------------------------- | | include | string[] | ["src/**/*.module.css"] | Glob patterns for target CSS Modules files | | exclude | string[] | [] | Glob patterns to exclude | | outDir | string | "__generated__" | Output directory for generated .d.ts files | | watch | boolean | false | Enable watch mode (CLI only) | | silent | boolean | false | Suppress console output |

License

MIT