Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bump stylelint-order from 4.1.0 to 6.0.3 #3757

Merged
merged 2 commits into from
May 17, 2023
Merged

Bump stylelint-order from 4.1.0 to 6.0.3 #3757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5381cbb
Bump stylelint-order from 4.1.0 to 6.0.3
dependabot[bot] Apr 1, 2023
b77bcf9
No issue - bump styleint version
ksy36 May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
"selector-attribute-operator-space-before": "always",
"selector-attribute-operator-space-after": "always",
"selector-attribute-brackets-space-inside": "never",
"selector-class-pattern": null,
"selector-id-pattern": null,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of classnames/ids we're using don't pass the "kebab-case", which is the standard config now:
.SearchIssue-filter
.popup-modal.is--visible
.popup-modal__close
#js-ReportForm
.js-Issue-comment-body
.label-editorLauncher
...

webcompat/static/css/src/filter.css
 1:6  ✖  Expected class selector to be kebab-case  selector-class-pattern

webcompat/static/css/src/issue-wizard-popup.css
 58:13  ✖  Expected class selector to be kebab-case  selector-class-pattern
 63:1   ✖  Expected class selector to be kebab-case  selector-class-pattern

webcompat/static/css/src/issue-wizard.css
  23:1  ✖  Expected id selector to be kebab-case  selector-id-pattern
  28:1  ✖  Expected id selector to be kebab-case  selector-id-pattern
 833:3  ✖  Expected id selector to be kebab-case  selector-id-pattern
 906:3  ✖  Expected id selector to be kebab-case  selector-id-pattern
 911:3  ✖  Expected id selector to be kebab-case  selector-id-pattern

webcompat/static/css/src/issue.css
 106:1  ✖  Expected class selector to be kebab-case  selector-class-pattern
 155:1  ✖  Expected class selector to be kebab-case  selector-class-pattern
 159:1  ✖  Expected class selector to be kebab-case  selector-class-pattern

webcompat/static/css/src/label-editor.css
 116:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 127:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 128:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 149:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 149:33  ✖  Expected class selector to be kebab-case  selector-class-pattern


16 problems (16 errors, 0 warnings)

I've disabled it for now, but it probably should be addressed to have a unified naming convention.

"declaration-block-trailing-semicolon": "always",
"declaration-no-important": true,
"declaration-colon-space-before": "never",
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@
"postcss-url": "^10.1.1",
"prettier": "2.8.3",
"sinon": "^15.0.1",
"stylelint": "^13.13.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-order": "^4.0.0",
"stylelint": "^14.4.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-order": "^6.0.3",
"svg-sprite-generator": "0.0.7",
"svgo": "^3.0.0",
"terser-webpack-plugin": "^4.1.0",
Expand Down
2 changes: 1 addition & 1 deletion webcompat/static/css/src/filter-bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
}

