postcss-delete-duplicate-selector

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;
}

Installation

$ npm i -D postcss postcss-cli

$ npm i -D postcss-delete-duplicate-selector

Usage 1

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

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:

{
	"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.

Options

N/A

Additional Info

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;
}

License

MIT