Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 2 months 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 (5 months ago)
- Default Branch: main
- Last Pushed: 2024-05-13T19:10:41.000Z (4 months ago)
- Last Synced: 2024-07-15T11:15:53.233Z (2 months 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: 62.5 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- fucking-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)
- 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
- Tested: without frameworks, React, Vue
- Potentially works with any framework. If you have any problems, write to the [Issue](https://github.com/teplostanski/vite-plugin-pretty-module-classnames/issues)
- 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()],
});
```## Contributing
Before you contribute to the development of the project, read the [rules](https://github.com/teplostanski/vite-plugin-pretty-module-classnames/blob/main/CONTRIBUTING.md).
License
MIT
|
Fund
this project