Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hwantage/postcss-delete-duplicate-selector
PostCSS plugin delete duplicate css selector in the file
https://github.com/hwantage/postcss-delete-duplicate-selector
npm-package postcss postcss-plugin
Last synced: 3 days ago
JSON representation
PostCSS plugin delete duplicate css selector in the file
- Host: GitHub
- URL: https://github.com/hwantage/postcss-delete-duplicate-selector
- Owner: hwantage
- License: mit
- Created: 2024-01-03T01:54:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-01T07:05:37.000Z (about 2 months ago)
- Last Synced: 2025-01-02T23:19:00.853Z (25 days ago)
- Topics: npm-package, postcss, postcss-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/postcss-delete-duplicate-selector
- Size: 25.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**[PostCSS](https://github.com/postcss/postcss)** plugin for delete duplicate css selector in the file.
This plugin deletes duplicate css selectors. It removes the duplicate selector at the bottom, leaving the top one.
**input.css:**
```css
.hello {
width: 100%;
}
.hello {
padding-left: 10px;
}
.other {
display: none;
}
```
**output.css:**
```css
.hello {
width: 100%;
}
.other {
display: none;
}
```
## **Installation**
`$ npm i -D postcss postcss-cli`
`$ npm i -D postcss-delete-duplicate-selector`
## **Usage 1**
**package.json:**
```jsx
{
"scripts": {
"build": "postcss input.css --use postcss-delete-duplicate-selector --output output.css"
},
"devDependencies": {
"postcss": "^8.4.32",
"postcss-cli": "^11.0.0",
"postcss-delete-duplicate-selector": "^1.2.2"
}
}
```
and then `npm run build`
## **Usage 2**
Or you can use `postcss.config.js` file. Create a `postcss.config.js` file in your root directory.
**postcss.config.js:**
```
module.exports = {
plugins: [
require('postcss-delete-duplicate-selector')
],
};
```
Change the build script to look like this
**package.json:**
```jsx
{
"scripts": {
"build": "postcss input.css --output output.css"
},
"devDependencies": {
"postcss": "^8.4.32",
"postcss-cli": "^11.0.0",
"postcss-delete-duplicate-selector": "^1.2.2"
}
}
```
and then `npm run build`
See **[PostCSS](https://github.com/postcss/postcss)** docs for **[examples regarding usage](https://github.com/postcss/postcss#usage)**.
## **Options**
N/A
## **Additional Info**
You can merge the two files with the command below.
```shell
# linux
$ cat a.css b.css > input.css
# windows
> type a.css b.css > input.css
```
This plugin will delete all comments.
**input.css:**
```css
/*This is the comment1*/
.hello {
width: 100%;
}
/*This is the comment2*/
```
**output.css:**
```css
.hello {
width: 100%;
}
```
This plugin does not consider whitespace between selectors. Therefore, it's recommended to run it after the CSS minify or CSS prettify.
**input.css:**
```css
h1, h2 {
width: 100%;
}
h1,h2 {
width: 100%;
}
```
**output.css:** (result is same)
```css
h1, h2 {
width: 100%;
}
h1,h2 {
width: 100%;
}
```
Deduplication is not performed for atrules like @media. However, deduplication is performed on declarations that are exactly the same.
input.css:
```css
@font-face {
font-weight: 700;
}
@font-face {
font-weight: 500;
}
@font-face {
font-weight: 500;
}
```
output.css:
```css
@font-face {
font-weight: 700;
}
@font-face {
font-weight: 500;
}
```
## **License**
MIT