stylelint-config-clean-order - GitLite

KO | EN

gitlite — search

#hacktoberfest #llm #machine-learning #rust #deep-learning #linux #macos #kubernetes #vue #awesome-list #security #pytorch #mcp #open-source

stylelint-config-clean-order

(★ 189)

A clean and complete config for stylelint-order.

File Explorer

Download Latest Version (.zip)

- config.json
- long-rockets-give.md
- - _build.yaml
  - _checks.yaml
  - ci.yaml
  - release.yaml
- CODEOWNERS
- dependabot.yaml
- commit-msg
- pre-commit
- install-husky.ts
- - appearance.ts
  - box-model.ts
  - interaction.ts
  - layout.ts
  - positioning.ts
  - svg-presentation.ts
  - transition.ts
  - typography.ts
- config.ts
- error.ts
- index.ts
- stylelint-order.d.ts
- groups.test.ts
- process-linter-result.ts
- styles.css
- styles.test.ts
.gitignore
CHANGELOG.md
commitlint.config.ts
eslint.config.js
LICENSE
lint-staged.config.ts
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
prettier.config.ts
README.md
tsconfig.build.json
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/kutsan/stylelint-config-clean-order

Downloads the entire project code from GitHub to your computer.

cd stylelint-config-clean-order

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm add --save-dev stylelint stylelint-order stylelint-config-clean-order

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# stylelint-config-clean-order

[![npm](https://img.shields.io/npm/v/stylelint-config-clean-order)](https://www.npmjs.com/package/stylelint-config-clean-order)
[![ci](https://github.com/kutsan/stylelint-config-clean-order/actions/workflows/ci.yaml/badge.svg)](https://github.com/kutsan/stylelint-config-clean-order/actions/workflows/ci.yaml)

Sort CSS properties into logical groups with [stylelint-order](https://github.com/hudochenkov/stylelint-order).

```css
.card {
  /* Interaction */
  cursor: pointer;

/* Positioning */
  position: relative;
  z-index: 1;

/* Layout */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);

/* Box Model */
  width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);

/* Typography */
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);

/* Appearance */
  opacity: 1;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-md);

/* Transition */
  transition: transform var(--duration-fast);
}
```

## Usage

Install [`stylelint`](https://github.com/stylelint/stylelint), this config package and its `stylelint-order` peer dependency to your project:

```sh
npm add --save-dev stylelint stylelint-order stylelint-config-clean-order
```

Configure your `stylelint` configuration file (`stylelint.config.js`) to extend this package:

```js
/** @type {import('stylelint').Config} */
export default {
  extends: ['stylelint-config-clean-order'],
}
```

Run `stylelint --fix` to automatically sort properties.

## Severity Options

Default severity level is `warning` but you can use error variant to change severity level to `error`.

```js
/** @type {import('stylelint').Config} */
export default {
  extends: ['stylelint-config-clean-order/error'],
}
```

## Property Order

Properties are organized into logical groups:

1. **Interaction**: `cursor`, `pointer-events`, `user-select`, etc.
2. **Positioning**: `position`, `z-index`, `top`, `right`, `bottom`, `left`, `transform`, etc.
3. **Layout**: `display`, `flex`, `grid`, `gap`, `align-items`, `justify-content`, etc.
4. **Box Model**: `width`, `height`, `margin`, `padding`, `border`, etc.
5. **Typography**: `font-size`, `line-height`, `color`, `text-align`, etc.
6. **Appearance**: `background`, `opacity`, `box-shadow`, `filter`, etc.
7. **Transition**: `transition`, `animation`, etc.

Within each group, properties are ordered logically (e.g., `font-size` before `line-height`, `display` before `align-items`). If you think a property order doesn't make sense, please open an issue.

## Customization

You can import raw property groups to add or override rule options. Please refer to [stylelint-order](https://github.com/hudochenkov/stylelint-order) plugin documentation.

For example, you can override `'properties-order'` rule to not have empty lines between groups:

```javascript
import { propertyGroups } from 'stylelint-config-clean-order'

const propertiesOrder = propertyGroups.map((properties) => ({
  noEmptyLineBetween: true,
  emptyLineBefore: 'never', // Don't add empty lines between order groups.
  properties,
}))

/** @type {import('stylelint').Config} */
export default {
  extends: ['stylelint-config-clean-order'],
  rules: {
    'order/properties-order': [
      propertiesOrder,
      {
        severity: 'warning',
        unspecified: 'bottomAlphabetical',
      },
    ],
  },
}
```

## Extra Empty Lines for Formatting

In addition to `stylelint-order` plugin, this package also overrides two rules (`declaration-empty-line-before` and `at-rule-empty-line-before`) to improve the final formatted result by adding extra empty lines between declarations. `stylelint-config-clean-order` does not override a rule other than these two.

If you want these rules to put into effect, make sure config packages after `stylelint-config-clean-order` do not override them.

## License

MIT