{"id":19653034,"url":"https://github.com/csstools/stylelint-devtool-prop-order","last_synced_at":"2025-04-28T17:31:17.476Z","repository":{"id":66028404,"uuid":"569025844","full_name":"csstools/stylelint-devtool-prop-order","owner":"csstools","description":"Enforce CSS property ordering like Chrome DevTools","archived":false,"fork":false,"pushed_at":"2022-11-22T00:22:24.000Z","size":10,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-14T04:03:23.811Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-11-21T23:17:30.000Z","updated_at":"2023-03-07T08:28:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"e9704364-0b57-41ee-a03d-0bd38fe930c9","html_url":"https://github.com/csstools/stylelint-devtool-prop-order","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"4ae4cd1a07b5fec0c0ab2ed91c36f58981152663"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fstylelint-devtool-prop-order","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fstylelint-devtool-prop-order/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fstylelint-devtool-prop-order/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fstylelint-devtool-prop-order/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/stylelint-devtool-prop-order/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223793920,"owners_count":17203890,"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":[],"created_at":"2024-11-11T15:12:58.370Z","updated_at":"2024-11-11T15:12:59.027Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stylelint DevTool Props [\u003cimg src=\"https://jonneal.dev/stylelint-logo.svg\" alt=\"stylelint\" width=\"90\" height=\"90\" align=\"right\"\u003e][stylelint]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[Stylelint DevTool Props] is a [stylelint] rule to enforce CSS property ordering like Chrome DevTools.\n\n## Usage\n\nAdd [stylelint] and [Stylelint DevTool Props] to your project.\n\n```shell\nnpm install stylelint stylelint-devtool-prop-order --save-dev\n```\n\nAdd [Stylelint DevTool Props] to your [stylelint configuration].\n\n```js\n{\n  \"plugins\": [\n    \"stylelint-devtool-prop-order\"\n  ],\n  \"rules\": {\n    \"csstools/devtool-prop-order\": \"always\" || \"ignore\"\n  }\n}\n```\n\n## Options\n\n### always\n\nIf the first option is `\"always\"` or `true`, then [Stylelint DevTool Props]\nrequires all nodes to be linted.\n\n## Examples\n\nThe following examples demonstrate violations and the result of fixes.\n\n```css\n:root {\n  --SystemType: systsem-ui;\n  --SystemMonoType: ui-monospace;\n}\n```\n\n```css\n.example {\n  --border-color:;\n\n  align-self: center;\n  color: var(--Orange600Color);\n  display: inline-block;\n  inline-size: 8.75em;\n  text-align: end;\n  white-space: nowrap;\n}\n```\n\n```css\n.example {\n  display: inline-block;\n\n  /* Layout */\n  align-self: center;\n  inline-size: 8.75em;\n\n  /* Text */\n  text-align: end;\n  white-space: nowrap;\n\n  /* Appearance */\n  color: var(--color);\n\n  --color: Orange;\n}\n```\n\n```css\n.aside::before {\n  /* Layout */\n  width: 0.875em;\n\n  /* Appearance */\n  background-position: top 1rem center;\n  background-repeat: no-repeat;\n  border-end-start-radius: 0.375rem;\n  border-start-start-radius: 0.375rem;\n\n  /* Generated */\n  content: \"\";\n}\n```\n\n```css\n.visually-hidden {\n  all: unset !important;\n  position: fixed !important;\n\n  /* Layout */\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  width: 1px !important;\n\n  /* Behavior */\n  pointer-events: none !important;\n}\n```\n\nWhile the following patterns are considered violations:\n\n**☝️ Warnings**\n\u003e - Expected \"display\" to come before \"align-self\" in group \"Display\"\n\u003e - Expected \"text-align\" to come before \"white-space\" in group \"Text\"\n\u003e - Expected an empty line before property \"display\"\n\u003e - Expected an empty line before property \"inline-size\"\n\u003e - Expected an empty line before property \"color\"\n\n```css\n.aside::before {\n  background-position: top 1rem center;\n  background-repeat: no-repeat;\n  border-end-start-radius: 0.375rem;\n  border-start-start-radius: 0.375rem;\n  content: \"\";\n  width: 0.875em;\n}\n```\n\n**☝️ Warnings**\n\u003e - Expected \"position\" to come before \"pointer-events\" in group \"Display\"\n\u003e - Expected an empty line before property \"clip-path\"\n\u003e - Expected an empty line before property \"pointer-events\"\n\u003e - Expected an empty line before property \"position\"\n\u003e - Expected an empty line before property \"width\"\n\n```css\n.visually-hidden {\n  all: unset !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  pointer-events: none !important;\n  position: fixed !important;\n  width: 1px !important;\n}\n```\n\n**☝️ Warnings**\n\u003e - Expected \"position\" to come before \"pointer-events\" in group \"Layout\"\n\u003e - Expected an empty line before property \"clip-path\"\n\u003e - Expected an empty line before property \"pointer-events\"\n\u003e - Expected an empty line before property \"position\"\n\n### ignore\n\nIf the first option is `\"ignore\"` or `null`, then [Stylelint DevTool Props] does\nnothing.\n\n## Secondary Options\n\nNone at this time.\n\n[cli-img]: https://img.shields.io/travis/csstools/stylelint-devtool-prop-order/main.svg\n[cli-url]: https://travis-ci.org/csstools/stylelint-devtool-prop-order\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/stylelint/stylelint\n[npm-img]: https://img.shields.io/npm/v/stylelint-devtool-prop-order.svg\n[npm-url]: https://www.npmjs.com/package/stylelint-devtool-prop-order\n\n[stylelint]: https://github.com/stylelint/stylelint\n[stylelint configuration]: https://github.com/stylelint/stylelint/blob/main/docs/user-guide/configuration.md#readme\n[Stylelint DevTool Props]: https://github.com/csstools/stylelint-devtool-prop-order\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fstylelint-devtool-prop-order","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fstylelint-devtool-prop-order","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fstylelint-devtool-prop-order/lists"}