{"id":13493858,"url":"https://github.com/hudochenkov/postcss-sorting","last_synced_at":"2025-05-13T22:06:16.699Z","repository":{"id":40990867,"uuid":"47820680","full_name":"hudochenkov/postcss-sorting","owner":"hudochenkov","description":"PostCSS plugin to keep rules and at-rules content in order.","archived":false,"fork":false,"pushed_at":"2025-04-18T10:22:08.000Z","size":2302,"stargazers_count":520,"open_issues_count":1,"forks_count":31,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-29T14:02:03.235Z","etag":null,"topics":["css","formatting","hacktoberfest","postcss-plugins"],"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/hudochenkov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null}},"created_at":"2015-12-11T10:35:30.000Z","updated_at":"2025-04-18T10:22:12.000Z","dependencies_parsed_at":"2024-01-13T18:46:32.226Z","dependency_job_id":"49ee264a-5508-4e6a-8466-b73e30eb093a","html_url":"https://github.com/hudochenkov/postcss-sorting","commit_stats":{"total_commits":305,"total_committers":13,"mean_commits":23.46153846153846,"dds":"0.059016393442622994","last_synced_commit":"6027f1c376cbe78a2298bcca8e23f862457893c5"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fpostcss-sorting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fpostcss-sorting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fpostcss-sorting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fpostcss-sorting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hudochenkov","download_url":"https://codeload.github.com/hudochenkov/postcss-sorting/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254036817,"owners_count":22003653,"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","formatting","hacktoberfest","postcss-plugins"],"created_at":"2024-07-31T19:01:19.461Z","updated_at":"2025-05-13T22:06:11.691Z","avatar_url":"https://github.com/hudochenkov.png","language":"JavaScript","readme":"# PostCSS Sorting\n\n[![npm version][npm-version-img]][npm] [![npm downloads last month][npm-downloads-img]][npm]\n\n[PostCSS] plugin to keep rules and at-rules content in order.\n\nLint and autofix stylesheet order with [stylelint-order].\n\n## Features\n\n* Sorts rules and at-rules content.\n* Sorts properties.\n* Sorts at-rules by different options.\n* Groups properties, custom properties, dollar variables, nested rules, nested at-rules.\n* Supports CSS, SCSS (using [postcss-scss]), CSS-in-JS (with [postcss-styled-syntax]), HTML (with [postcss-html]), and most likely any other syntax added by other PostCSS plugins.\n\n## Installation\n\n```bash\nnpm install --save-dev postcss postcss-sorting\n```\n\n## Options\n\nThe plugin has no default options. Everything is disabled by default.\n\n- [`order`](./lib/order/README.md): Specify the order of content within declaration blocks.\n- [`properties-order`](./lib/properties-order/README.md): Specify the order of properties within declaration blocks.\n- [`unspecified-properties-position`](./lib/properties-order/unspecified-properties-position.md): Specify position for properties not specified in `properties-order`.\n- `throw-validate-errors`: Throw config validation errors instead of showing and ignoring them. Defaults to `false`.\n\n## Caveats\n\n### Handling comments\n\nComments that are before node and on a separate line linked to that node. Shared-line comments are also linked to that node. Shared-line comments are comments which are located after a node and on the same line as a node.\n\n```css\na {\n\ttop: 5px; /* shared-line comment belongs to `top` */\n\t/* comment belongs to `bottom` */\n\t/* comment belongs to `bottom` */\n\tbottom: 15px; /* shared-line comment belongs to `bottom` */\n}\n```\n\n### Ignored at-rules\n\nSome at-rules, like [control](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions) and [function](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives) directives in Sass, are ignored. It means rules won't touch content inside these at-rules, as doing so could change or break functionality.\n\n### CSS-in-JS\n\nPlugin will ignore rules, which have template literal interpolation, to avoid breaking the logic:\n\n```js\nconst Component = styled.div`\n\t/* The following properties WILL NOT be sorted, because interpolation is on properties level */\n\tz-index: 1;\n\ttop: 1px;\n\t${props =\u003e props.great \u0026\u0026 'color: red'};\n\tposition: absolute;\n\tdisplay: block;\n\n\tdiv {\n\t\t/* The following properties WILL be sorted, because interpolation for property value only */\n\t\tz-index: 2;\n\t\tposition: static;\n\t\ttop: ${2 + 10}px;\n\t\tdisplay: inline-block;\n\t}\n`;\n```\n\n## Usage\n\nSee [PostCSS] docs for more examples.\n\n### Command Line\n\nAdd [postcss-cli](https://github.com/postcss/postcss-cli) and PostCSS Sorting to your project:\n\n```bash\nnpm install postcss postcss-cli postcss-sorting --save-dev\n```\n\nCreate a `postcss.config.js` with PostCSS Sorting configuration:\n\n```js\nmodule.exports = {\n\tplugins: {\n\t\t'postcss-sorting': {\n\t\t\torder: [\n\t\t\t\t'custom-properties',\n\t\t\t\t'dollar-variables',\n\t\t\t\t'declarations',\n\t\t\t\t'at-rules',\n\t\t\t\t'rules',\n\t\t\t],\n\n\t\t\t'properties-order': 'alphabetical',\n\n\t\t\t'unspecified-properties-position': 'bottom',\n\t\t},\n\t},\n};\n```\n\nOr, add the `'postcss-sorting'` section to your existing `postcss-cli` configuration file.\n\nNext execute:\n\n```bash\nnpx postcss --no-map --replace your-css-file.css\n```\n\nFor more information and options, please consult the [postcss-cli docs](https://github.com/postcss/postcss-cli).\n\n### Gulp\n\nAdd [gulp-postcss] and PostCSS Sorting to your build tool:\n\n```bash\nnpm install postcss gulp-postcss postcss-sorting --save-dev\n```\n\nEnable PostCSS Sorting within your Gulpfile:\n\n```js\nlet gulp = require('gulp');\nlet postcss = require('gulp-postcss');\nlet sorting = require('postcss-sorting');\n\nexports['sort-css'] = () =\u003e {\n\treturn gulp\n\t\t.src('./css/src/*.css')\n\t\t.pipe(\n\t\t\tpostcss([\n\t\t\t\tsorting({\n\t\t\t\t\t/* options */\n\t\t\t\t}),\n\t\t\t])\n\t\t)\n\t\t.pipe(gulp.dest('./css/src'));\n};\n```\n\n### Text editor\n\nThis plugin available as [Sublime Text], [Atom], [VS Code], and [Emacs] plugin. Though, seems all these plugins are not maintained.\n\n## Related tools\n\n[stylelint] and [stylelint-order] help lint stylesheets and let you know if stylesheet order is correct. Also, they could autofix stylesheets.\n\nI recommend [Prettier] for formatting stylesheets.\n\n[npm-version-img]: https://img.shields.io/npm/v/postcss-sorting.svg\n[npm-downloads-img]: https://img.shields.io/npm/dm/postcss-sorting.svg\n[npm]: https://www.npmjs.com/package/postcss-sorting\n\n[PostCSS]: https://github.com/postcss/postcss\n[Sublime Text]: https://github.com/hudochenkov/sublime-postcss-sorting\n[Atom]: https://github.com/lysyi3m/atom-postcss-sorting\n[VS Code]: https://github.com/mrmlnc/vscode-postcss-sorting\n[Emacs]: https://github.com/P233/postcss-sorting.el\n\n[gulp-postcss]: https://github.com/postcss/gulp-postcss\n[postcss-scss]: https://github.com/postcss/postcss-scss\n[postcss-html]: https://github.com/gucong3000/postcss-html\n[postcss-styled-syntax]: https://github.com/hudochenkov/postcss-styled-syntax\n[Prettier]: https://prettier.io/\n[stylelint]: https://stylelint.io/\n[stylelint-order]: https://github.com/hudochenkov/stylelint-order\n","funding_links":[],"categories":["JavaScript","CSS3"],"sub_categories":["PostCSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhudochenkov%2Fpostcss-sorting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhudochenkov%2Fpostcss-sorting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhudochenkov%2Fpostcss-sorting/lists"}