.filter-bar-dropdown-listbox {
background-color: rgba(255, 255, 255, .8);
background-color: rgb(255 255 255 / 80%);
display: none;
left: 0;
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion webcompat/static/css/src/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ label[for = "image"] {

.form-upload .label-remove:not(.is-hidden) {
background-color: #fff;
border: 1px solid rgba(255, 201, 0, 1);
border: 1px solid rgb(255 201 0 / 100%);
border-radius: 50%;
cursor: pointer;
left: auto;
Expand Down
2 changes: 1 addition & 1 deletion webcompat/static/css/src/issue-wizard-popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

.popup-overlay {
background-color: rgba(0, 0, 0, .65);
background-color: rgb(0 0 0 / 65%);
display: none;
height: 100%;
left: 0;
Expand Down
16 changes: 8 additions & 8 deletions webcompat/static/css/src/issue-wizard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
}

#wizard-container {
background-color: var(--base-colorDark);
background-color: var(--base-color-dark);
display: flex;
justify-content: space-evenly;
margin-left: calc(var(--grid-outermargin-s) * -1);
Expand All @@ -69,7 +69,7 @@
}

#wizard-container.shadow {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 50%);
}

#wizard-container .grid {
Expand Down Expand Up @@ -213,7 +213,7 @@
.step-container {
background-color: var(--base-background);
border-radius: 5px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
display: flex;
margin-top: 23px;
padding: 0;
Expand Down Expand Up @@ -253,7 +253,7 @@
.issue-disclaimer {
background-color: var(--base-background);
border-radius: 5px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
font-size: 14px;
line-height: 22px;
margin: 16px auto -35px;
Expand Down Expand Up @@ -938,12 +938,12 @@

.step-container.step-url {
background-color: var(--base-background);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
margin-top: 23px;
}

.input-control {
padding: 25px 20px 14px 20px;
padding: 25px 20px 14px;
}

.input-control .input-description {
Expand Down Expand Up @@ -975,7 +975,7 @@
}

.button-control .input-control {
padding: 25px 0 14px 0;
padding: 25px 0 14px;
}

.with-validation-icons.is-validated .input-wrapper::after,
Expand Down Expand Up @@ -1020,7 +1020,7 @@
}

.device-data {
padding: 45px 20px 34px 20px;
padding: 45px 20px 34px;
width: 70%;
}

Expand Down
13 changes: 7 additions & 6 deletions webcompat/static/css/src/issue.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@
overflow: auto;
}

/* As we can not add a class to the img in the comment right now (markup parsers are complicated), we need to use the img element */
/* As we can not add a class to the img in the comment right now
(markup parsers are complicated), we need to use the img element */

.comment-body img,
.js-Issue-comment-body img {
Expand All @@ -113,13 +114,13 @@
flex-wrap: nowrap;
}
#issue > .x2 {
flex-basis: 66.66666%;
max-width: 66.66666%;
flex-basis: 66.6667%;
max-width: 66.6667%;
min-width: 0;
}
#issue > .x1 {
flex-basis: 33.33333%;
max-width: 33.33333%;
flex-basis: 33.3333%;
max-width: 33.3333%;
min-width: 0;
}
}
Expand All @@ -133,7 +134,7 @@
}

