https://github.com/teplostanski/vite-plugin-pretty-module-classnames

Adds the filename without the -module suffix to the class names of CSS modules.
https://github.com/teplostanski/vite-plugin-pretty-module-classnames

css css-modules less plugin scss scss-modules vite vite-plugin

Last synced: about 1 month ago
JSON representation

Adds the filename without the -module suffix to the class names of CSS modules.

• Host: GitHub
• URL: https://github.com/teplostanski/vite-plugin-pretty-module-classnames
• Owner: teplostanski
• License: mit
• Created: 2024-04-27T20:29:59.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-05-10T17:58:30.000Z (about 1 month ago)
• Last Synced: 2024-05-10T18:24:21.618Z (about 1 month ago)
• Topics: css, css-modules, less, plugin, scss, scss-modules, vite, vite-plugin
• Language: TypeScript
• Homepage: https://npmjs.com/package/vite-plugin-pretty-module-classnames
• Size: 58.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Lists

• awesome-vite - vite-plugin-pretty-module-classnames - Adds the filename without the `-module` suffix to the class names of CSS modules. (Plugins / Framework-agnostic Plugins)

README

        


vite-plugin-pretty-module-classnames


[](https://npmjs.com/package/vite-plugin-pretty-module-classnames)

[](https://npmjs.com/package/vite-plugin-pretty-module-classnames)

[](https://npmjs.com/package/vite-plugin-pretty-module-classnames)

[](https://npmjs.com/package/vite-plugin-pretty-module-classnames)

[](https://github.com/teplostanski/vite-plugin-pretty-module-classnames)

[](https://github.com/teplostanski/vite-plugin-pretty-module-classnames)

[](https://github.com/teplostanski/vite-plugin-pretty-module-classnames/issues)

[](https://github.com/teplostanski/vite-plugin-pretty-module-classnames/pulls)







Adds the filename without the -module suffix to the class names of CSS modules.




Included in the Awesome Vite.js list 





## Install

[npmjs.com](https://npmjs.com/package/vite-plugin-pretty-module-classnames)

```bash

npm install -D vite-plugin-pretty-module-classnames

```

## Features

- Framework-agnostic

- Support CommonJS and ES Modules

- Support Vite 2.x

## Why Use This?

As utilizing CSS modules in React, we're accustomed to seeing class names formatted as `SomeComponent__classname_hash`. However, with Vite, the naming convention for modular class names appears slightly different, resembling `__classname_hash` or `SomeComponent-module__classname_hash` the latter occurring if `generateScopedName: '[name]__[local]_[hash:base64:5]'` is specified in vite.config.js. This addition of `-module` post-component name can be cumbersome to work around.

Fortunately, the `vite-plugin-pretty-module-classnames` provides a solution to this issue!

## Usege

```js

// vite.config.js

import PrettyModuleClassnames from "vite-plugin-pretty-module-classnames";

export default defineConfig({

  plugins: [PrettyModuleClassnames()],

});

```

## License [MIT](./LICENSE)