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:
.hello {
width: 100%;
}
.hello {
padding-left: 10px;
}
.other {
display: none;
}
output.css:
.hello {
width: 100%;
}
.other {
display: none;
}
$ npm i -D postcss postcss-cli
$ npm i -D postcss-delete-duplicate-selector
package.json:
{
"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
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:
{
"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 docs for examples regarding usage.
N/A
You can merge the two files with the command below.
# linux
$ cat a.css b.css > input.css
# windows
> type a.css b.css > input.css
This plugin will delete all comments.
input.css:
/*This is the comment1*/
.hello {
width: 100%;
}
/*This is the comment2*/
output.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:
h1, h2 {
width: 100%;
}
h1,h2 {
width: 100%;
}
output.css: (result is same)
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:
@font-face {
font-weight: 700;
}
@font-face {
font-weight: 500;
}
@font-face {
font-weight: 500;
}
output.css:
@font-face {
font-weight: 700;
}
@font-face {
font-weight: 500;
}
MIT