.issue-details-nsfw::after {
background: var(--base-colorDark);
background: var(--base-color-dark);
color: var(--base-background);
content: "Click to show image";
cursor: pointer;
Expand Down
2 changes: 1 addition & 1 deletion webcompat/static/css/src/label-box.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

.label-box-section + .label-box-section {
margin: 2px 0 0 0;
margin: 2px 0 0;
}

.label-box .label {
Expand Down
2 changes: 1 addition & 1 deletion webcompat/static/css/src/label-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
.label-editor-container {
background-color: var(--color-bg-box);
border-radius: 2px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .24), 0 0 2px rgba(0, 0, 0, .12);
box-shadow: 0 2px 2px rgb(0 0 0 / 24%), 0 0 2px rgb(0 0 0 / 12%);
padding: 1em;
}

Expand Down
112 changes: 56 additions & 56 deletions webcompat/static/css/src/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
:root {
--base-background: #fff;
--base-colorDark: #ffc900; /* Dark Yellow */
--base-color-dark: #ffc900; /* Dark Yellow */
--grid-outermargin-s: 9px;
--grid-outermargin-m: 19px;
--unit-gap: 45px;
Expand All @@ -19,64 +19,64 @@
--button-primary-padding: 12px 23px;
--button-thanks-padding: 7px 10px;
--button-disabled-color: #000;
--color-bg-page: rgba(250, 250, 250, 1); /* #fafafa; */
--color-bg-box: rgba(255, 255, 255, 1); /* #ffffff */
--color-bg-comment-header: rgba(245, 245, 245, 1); /* #f5f5f5 */
--color-first: rgba(255, 201, 0, 1); /* #ffc900 */
--color-first-contrast: rgba(255, 243, 201, .8);
--color-first-transparent: rgba(255, 201, 1, .8); /* #ffc901 20% transparency */
--color-first-light: rgba(255, 200, 3, .55); /* ffc803 45% transparency */
--color-second: rgba(64, 64, 64, 1); /* #404040 */
--color-third: rgba(240, 240, 240, 1); /* #f0f0f0 */
--color-fourth: rgba(192, 255, 238, 1); /* #c0ffee */
--color-form: rgba(0, 0, 0, .4); /* #000000 40% transparency */
--color-footer: rgba(0, 0, 0, .12); /* #000000 12% transparency */
--color-default: rgba(196, 196, 196, 1); /* c4c4c4 */
--color-error: rgba(204, 23, 23, 1); /* #CC1717 */
--color-error-transparent: rgba(204, 23, 23, .8); /* #CC1717 20% transparency */
--color-warning: rgba(255, 144, 0, 1); /* #ff9000 */
--color-success: rgba(47, 153, 0, 1); /* #2f9900 */
--label-needs-triage: rgba(255, 153, 0, 1); /* #ff9900 */
--label-needs-diagnosis: rgba(238, 204, 119, 1) /* #EECC77 */;
--label-needs-contact: rgba(187, 238, 204, 1); /* #BBEECC */
--label-outreach: rgba(119, 187, 238, 1); /* #77BBEE */
--label-site-contacted: rgba(187, 221, 238, 1); /* #BBDDEE */
--color-bg-page: rgb(250 250 250 / 100%); /* #fafafa; */
--color-bg-box: rgb(255 255 255 / 100%); /* #ffffff */
--color-bg-comment-header: rgb(245 245 245 / 100%); /* #f5f5f5 */
--color-first: rgb(255 201 0 / 100%); /* #ffc900 */
--color-first-contrast: rgb(255 243 201 / 80%);
--color-first-transparent: rgb(255 201 1 / 80%); /* #ffc901 20% transparency */
--color-first-light: rgb(255 200 3 / 55%); /* ffc803 45% transparency */
--color-second: rgb(64 64 64 / 100%); /* #404040 */
--color-third: rgb(240 240 240 / 100%); /* #f0f0f0 */
--color-fourth: rgb(192 255 238 / 100%); /* #c0ffee */
--color-form: rgb(0 0 0 / 40%); /* #000000 40% transparency */
--color-footer: rgb(0 0 0 / 12%); /* #000000 12% transparency */
--color-default: rgb(196 196 196 / 100%); /* c4c4c4 */
--color-error: rgb(204 23 23 / 100%); /* #CC1717 */
--color-error-transparent: rgb(204 23 23 / 80%); /* #CC1717 20% transparency */
--color-warning: rgb(255 144 0 / 100%); /* #ff9000 */
--color-success: rgb(47 153 0 / 100%); /* #2f9900 */
--label-needs-triage: rgb(255 153 0 / 100%); /* #ff9900 */
--label-needs-diagnosis: rgb(238 204 119 / 100%) /* #EECC77 */;
--label-needs-contact: rgb(187 238 204 / 100%); /* #BBEECC */
--label-outreach: rgb(119 187 238 / 100%); /* #77BBEE */
--label-site-contacted: rgb(187 221 238 / 100%); /* #BBDDEE */
--label-closed: var(--color-default);
--label-color-type: rgba(153, 221, 221, 1); /* #99DDDD */
--label-color-browser: rgba(255, 204, 0, 1); /* #FFCC00 */
--label-color-status: rgba(0, 135, 255), 1; /* #0088FF */
--label-color-priority: rgba(17, 170, 153, 1); /* #11AA99 */
--label-color-nsfw: rgba(221, 0, 0, 1); /* #DD0000 */
--label-color-device: rgba(188, 143, 143, 1); /* rosybrown */
--label-color-os: rgba(102, 51, 153, 1); /* rebeccapurple */
--label-fix-me-assign-a-status: rgba(255, 0, 0, 1); /* #ff0000 */
--label-color-type: rgb(153 221 221 / 100%); /* #99DDDD */
--label-color-browser: rgb(255 204 0 / 100%); /* #FFCC00 */
--label-color-status: rgb(0 135 255), 1; /* #0088FF */
--label-color-priority: rgb(17 170 153 / 100%); /* #11AA99 */
--label-color-nsfw: rgb(221 0 0 / 100%); /* #DD0000 */
--label-color-device: rgb(188 143 143 / 100%); /* rosybrown */
--label-color-os: rgb(102 51 153 / 100%); /* rebeccapurple */
--label-fix-me-assign-a-status: rgb(255 0 0 / 100%); /* #ff0000 */

/* Bug form redesign */
--wizard-step-complete: rgba(86, 99, 140, 1); /* #56638c */
--wizard-step-empty: rgba(243, 243, 247, 1); /* #f3f3f7 */
--wizard-step-color: rgba(255, 255, 255, 1); /* #ffffff */
--wizard-step-error: rgba(226, 40, 80, 1); /* #e22850 */
--wizard-grey-bg: rgba(247, 247, 247, 1); /* #f7f7f7 */
--link-color: rgba(0, 94, 255, 1); /* #005eff */
--issue-type-bg: rgba(86, 99, 140, 1); /* #56638c */
--issue-selected-outline: rgba(34, 181, 115, 1); /* #22b573 */
--input-placeholder: rgba(64, 64, 64, .5); /* #404040 */
--blowser-icon-bg: rgba(255, 255, 255, 1); /* #ffffff */
--blowser-icon-border: rgba(64, 64, 64, .3); /* #cccccc */
--button-box-border: rgba(228, 227, 227, 1); /* #e4e3e3 */
--warning-border: rgba(255, 184, 158, 1); /* #ffb89e */
--screenshot-shadow: rgba(0, 0, 0, .3); /* #000000 */
--warm-grey: rgba(151, 151, 151, 1); /* #979797 */
--upload-background: rgba(231, 231, 231, 1); /* #e7e7e7 */
--dot-color: rgba(50, 60, 89, 1); /* #323c59 */
--wizard-step-complete: rgb(86 99 140 / 100%); /* #56638c */
--wizard-step-empty: rgb(243 243 247 / 100%); /* #f3f3f7 */
--wizard-step-color: rgb(255 255 255 / 100%); /* #ffffff */
--wizard-step-error: rgb(226 40 80 / 100%); /* #e22850 */
--wizard-grey-bg: rgb(247 247 247 / 100%); /* #f7f7f7 */
--link-color: rgb(0 94 255 / 100%); /* #005eff */
--issue-type-bg: rgb(86 99 140 / 100%); /* #56638c */
--issue-selected-outline: rgb(34 181 115 / 100%); /* #22b573 */
--input-placeholder: rgb(64 64 64 / 50%); /* #404040 */
--blowser-icon-bg: rgb(255 255 255 / 100%); /* #ffffff */
--blowser-icon-border: rgb(64 64 64 / 30%); /* #cccccc */
--button-box-border: rgb(228 227 227 / 100%); /* #e4e3e3 */
--warning-border: rgb(255 184 158 / 100%); /* #ffb89e */
--screenshot-shadow: rgb(0 0 0 / 30%); /* #000000 */
--warm-grey: rgb(151 151 151 / 100%); /* #979797 */
--upload-background: rgb(231 231 231 / 100%); /* #e7e7e7 */
--dot-color: rgb(50 60 89 / 100%); /* #323c59 */

/* Console log messages */
--level-log-border: rgba(242, 242, 244, 1); /* #F2F2F4 */
--level-warn-background: rgba(255, 251, 214, 1); /* #FFFBD6 */
--level-warn-border: rgba(215, 182, 0, .28); /* #D7B600 */
--level-warn-color: rgba(113, 81, 0, 1); /* #715100 */
--level-error-background: rgba(253, 242, 245, 1); /* #FDF2F5 */
--level-error-border: rgba(215, 0, 34, .12); /* #D70022 */
--level-error-color: rgba(164, 0, 15, 1); /* #A4000F */
--log-link-color: rgba(0, 62, 170, 1); /* #003EAA */
--level-log-border: rgb(242 242 244 / 100%); /* #F2F2F4 */
--level-warn-background: rgb(255 251 214 / 100%); /* #FFFBD6 */
--level-warn-border: rgb(215 182 0 / 28%); /* #D7B600 */
--level-warn-color: rgb(113 81 0 / 100%); /* #715100 */
--level-error-background: rgb(253 242 245 / 100%); /* #FDF2F5 */
--level-error-border: rgb(215 0 34 / 12%); /* #D70022 */
--level-error-color: rgb(164 0 15 / 100%); /* #A4000F */
--log-link-color: rgb(0 62 170 / 100%); /* #003EAA */
}