{"id":19451239,"url":"https://github.com/thekashey/stylelint-semantic-groups","last_synced_at":"2025-10-05T12:27:07.899Z","repository":{"id":43033375,"uuid":"376722180","full_name":"theKashey/stylelint-semantic-groups","owner":"theKashey","description":"Opinionated rule ordering","archived":false,"fork":false,"pushed_at":"2023-12-09T04:51:12.000Z","size":210,"stargazers_count":90,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T11:07:01.029Z","etag":null,"topics":["css","stylelint-order"],"latest_commit_sha":null,"homepage":"https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec","language":"TypeScript","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/theKashey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2021-06-14T06:18:28.000Z","updated_at":"2025-03-20T06:38:21.000Z","dependencies_parsed_at":"2024-06-18T18:14:48.883Z","dependency_job_id":"0e29ec71-c1d5-4a94-bd42-3b8146010d61","html_url":"https://github.com/theKashey/stylelint-semantic-groups","commit_stats":{"total_commits":31,"total_committers":3,"mean_commits":"10.333333333333334","dds":0.06451612903225812,"last_synced_commit":"af7547196c9a9f932213a18c9eb68dea59ff9f17"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fstylelint-semantic-groups","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fstylelint-semantic-groups/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fstylelint-semantic-groups/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fstylelint-semantic-groups/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theKashey","download_url":"https://codeload.github.com/theKashey/stylelint-semantic-groups/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045231,"owners_count":21038553,"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","stylelint-order"],"created_at":"2024-11-10T16:40:51.397Z","updated_at":"2025-10-05T12:27:07.778Z","avatar_url":"https://github.com/theKashey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stylelint-semantic-groups\n\nOpinionated group based SCSS property ordering for better `maintainability` and `perception`.\n\n📖 Theory behind: [Harry Potter and the Order of CSS](https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec)\n\n---\n\n# Usage\n\n- install required packages\n\n```bash\nyarn add stylelint-order stylelint-semantic-groups\n```\n\n- set configuration\n\n### Recommended configuration\n\n```js\n// .stylelintrc.js\nconst { propertyOrdering, selectorOrdering } = require('stylelint-semantic-groups');\n\nmodule.exports = {\n  plugins: ['stylelint-order'],\n  rules: {\n    'order/order': selectorOrdering, // to fine-tune configuration use selectorOrderFactory\n    'order/properties-order': propertyOrdering,\n  },\n};\n```\n\n### Minimal configuration\n\n```js\n// .stylelintrc.js\nconst { propertyOrdering } = require('stylelint-semantic-groups');\n\nmodule.exports = {\n  plugins: ['stylelint-order'],\n  rules: {\n    /* optional by recommended */\n    'order/order': [\n      'custom-properties',\n      'dollar-variables',\n      'declarations',\n      'at-rules', // \u003c-- important, `@media` should go before `\u0026:pseudo`\n      'rules',\n    ],\n    /* the actual usage of this package */\n    'order/properties-order': propertyOrdering,\n  },\n};\n```\n\nStylelint config that sorts related property declarations by grouping together following the order:\n\n- (optional) SCSS/CSS variables, handled by `order/order`\n- Layout Positioning - Element bound properties (in terms of BEM) such as `grid-area`. Note: in the current implementation it is mostly about grids and grids only.\n- Positioning\n- Box Model\n- Typography\n- Visual\n- Misc\n- Animation\n- (optional) at-rules, handled by `order/order`\n- (optional) nested rules, handled by `order/order`\n\n```scss\n.declaration-order {\n  --color: #fff;\n\n  /* Positioning */\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n\n  /* Box Model */ /* white space between groups is ENFORCED */\n  display: block;\n  float: right;\n  width: 100px;\n  height: 100px;\n  margin: 10px;\n  padding: 10px;\n\n  /* Typography */\n  color: #888;\n  font: normal 16px Helvetica, sans-serif;\n  line-height: 1.3;\n  text-align: center;\n\n  /* Visual */\n  background-color: #eee;\n  border: 1px solid #888;\n  border-radius: 4px;\n  opacity: 1;\n\n  /* Animation */\n  transition: all 1s;\n\n  /* Misc */\n  user-select: none;\n}\n```\n\n## See also\n\n- this plugin is based on [stylelint-config-rational-order](https://github.com/constverum/stylelint-config-rational-order)\n- this plugin implements ideas from [idiomatic-css](https://github.com/necolas/idiomatic-css)\n\n# Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Fstylelint-semantic-groups","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthekashey%2Fstylelint-semantic-groups","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Fstylelint-semantic-groups/lists"}