https://github.com/csstools/stylelint-devtool-prop-order
Enforce CSS property ordering like Chrome DevTools
https://github.com/csstools/stylelint-devtool-prop-order
Last synced: 11 months ago
JSON representation
Enforce CSS property ordering like Chrome DevTools
- Host: GitHub
- URL: https://github.com/csstools/stylelint-devtool-prop-order
- Owner: csstools
- License: cc0-1.0
- Created: 2022-11-21T23:17:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-22T00:22:24.000Z (over 3 years ago)
- Last Synced: 2024-04-14T04:03:23.811Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 5
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Stylelint DevTool Props [
][stylelint]
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]
[Stylelint DevTool Props] is a [stylelint] rule to enforce CSS property ordering like Chrome DevTools.
## Usage
Add [stylelint] and [Stylelint DevTool Props] to your project.
```shell
npm install stylelint stylelint-devtool-prop-order --save-dev
```
Add [Stylelint DevTool Props] to your [stylelint configuration].
```js
{
"plugins": [
"stylelint-devtool-prop-order"
],
"rules": {
"csstools/devtool-prop-order": "always" || "ignore"
}
}
```
## Options
### always
If the first option is `"always"` or `true`, then [Stylelint DevTool Props]
requires all nodes to be linted.
## Examples
The following examples demonstrate violations and the result of fixes.
```css
:root {
--SystemType: systsem-ui;
--SystemMonoType: ui-monospace;
}
```
```css
.example {
--border-color:;
align-self: center;
color: var(--Orange600Color);
display: inline-block;
inline-size: 8.75em;
text-align: end;
white-space: nowrap;
}
```
```css
.example {
display: inline-block;
/* Layout */
align-self: center;
inline-size: 8.75em;
/* Text */
text-align: end;
white-space: nowrap;
/* Appearance */
color: var(--color);
--color: Orange;
}
```
```css
.aside::before {
/* Layout */
width: 0.875em;
/* Appearance */
background-position: top 1rem center;
background-repeat: no-repeat;
border-end-start-radius: 0.375rem;
border-start-start-radius: 0.375rem;
/* Generated */
content: "";
}
```
```css
.visually-hidden {
all: unset !important;
position: fixed !important;
/* Layout */
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
width: 1px !important;
/* Behavior */
pointer-events: none !important;
}
```
While the following patterns are considered violations:
**☝️ Warnings**
> - Expected "display" to come before "align-self" in group "Display"
> - Expected "text-align" to come before "white-space" in group "Text"
> - Expected an empty line before property "display"
> - Expected an empty line before property "inline-size"
> - Expected an empty line before property "color"
```css
.aside::before {
background-position: top 1rem center;
background-repeat: no-repeat;
border-end-start-radius: 0.375rem;
border-start-start-radius: 0.375rem;
content: "";
width: 0.875em;
}
```
**☝️ Warnings**
> - Expected "position" to come before "pointer-events" in group "Display"
> - Expected an empty line before property "clip-path"
> - Expected an empty line before property "pointer-events"
> - Expected an empty line before property "position"
> - Expected an empty line before property "width"
```css
.visually-hidden {
all: unset !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
pointer-events: none !important;
position: fixed !important;
width: 1px !important;
}
```
**☝️ Warnings**
> - Expected "position" to come before "pointer-events" in group "Layout"
> - Expected an empty line before property "clip-path"
> - Expected an empty line before property "pointer-events"
> - Expected an empty line before property "position"
### ignore
If the first option is `"ignore"` or `null`, then [Stylelint DevTool Props] does
nothing.
## Secondary Options
None at this time.
[cli-img]: https://img.shields.io/travis/csstools/stylelint-devtool-prop-order/main.svg
[cli-url]: https://travis-ci.org/csstools/stylelint-devtool-prop-order
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/stylelint/stylelint
[npm-img]: https://img.shields.io/npm/v/stylelint-devtool-prop-order.svg
[npm-url]: https://www.npmjs.com/package/stylelint-devtool-prop-order
[stylelint]: https://github.com/stylelint/stylelint
[stylelint configuration]: https://github.com/stylelint/stylelint/blob/main/docs/user-guide/configuration.md#readme
[Stylelint DevTool Props]: https://github.com/csstools/stylelint-devtool-prop-order