{"id":13851616,"url":"https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors","last_synced_at":"2025-07-13T03:32:33.711Z","repository":{"id":8460836,"uuid":"58489355","full_name":"ChristianMurphy/postcss-combine-duplicated-selectors","owner":"ChristianMurphy","description":"automatically keep css selectors unique.","archived":false,"fork":false,"pushed_at":"2024-11-19T10:52:10.000Z","size":5263,"stargazers_count":96,"open_issues_count":17,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-19T12:00:07.418Z","etag":null,"topics":["css","javascript","plugin","postcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChristianMurphy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-10T19:50:26.000Z","updated_at":"2024-10-06T12:14:17.000Z","dependencies_parsed_at":"2024-02-07T20:26:34.012Z","dependency_job_id":"4804df1e-bb31-489b-9912-1d7e7f99668f","html_url":"https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors","commit_stats":{"total_commits":1159,"total_committers":15,"mean_commits":77.26666666666667,"dds":0.3796376186367558,"last_synced_commit":"8baaed6e4ad947934ddb0d9377cd6728b7e83c5e"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianMurphy%2Fpostcss-combine-duplicated-selectors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianMurphy%2Fpostcss-combine-duplicated-selectors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianMurphy%2Fpostcss-combine-duplicated-selectors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianMurphy%2Fpostcss-combine-duplicated-selectors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChristianMurphy","download_url":"https://codeload.github.com/ChristianMurphy/postcss-combine-duplicated-selectors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225855327,"owners_count":17534962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","javascript","plugin","postcss"],"created_at":"2024-08-04T22:00:36.621Z","updated_at":"2024-11-22T06:30:33.228Z","avatar_url":"https://github.com/ChristianMurphy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Postcss combine duplicated selectors\n\n\u003c!-- current project status --\u003e\n\n[![npm](https://img.shields.io/npm/v/postcss-combine-duplicated-selectors.svg)](https://www.npmjs.com/package/postcss-combine-duplicated-selectors)\n[![build status](https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors/workflows/CI/badge.svg)](https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors/actions)\n[![dependency status](https://david-dm.org/ChristianMurphy/postcss-combine-duplicated-selectors.svg)](https://david-dm.org/ChristianMurphy/postcss-combine-duplicated-selectors)\n[![devDependency status](https://david-dm.org/ChristianMurphy/postcss-combine-duplicated-selectors/dev-status.svg)](https://david-dm.org/ChristianMurphy/postcss-combine-duplicated-selectors?type=dev)\n\nAutomatically detects and combines duplicated css selectors so you don't have to\n:smile:\n\n## Usage\n\n### Requirements\n\nIn order to use this you will need to have [postcss](https://github.com/postcss/postcss) installed. Depending on whether or not you want to use the CLI you need to install [postcss-cli](https://github.com/postcss/postcss-cli).\n\n```bash\nnpm install --save-dev postcss postcss-combine-duplicated-selectors\n# or\nyarn add --dev postcss postcss-combine-duplicated-selectors\n```\n\n### Using PostCSS JS API\n\n```js\n'use strict';\n\nconst fs = require('fs');\nconst postcss = require('postcss');\nconst css = fs.readFileSync('src/app.css');\n\npostcss([require('postcss-combine-duplicated-selectors')])\n    .process(css, {from: 'src/app.css', to: 'app.css'})\n    .then((result) =\u003e {\n      fs.writeFileSync('app.css', result.css);\n      if (result.map) fs.writeFileSync('app.css.map', result.map);\n    });\n```\n\n### Using PostCSS CLI\n\n```sh\npostcss style.css --use postcss-combine-duplicated-selectors --output newcss.css\n```\n\n### Using Vite\n\nIn a `postcss.config.js` file :\n\n```js\nmodule.exports = {\n  plugins: [require('postcss-combine-duplicated-selectors')],\n};\n```\n\n## Example\n\nInput\n\n```css\n.module {\n  color: green;\n}\n.another-module {\n  color: blue;\n}\n.module {\n  background: red;\n}\n.another-module {\n  background: yellow;\n}\n```\n\nOutput\n\n```css\n.module {\n  color: green;\n  background: red;\n}\n.another-module {\n  color: blue;\n  background: yellow;\n}\n```\n\n### Duplicated Properties\n\nDuplicated properties can optionally be combined.\n\nSet the `removeDuplicatedProperties` option to `true` to enable.\n\n```js\nconst postcss = require('postcss');\nconst combineSelectors = require('postcss-combine-duplicated-selectors');\n\npostcss([combineSelectors({removeDuplicatedProperties: true})]);\n```\n\nWhen enabled the following css\n\n```css\n.a {\n  height: 10px;\n  background: orange;\n  background: rgba(255, 165, 0, 0.5);\n}\n```\n\nwill combine into\n\n```css\n.a {\n  height: 10px;\n  background: rgba(255, 165, 0, 0.5);\n}\n```\n\nIn order to limit this to only combining properties when the values are equal, set the `removeDuplicatedValues` option to `true` instead. This could clean up duplicated properties, but allow for conscious duplicates such as fallbacks for custom properties.\n\n```js\nconst postcss = require('postcss');\nconst combineSelectors = require('postcss-combine-duplicated-selectors');\n\npostcss([combineSelectors({removeDuplicatedValues: true})]);\n```\n\nThis will transform the following css\n\n```css\n.a {\n  height: 10px;\n}\n\n.a {\n  width: 20px;\n  background: var(--custom-color);\n  background: rgba(255, 165, 0, 0.5);\n}\n```\n\ninto\n\n```css\n.a {\n  height: 10px;\n  width: 20px;\n  background: var(--custom-color);\n  background: rgba(255, 165, 0, 0.5);\n}\n```\n\n### Media Queries\n\nIf you have code with media queries, pass code through [_postcss-combine-media-query_](https://github.com/SassNinja/postcss-combine-media-query) or [_css-mquery-packer_](https://github.com/n19htz/css-mquery-packer) before _postcss-combine-duplicated-selectors_ to ensure optimal results.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChristianMurphy%2Fpostcss-combine-duplicated-selectors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FChristianMurphy%2Fpostcss-combine-duplicated-selectors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChristianMurphy%2Fpostcss-combine-duplicated-selectors/lists"}