UNPKG

vite-plugin-pretty-module-classnames

Version:

Make your scoped CSS module class names clear and readable — this plugin automatically adds the module filename and other useful info to class names for easier development.

32 lines (29 loc) 1.26 kB
import { Plugin } from "vite"; //#region src/types.d.ts type DeepPartial<T> = { [P in keyof T]? : T[P] extends object ? DeepPartial<T[P]> : T[P] }; interface Separator { beforeHash: string; beforeClassName: string; beforeLineNumber: string; } interface Options { lineNumber: boolean; separator: Separator; } //#endregion //#region src/index.d.ts /** * Adds the filename without the `-module` suffix to the class names of CSS modules. * It customizes the generateScopedName function to use a sanitized version of the filename, class name, and a hash. * If the `lineNumber` option is set to true, the line number is added to the generated class name. * * @prop {Object} `options` - Plugin options. * @prop {boolean} `options.lineNumber` - Whether to include the line number in the generated class name. @default false * @prop {string} `options.separator.beforeHash` - @default '_' * @prop {string} `options.separator.beforeClassName` - @default '__' * @prop {string} `options.separator.beforeLineNumber` - @default '-' * @returns {Plugin} A Vite plugin object with a custom configuration for CSS modules. */ declare function prettyModuleClassnames(userOptions?: DeepPartial<Options>): Plugin; //#endregion export { prettyModuleClassnames as default };