https://github.com/siilwyn/prettier-plugin-css-order

Prettier plugin to sort CSS declarations in a certain order.
https://github.com/siilwyn/prettier-plugin-css-order

postcss prettier prettier-plugin

Last synced: 5 days ago
JSON representation

Prettier plugin to sort CSS declarations in a certain order.

• Host: GitHub
• URL: https://github.com/siilwyn/prettier-plugin-css-order
• Owner: Siilwyn
• Created: 2021-07-27T20:40:52.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-21T15:56:53.000Z (3 months ago)
• Last Synced: 2024-10-22T03:36:06.322Z (3 months ago)
• Topics: postcss, prettier, prettier-plugin
• Language: JavaScript
• Homepage: https://npmjs.com/prettier-plugin-css-order
• Size: 32.2 KB
• Stars: 127
• Watchers: 4
• Forks: 14
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • Contributing: contributing.md
  • License: license.md

Awesome Lists containing this project

README

        
# CSS Order Prettier Plugin

[![npm][npm-badge]][npm]

A [Prettier](https://prettier.io/) plugin to sort CSS, SCSS or Less declarations based on their property names.  

Using [css-declaration-sorter](https://github.com/Siilwyn/css-declaration-sorter/) under the hood.

## Usage

Following the Prettier plugin guidelines, this package depends on Prettier as a peer dependency:  

`npm install prettier-plugin-css-order --save-dev`

To enable the plugin use the Prettier API, CLI or configuration file. For example using the JS configuration:

```js

{

  plugins: ["prettier-plugin-css-order"]

}

```

### Configuration

This plugin adds two configurable keys to Prettier:

- [`cssDeclarationSorterOrder`](https://github.com/Siilwyn/css-declaration-sorter#order) defaults to `concentric-css`.

- [`cssDeclarationSorterKeepOverrides`](https://github.com/Siilwyn/css-declaration-sorter#keepoverrides) defaults to `true`, for a new codebase `false` is recommended.

- `cssDeclarationSorterCustomOrder`, an array of property names, their order is used to sort with. This overrides the `cssDeclarationSorterOrder` option!

[npm]: https://www.npmjs.com/package/prettier-plugin-css-order

[npm-badge]: https://tinyshields.dev/npm/prettier-plugin-css-order.svg