From cf4f56e1eb7c3459609e02db8a8501fdd00c1917 Mon Sep 17 00:00:00 2001 From: Selwyn Date: Mon, 1 Apr 2024 12:52:03 +0000 Subject: [PATCH 1/3] Add back custom sort order option * Add custom order (#40) * Add custom order * Updated implementation * Refactor additions --------- Co-authored-by: Selwyn * Check if array has items --------- Co-authored-by: Daniil Savitskii <46084440+SavaCool122@users.noreply.github.com> --- readme.md | 1 + src/main.mjs | 21 ++++++++++++++++++++- src/main.test.mjs | 20 ++++++++++++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 4b29d52..0a7738c 100644 --- a/readme.md +++ b/readme.md @@ -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", From 0948dc87da298ee48fc38c2cfe11d4f5c0fb6b56 Mon Sep 17 00:00:00 2001 From: Selwyn Date: Mon, 1 Apr 2024 14:56:03 +0200 Subject: [PATCH 2/3] 2.1.2 --- changelog.md | 5 +++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) 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", From 16fda3d382e112e5872ced4ec13093e69101af99 Mon Sep 17 00:00:00 2001 From: Selwyn Date: Mon, 21 Oct 2024 17:56:17 +0200 Subject: [PATCH 3/3] Remove postcss dependency from usage install command Closes #45 --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 0a7738c..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