From 5ed56c8d66ea3de1b781b7bf0b61b8031bc6d51d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Ma=C5=82olepszy?= Date: Wed, 16 Oct 2024 20:07:31 +0200 Subject: [PATCH 1/7] Make plugin ignore case while sorting declarations --- lib/__tests__/test.js | 2 +- .../properties-alphabetical-case-insensitive.css | 6 ++++++ ...operties-alphabetical-case-insensitive.expected.css | 6 ++++++ .../__tests__/fixtures/properties-have-same-name-2.css | 6 +++--- .../fixtures/properties-have-same-name-2.expected.css | 6 +++--- .../__tests__/fixtures/properties-have-same-name-3.css | 4 ++-- .../fixtures/properties-have-same-name-3.expected.css | 4 ++-- lib/properties-order/__tests__/properties-order.js | 10 ++++++++++ lib/properties-order/sortNodeProperties.js | 2 +- 9 files changed, 34 insertions(+), 12 deletions(-) create mode 100644 lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.css create mode 100644 lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.expected.css diff --git a/lib/__tests__/test.js b/lib/__tests__/test.js index a2a3e3c..6616554 100644 --- a/lib/__tests__/test.js +++ b/lib/__tests__/test.js @@ -14,7 +14,7 @@ test(`Should throw an error if config has error`, () => { const pluginRun = postcss([plugin(opts)]) .process('', { from: undefined }) .then(() => { - expect('Plugin should throw an error').toBeFalst(); + expect('Plugin should throw an error').toBeTruthy(); }) .catch((err) => { throw err; diff --git a/lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.css b/lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.css new file mode 100644 index 0000000..185c451 --- /dev/null +++ b/lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.css @@ -0,0 +1,6 @@ +a { + Border: red; + align-content: center; + font-family: sans-serif; + Display: block; +} diff --git a/lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.expected.css b/lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.expected.css new file mode 100644 index 0000000..47d722a --- /dev/null +++ b/lib/properties-order/__tests__/fixtures/properties-alphabetical-case-insensitive.expected.css @@ -0,0 +1,6 @@ +a { + align-content: center; + Border: red; + Display: block; + font-family: sans-serif; +} diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css index c5e3426..3bceb69 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css @@ -1,7 +1,7 @@ div { position: fixed; - top: 0; - top: $header-height; + Top: 0; + Top: $header-height; a: 0; b: 1; c: 2; @@ -15,7 +15,7 @@ div { div { position: fixed; top: $header-height; - top: 0; + Top: 0; a: 0; b: 1; c: 2; diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css index c5e3426..3bceb69 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css @@ -1,7 +1,7 @@ div { position: fixed; - top: 0; - top: $header-height; + Top: 0; + Top: $header-height; a: 0; b: 1; c: 2; @@ -15,7 +15,7 @@ div { div { position: fixed; top: $header-height; - top: 0; + Top: 0; a: 0; b: 1; c: 2; diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css index 47e0daf..a53cbae 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css @@ -4,8 +4,8 @@ -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; - display: -ms-flexbox; - display: flex; + Display: -ms-flexbox; + Display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css index 3b1090d..3e4aedf 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css @@ -3,8 +3,8 @@ -webkit-box-align: center; -webkit-box-pack: justify; display: -webkit-box; - display: -ms-flexbox; - display: flex; + Display: -ms-flexbox; + Display: flex; -ms-flex-align: center; -ms-flex-pack: justify; -ms-flex-wrap: wrap; diff --git a/lib/properties-order/__tests__/properties-order.js b/lib/properties-order/__tests__/properties-order.js index 10c5e3c..8badfc5 100644 --- a/lib/properties-order/__tests__/properties-order.js +++ b/lib/properties-order/__tests__/properties-order.js @@ -145,6 +145,16 @@ test('Should sort properties alphabetically', () => __dirname )); +test('Should sort properties alphabetically regardless of case', () => { + runTest( + 'properties-alphabetical-case-insensitive', + { + 'properties-order': 'alphabetical', + }, + __dirname + ); +}); + test('Should sort shorthand properties before their longhand versions', () => runTest( 'properties-alphabetical-shorthand', diff --git a/lib/properties-order/sortNodeProperties.js b/lib/properties-order/sortNodeProperties.js index 9c15667..e14b4bf 100644 --- a/lib/properties-order/sortNodeProperties.js +++ b/lib/properties-order/sortNodeProperties.js @@ -25,7 +25,7 @@ module.exports = function sortNodeProperties(node, { order, unspecifiedPropertie isStandardSyntaxProperty(childNode.prop) && !isCustomProperty(childNode.prop) ) { - let unprefixedPropName = vendor.unprefixed(childNode.prop); + let unprefixedPropName = vendor.unprefixed(childNode.prop).toLowerCase(); // Hack to allow -moz-osx-font-smoothing to be understood // just like -webkit-font-smoothing From 5c97d84a0b725a6071321d42105d08a0c9eb1abf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Ma=C5=82olepszy?= Date: Wed, 16 Oct 2024 20:09:12 +0200 Subject: [PATCH 2/7] Fixing typo --- lib/__tests__/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/__tests__/test.js b/lib/__tests__/test.js index 6616554..aa24bf5 100644 --- a/lib/__tests__/test.js +++ b/lib/__tests__/test.js @@ -14,7 +14,7 @@ test(`Should throw an error if config has error`, () => { const pluginRun = postcss([plugin(opts)]) .process('', { from: undefined }) .then(() => { - expect('Plugin should throw an error').toBeTruthy(); + expect('Plugin should throw an error').toBeFalsy(); }) .catch((err) => { throw err; From d665ea409e5fb92913d5ec3614bdc1e59a3d83e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Ma=C5=82olepszy?= Date: Thu, 17 Oct 2024 09:22:45 +0200 Subject: [PATCH 3/7] Fix test with parsing wrong config --- lib/__tests__/test.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/lib/__tests__/test.js b/lib/__tests__/test.js index aa24bf5..13479df 100644 --- a/lib/__tests__/test.js +++ b/lib/__tests__/test.js @@ -11,14 +11,7 @@ test(`Should throw an error if config has error`, () => { order: 'Justice Rains From Above', }; - const pluginRun = postcss([plugin(opts)]) - .process('', { from: undefined }) - .then(() => { - expect('Plugin should throw an error').toBeFalsy(); - }) - .catch((err) => { - throw err; - }); - - expect(pluginRun).rejects.toBeTruthy(); + return expect(postcss([plugin(opts)]).process('', { from: undefined })).rejects.toThrow( + 'postcss-sorting: order: Should be an array' + ); }); From 9cc03809b1a3c62936f747400ea7ad814bb59ea6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Ma=C5=82olepszy?= Date: Thu, 17 Oct 2024 23:21:28 +0200 Subject: [PATCH 4/7] Create new tests instead of changing existing ones --- .../fixtures/properties-have-same-name-2.css | 6 ++-- .../properties-have-same-name-2.expected.css | 6 ++-- .../fixtures/properties-have-same-name-3.css | 4 +-- .../properties-have-same-name-3.expected.css | 4 +-- .../fixtures/properties-have-same-name-4.css | 27 +++++++++++++++++ .../properties-have-same-name-4.expected.css | 27 +++++++++++++++++ .../fixtures/properties-have-same-name-5.css | 29 +++++++++++++++++++ .../properties-have-same-name-5.expected.css | 29 +++++++++++++++++++ .../__tests__/properties-order.js | 18 ++++++++++++ 9 files changed, 140 insertions(+), 10 deletions(-) create mode 100644 lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css create mode 100644 lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css create mode 100644 lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css create mode 100644 lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css index 3bceb69..c5e3426 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.css @@ -1,7 +1,7 @@ div { position: fixed; - Top: 0; - Top: $header-height; + top: 0; + top: $header-height; a: 0; b: 1; c: 2; @@ -15,7 +15,7 @@ div { div { position: fixed; top: $header-height; - Top: 0; + top: 0; a: 0; b: 1; c: 2; diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css index 3bceb69..c5e3426 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-2.expected.css @@ -1,7 +1,7 @@ div { position: fixed; - Top: 0; - Top: $header-height; + top: 0; + top: $header-height; a: 0; b: 1; c: 2; @@ -15,7 +15,7 @@ div { div { position: fixed; top: $header-height; - Top: 0; + top: 0; a: 0; b: 1; c: 2; diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css index a53cbae..47e0daf 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.css @@ -4,8 +4,8 @@ -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; - Display: -ms-flexbox; - Display: flex; + display: -ms-flexbox; + display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css index 3e4aedf..3b1090d 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-3.expected.css @@ -3,8 +3,8 @@ -webkit-box-align: center; -webkit-box-pack: justify; display: -webkit-box; - Display: -ms-flexbox; - Display: flex; + display: -ms-flexbox; + display: flex; -ms-flex-align: center; -ms-flex-pack: justify; -ms-flex-wrap: wrap; diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css new file mode 100644 index 0000000..ee7597b --- /dev/null +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css @@ -0,0 +1,27 @@ +div { + position: fixed; + top: 0; + Top: $header-height; + A: 0; + b: 1; + C: 2; + d: 3; + E: 4; + f: 5; + G: 6; + h: 7; +} + +div { + position: fixed; + Top: $header-height; + top: 0; + a: 0; + B: 1; + c: 2; + D: 3; + e: 4; + F: 5; + g: 6; + H: 7; +} diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css new file mode 100644 index 0000000..ee7597b --- /dev/null +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css @@ -0,0 +1,27 @@ +div { + position: fixed; + top: 0; + Top: $header-height; + A: 0; + b: 1; + C: 2; + d: 3; + E: 4; + f: 5; + G: 6; + h: 7; +} + +div { + position: fixed; + Top: $header-height; + top: 0; + a: 0; + B: 1; + c: 2; + D: 3; + e: 4; + F: 5; + g: 6; + H: 7; +} diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css new file mode 100644 index 0000000..e46756c --- /dev/null +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css @@ -0,0 +1,29 @@ +.header { + Padding-bottom: 20px; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + Justify-content: space-between; + display: -webkit-box; + Display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + Align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.header { + -webkit-box-pack: justify; + -ms-Flex-pack: justify; + justify-content: space-between; + Display: -webkit-box; + display: -ms-flexbox; + Display: flex; + -webkit-box-align: center; + -ms-Flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding-bottom: 20px; +} diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css new file mode 100644 index 0000000..b06f090 --- /dev/null +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css @@ -0,0 +1,29 @@ +.header { + Align-items: center; + -webkit-box-align: center; + -webkit-box-pack: justify; + display: -webkit-box; + Display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + -ms-flex-pack: justify; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + Justify-content: space-between; + Padding-bottom: 20px; +} + +.header { + align-items: center; + -webkit-box-align: center; + -webkit-box-pack: justify; + Display: -webkit-box; + display: -ms-flexbox; + Display: flex; + -ms-Flex-align: center; + -ms-Flex-pack: justify; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + justify-content: space-between; + padding-bottom: 20px; +} diff --git a/lib/properties-order/__tests__/properties-order.js b/lib/properties-order/__tests__/properties-order.js index 8badfc5..754c6b5 100644 --- a/lib/properties-order/__tests__/properties-order.js +++ b/lib/properties-order/__tests__/properties-order.js @@ -91,6 +91,24 @@ test('Should preserve order if properties have same name', () => __dirname )); +test('Should preserve order if properties have same name (case insensitive)', () => + runTest( + 'properties-have-same-name-4', + { + 'properties-order': ['position', 'z-index'], + }, + __dirname + )); + +test('Should preserve order if properties have same name (case insensitive)', () => + runTest( + 'properties-have-same-name-5', + { + 'properties-order': 'alphabetical', + }, + __dirname + )); + test(`Should not remove first comment in the rule if it's not on separate line (properties-order)`, () => runTest( 'first-comment-in-the-rule', From c8d9467fe71f8cf69e87cc12e79f5df507d6a33b Mon Sep 17 00:00:00 2001 From: Astrael1 <33071364+Astrael1@users.noreply.github.com> Date: Fri, 18 Oct 2024 09:14:18 +0200 Subject: [PATCH 5/7] Update lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css Co-authored-by: Aleks Hudochenkov --- .../fixtures/properties-have-same-name-4.css | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css index ee7597b..02ab582 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.css @@ -1,27 +1,11 @@ div { position: fixed; top: 0; - Top: $header-height; - A: 0; - b: 1; - C: 2; - d: 3; - E: 4; - f: 5; - G: 6; - h: 7; + Top: 0; } div { position: fixed; - Top: $header-height; + Top: 0; top: 0; - a: 0; - B: 1; - c: 2; - D: 3; - e: 4; - F: 5; - g: 6; - H: 7; } From 0f31e211433124d759b3b36683736fe62dff3767 Mon Sep 17 00:00:00 2001 From: Astrael1 <33071364+Astrael1@users.noreply.github.com> Date: Fri, 18 Oct 2024 09:14:27 +0200 Subject: [PATCH 6/7] Update lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css Co-authored-by: Aleks Hudochenkov --- .../fixtures/properties-have-same-name-5.css | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css index e46756c..ee7d0e9 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.css @@ -1,29 +1,9 @@ .header { Padding-bottom: 20px; - -webkit-box-pack: justify; - -ms-flex-pack: justify; Justify-content: space-between; display: -webkit-box; Display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; Align-items: center; - -ms-flex-wrap: wrap; flex-wrap: wrap; } - -.header { - -webkit-box-pack: justify; - -ms-Flex-pack: justify; - justify-content: space-between; - Display: -webkit-box; - display: -ms-flexbox; - Display: flex; - -webkit-box-align: center; - -ms-Flex-align: center; - align-items: center; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding-bottom: 20px; -} From 19ced6ddf09e2c8126691fb8adb0fbfd31901b84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Ma=C5=82olepszy?= Date: Fri, 18 Oct 2024 09:20:59 +0200 Subject: [PATCH 7/7] Fix expected results --- .../properties-have-same-name-4.expected.css | 20 ++----------------- .../properties-have-same-name-5.expected.css | 20 ------------------- 2 files changed, 2 insertions(+), 38 deletions(-) diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css index ee7597b..02ab582 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-4.expected.css @@ -1,27 +1,11 @@ div { position: fixed; top: 0; - Top: $header-height; - A: 0; - b: 1; - C: 2; - d: 3; - E: 4; - f: 5; - G: 6; - h: 7; + Top: 0; } div { position: fixed; - Top: $header-height; + Top: 0; top: 0; - a: 0; - B: 1; - c: 2; - D: 3; - e: 4; - F: 5; - g: 6; - H: 7; } diff --git a/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css index b06f090..cbdbdf1 100644 --- a/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css +++ b/lib/properties-order/__tests__/fixtures/properties-have-same-name-5.expected.css @@ -1,29 +1,9 @@ .header { Align-items: center; - -webkit-box-align: center; - -webkit-box-pack: justify; display: -webkit-box; Display: -ms-flexbox; display: flex; - -ms-flex-align: center; - -ms-flex-pack: justify; - -ms-flex-wrap: wrap; flex-wrap: wrap; Justify-content: space-between; Padding-bottom: 20px; } - -.header { - align-items: center; - -webkit-box-align: center; - -webkit-box-pack: justify; - Display: -webkit-box; - display: -ms-flexbox; - Display: flex; - -ms-Flex-align: center; - -ms-Flex-pack: justify; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - justify-content: space-between; - padding-bottom: 20px; -}