diff --git a/changelog.md b/changelog.md index fc58ae7..26e12fc 100644 --- a/changelog.md +++ b/changelog.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and follows [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [2.1.2] - 2024-04-01 +### Fixed +- Bring back custom order feature introduced in `2.1.0`. + ## [2.1.1] - 2024-03-26 ### Fixed - Revert addition of new option because it breaks usage without. @@ -40,6 +44,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) ## [1.0.0] - 2021-07-27 Initial release. +[2.1.2]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v2.1.1...v2.1.2 [2.1.1]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v2.1.0...v2.1.1 [2.1.0]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v2.0.1...v2.1.0 [2.0.1]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v2.0.0...v2.0.1 diff --git a/package-lock.json b/package-lock.json index 74b33f8..4ad0b08 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "prettier-plugin-css-order", - "version": "2.1.1", + "version": "2.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "prettier-plugin-css-order", - "version": "2.1.1", + "version": "2.1.2", "license": "ISC", "dependencies": { "css-declaration-sorter": "^7.1.1", diff --git a/package.json b/package.json index ed288e2..ddf0fb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "prettier-plugin-css-order", - "version": "2.1.1", + "version": "2.1.2", "description": "Sort CSS declarations in a certain order.", "type": "module", "main": "./src/main.mjs", diff --git a/readme.md b/readme.md index 4b29d52..c2e985a 100644 --- a/readme.md +++ b/readme.md @@ -6,7 +6,7 @@ Using [css-declaration-sorter](https://github.com/Siilwyn/css-declaration-sorter ## Usage Following the Prettier plugin guidelines, this package depends on Prettier as a peer dependency: -`npm install postcss prettier-plugin-css-order --save-dev` +`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 @@ -19,6 +19,7 @@ To enable the plugin use the Prettier API, CLI or configuration file. For exampl 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 diff --git a/src/main.mjs b/src/main.mjs index 593651d..02a34c4 100644 --- a/src/main.mjs +++ b/src/main.mjs @@ -9,10 +9,21 @@ const syntaxMapping = { scss: postcssScss, }; +function resolveSorterOption({ + cssDeclarationSorterCustomOrder, + cssDeclarationSorterOrder, +}) { + return cssDeclarationSorterCustomOrder.length > 0 + ? (a, b) => + cssDeclarationSorterCustomOrder.indexOf(a) - + cssDeclarationSorterCustomOrder.indexOf(b) + : cssDeclarationSorterOrder; +} + function parseSort(text, options) { return postcss([ cssDeclarationSorter({ - order: options.cssDeclarationSorterOrder, + order: resolveSorterOption(options), keepOverrides: options.cssDeclarationSorterKeepOverrides, }), ]) @@ -62,6 +73,14 @@ export default { category: "css-declaration-sorter", default: true, }, + cssDeclarationSorterCustomOrder: { + type: "string", + array: true, + description: + "An array of property names, their order is used to sort with. This overrides the `cssDeclarationSorterOrder` option!", + category: "css-declaration-sorter", + default: [{ value: [] }], + }, }, parsers: { css: { diff --git a/src/main.test.mjs b/src/main.test.mjs index 6d9b57d..4f14444 100644 --- a/src/main.test.mjs +++ b/src/main.test.mjs @@ -21,6 +21,26 @@ assert.strictEqual( "uses order option", ); +assert.strictEqual( + await format("a{flex: 0;z-index: 1;border: 0;}", { + parser: "css", + plugins: [plugin], + cssDeclarationSorterCustomOrder: ["z-index", "flex", "border"], + }), + "a {\n z-index: 1;\n flex: 0;\n border: 0;\n}\n", + "uses custom order option", +); + +assert.strictEqual( + await format("a{border: 1;z-index: 0;}", { + parser: "css", + plugins: [plugin], + cssDeclarationSorterCustomOrder: [], + }), + "a {\n z-index: 0;\n border: 1;\n}\n", + "empty custom order option causes the option to be unused", +); + assert.strictEqual( await format("a{flex-grow: 0;flex: 1;}", { parser: "css",