postcss-delete-duplicate-selector v1.2.3

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

input.css:

h1, h2 {
  width: 100%;
}
h1,h2 {
  width: 100%;
}

output.css: (result is same)

h1, h2 {
  width: 100%;
}
h1,h2 {
  width: 100%;
}

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