From 2400209e7af5850c1d94a94d39decb629fbb145c Mon Sep 17 00:00:00 2001 From: Adam Laki Date: Sat, 16 Nov 2024 13:52:12 +0100 Subject: [PATCH] Stylelint fixes --- .stylelintrc.json | 32 +++++++++++++++---- package-lock.json | 27 +++++++++++++++- package.json | 3 +- resources/sass/component/_media-uploader.scss | 2 +- resources/sass/component/_notification.scss | 4 +-- resources/sass/component/_pagination.scss | 2 +- resources/sass/component/form/_combobox.scss | 6 ++-- resources/sass/extend/_progress.scss | 2 +- resources/sass/section/_header.scss | 2 +- yarn.lock | 15 ++++++++- 10 files changed, 77 insertions(+), 18 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index a82c06652..ef9be98ac 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,10 +1,30 @@ { "extends": "stylelint-config-sass-guidelines", + "plugins": ["stylelint-order"], "rules": { - "indentation": 2, - "max-nesting-depth": 6, - "selector-class-pattern": [ - "^[a-z0-9\\:-]+$" - ] + "selector-max-compound-selectors": 5, + "max-nesting-depth": 4, + "selector-no-vendor-prefix": [ + true, + { + "ignoreSelectors": ["/-moz-.*/", "/-ms-.*/", "/-webkit-.*/"] + } + ], + "selector-no-qualifying-type": [ + true, + { + "ignore": ["attribute"] + } + ], + "value-no-vendor-prefix": [ + true, + { + "ignoreValues": ["box"] + } + ], + "selector-class-pattern": null, + "scss/percent-placeholder-pattern": null, + "order/properties-alphabetical-order": true, + "@stylistic/function-parentheses-space-inside": null } -} + } diff --git a/package-lock.json b/package-lock.json index d335c8d87..c7861b9a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,8 @@ }, "devDependencies": { "stylelint": "^16.10.0", - "stylelint-config-sass-guidelines": "^12.1.0" + "stylelint-config-sass-guidelines": "^12.1.0", + "stylelint-order": "^6.0.4" }, "engines": { "node": "^18.0 || ^19.0 || ^20.0 || ^21.0" @@ -2503,6 +2504,16 @@ "node": ">=4" } }, + "node_modules/postcss-sorting": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "postcss": "^8.4.20" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -3208,6 +3219,20 @@ "stylelint": "^16.1.0" } }, + "node_modules/stylelint-order": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss": "^8.4.32", + "postcss-sorting": "^8.0.2" + }, + "peerDependencies": { + "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1" + } + }, "node_modules/stylelint-scss": { "version": "6.9.0", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.9.0.tgz", diff --git a/package.json b/package.json index 7d66d84cb..f35dc612a 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ }, "devDependencies": { "stylelint": "^16.10.0", - "stylelint-config-sass-guidelines": "^12.1.0" + "stylelint-config-sass-guidelines": "^12.1.0", + "stylelint-order": "^6.0.4" }, "engines": { "node": "^18.0 || ^19.0 || ^20.0 || ^21.0" diff --git a/resources/sass/component/_media-uploader.scss b/resources/sass/component/_media-uploader.scss index 8d25817eb..fc00a180e 100644 --- a/resources/sass/component/_media-uploader.scss +++ b/resources/sass/component/_media-uploader.scss @@ -33,7 +33,7 @@ line-height: config('line-height-md', $typography); position: relative; - &[aria-checked="true"], + &[aria-checked='true'], &:focus-visible { @include focus-ring( $type: config('focus-ring-type', $btn, false), diff --git a/resources/sass/component/_notification.scss b/resources/sass/component/_notification.scss index 8fdf66340..c1e6eb7c5 100644 --- a/resources/sass/component/_notification.scss +++ b/resources/sass/component/_notification.scss @@ -167,11 +167,11 @@ margin-inline-start: calc(var(--icon-size) / 2); padding-inline-start: calc(var(--icon-size) / 2); - &[aria-hidden="true"] { + &[aria-hidden='true'] { grid-template-rows: 0fr; } - &[aria-hidden="false"] { + &[aria-hidden='false'] { grid-template-rows: 1fr; margin-block-start: spacer('s'); } diff --git a/resources/sass/component/_pagination.scss b/resources/sass/component/_pagination.scss index 6874d026b..945ba7ad3 100644 --- a/resources/sass/component/_pagination.scss +++ b/resources/sass/component/_pagination.scss @@ -12,7 +12,7 @@ } } - [aria-current="page"] { + [aria-current='page'] { background-color: color('primary-background', 'btn'); color: color('primary-foreground', 'btn'); } diff --git a/resources/sass/component/form/_combobox.scss b/resources/sass/component/form/_combobox.scss index cf1b96ef5..3ab1eb776 100644 --- a/resources/sass/component/form/_combobox.scss +++ b/resources/sass/component/form/_combobox.scss @@ -49,7 +49,7 @@ z-index: 5; } - [role="listbox"] { + [role='listbox'] { @include clear-list; @include scrollbar; display: flex; @@ -64,7 +64,7 @@ } } - [role="option"] { + [role='option'] { align-items: center; border-radius: config('border-radius', $form-control); display: flex; @@ -73,7 +73,7 @@ padding-inline: spacer('xs'); user-select: none; - &[aria-selected="true"] { + &[aria-selected='true'] { background-color: color('light-background', 'btn'); color: color('light-foreground', 'btn'); } diff --git a/resources/sass/extend/_progress.scss b/resources/sass/extend/_progress.scss index c55e28429..ac9fd208e 100644 --- a/resources/sass/extend/_progress.scss +++ b/resources/sass/extend/_progress.scss @@ -21,7 +21,7 @@ inset: 0 auto 0 0; position: absolute; - &:not([style*="inline-size"]) { + &:not([style*='inline-size']) { animation: 1s progress infinite linear alternate; inline-size: 20%; } diff --git a/resources/sass/section/_header.scss b/resources/sass/section/_header.scss index 42740b236..c38345be2 100644 --- a/resources/sass/section/_header.scss +++ b/resources/sass/section/_header.scss @@ -1,7 +1,7 @@ @use 'sprucecss/scss/spruce' as *; .app-header { - backdrop-filter: saturate(180%) blur(.25rem); + backdrop-filter: saturate(180%) blur(0.25rem); background-color: color('background', 'header'); border-block-end: 1px solid color('border'); inset-block-start: 0; diff --git a/yarn.lock b/yarn.lock index 46652d33c..7269325cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1194,12 +1194,17 @@ postcss-selector-parser@^6.1.2: cssesc "^3.0.0" util-deprecate "^1.0.2" +postcss-sorting@^8.0.2: + version "8.0.2" + resolved "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz" + integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q== + postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.4.27, postcss@^8.4.38, postcss@^8.4.47: +postcss@^8.4.27, postcss@^8.4.32, postcss@^8.4.38, postcss@^8.4.47: version "8.4.49" resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz" integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA== @@ -1563,6 +1568,14 @@ stylelint-config-sass-guidelines@^12.1.0: postcss-scss "^4.0.9" stylelint-scss "^6.2.1" +stylelint-order@^6.0.4: + version "6.0.4" + resolved "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz" + integrity sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA== + dependencies: + postcss "^8.4.32" + postcss-sorting "^8.0.2" + stylelint-scss@^6.2.1: version "6.9.0" resolved "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.9.0.tgz"