Skip to content

Commit 9e5e804

Browse files
guerganaguergana
authored
Add stylelint to project (#841)
 The "selector-class-pattern" rule has been disabled because we are loosely following the BEM naming convention and this rule expects classes to be named using kebab case. Installing a plugin to reinforce the BEM convention would mean we also need to update all the class names that are not using it and that is too much overhead for the current task.
1 parent 94a3606 commit 9e5e804

18 files changed

+2076
-275
lines changed

‎.github/workflows/lint.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ jobs:
3232
- name: Install Dependencies
3333
run: npm ci
3434

35-
- name: Run ESLint
35+
- name: Run ESlint and Stylelint
3636
run: npm run lint
3737

3838
- name: Run i18 Validation
3939
run: npm run i18n:validate
40+

‎.stylelintrc.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"rules": {
3+
"selector-class-pattern": [null]
4+
},
5+
"extends": [
6+
"stylelint-config-standard-scss",
7+
"stylelint-config-recommended-vue/scss"
8+
]
9+
}

‎package-lock.json‎

Lines changed: 1945 additions & 186 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22
"private": true,
33
"name": "wikidata-mismatch-finder",
44
"scripts": {
5-
"lint": "eslint --ext .js,.vue resources/js",
6-
"lint:fix": "eslint --fix --ext .js,.vue resources/js",
5+
"lint": "run-s lint:*",
6+
"lint:eslint": "eslint --ext .js,.vue resources/js",
7+
"lint:stylelint": "stylelint '**/*.scss' '**/*.vue'",
8+
"fix": "run-s fix:*",
9+
"fix:eslint": "eslint --fix --ext .js,.vue resources/js",
10+
"fix:stylelint": "stylelint '**/*.scss' '**/*.vue' --fix",
711
"i18n:validate": "banana-checker public/i18n",
812
"test": "jest",
913
"dev": "npm run development",
@@ -22,9 +26,9 @@
2226
"@typescript-eslint/parser": "^6.13.1",
2327
"@vue/compiler-sfc": "^3.3.8",
2428
"@vue/eslint-config-typescript": "^12.0.0",
29+
"@vue/runtime-dom": "^3.3.9",
2530
"@vue/test-utils": "^2.4.3",
2631
"@vue/vue3-jest": "^29.2.4",
27-
"@vue/runtime-dom": "^3.3.9",
2832
"@wikimedia/codex": "^1.0.1",
2933
"@wikimedia/codex-design-tokens": "^1.0.1",
3034
"@wikimedia/codex-icons": "^1.0.1",
@@ -38,10 +42,15 @@
3842
"jest": "^29.7.0",
3943
"jest-environment-jsdom": "^29.7.0",
4044
"laravel-mix": "^6.0.49",
45+
"npm-run-all": "^4.1.5",
4146
"postcss": "^8.4.31",
47+
"postcss-html": "^1.6.0",
4248
"resolve-url-loader": "^5.0.0",
4349
"sass": "^1.69.5",
4450
"sass-loader": "^13.3.1",
51+
"stylelint": "^16.2.0",
52+
"stylelint-config-recommended-vue": "^1.5.0",
53+
"stylelint-config-standard-scss": "^13.0.0",
4554
"ts-jest": "^29.1.0",
4655
"ts-loader": "^9.5.0",
4756
"typescript": "^5.3.2",

‎resources/js/Components/AuthWidget.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ defineProps<{ user: User | null}>();
2828
</script>
2929

3030
<style lang="scss">
31-
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
31+
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui';
3232
@import '../../css/custom-variables.css';
3333
3434
.auth-widget {
@@ -45,8 +45,10 @@ defineProps<{ user: User | null}>();
4545
&_wrapper {
4646
a {
4747
white-space: nowrap;
48+
4849
&:visited {
4950
color: $color-progressive;
51+
5052
&:hover {
5153
color: $color-progressive--hover;
5254
}

‎resources/js/Components/ItemIdSearchTextarea.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ defineExpose({validate, serializeInput, validationError});
9898
</script>
9999

100100
<style lang="scss">
101-
@import '~@wmde/wikit-tokens/dist/_variables.scss';
101+
/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */
102+
@import '~@wmde/wikit-tokens/dist/_variables';
102103
103104
.cdx-field__control {
104105
position: relative;

‎resources/js/Components/LanguageSelector.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,15 +109,15 @@ defineExpose({focus})
109109
</script>
110110

111111
<style lang="scss">
112-
$tinyViewportWidth: 38em;
112+
$tiny-viewport-width: 38em;
113113
114114
.mismatchfinder__language-selector {
115115
position: absolute;
116116
inset-inline-end: 0;
117117
width: 384px;
118118
z-index: 1;
119119
120-
@media (max-width: $tinyViewportWidth) {
120+
@media (max-width: $tiny-viewport-width) {
121121
width: 100%;
122122
position: fixed;
123123
top: 0;
@@ -140,7 +140,7 @@ $tinyViewportWidth: 38em;
140140
font-weight: bold;
141141
}
142142
143-
@media (max-width: $tinyViewportWidth) {
143+
@media (max-width: $tiny-viewport-width) {
144144
display: flex;
145145
}
146146
}

‎resources/js/Components/LanguageSelectorInput.vue‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ defineExpose({focus});
7979
font-weight: 400;
8080
box-sizing: border-box;
8181
flex-grow: 1;
82-
border-color: #3366cc;
82+
border-color: #36c;
8383
height: 20px;
8484
8585
&:focus {
@@ -91,18 +91,17 @@ defineExpose({focus});
9191
}
9292
9393
&__wrapper {
94-
background-color: #ffffff;
95-
border-color: #a2a9b1;
94+
background-color: #fff;
9695
border-style: solid;
9796
border-width: 1px;
98-
border-radius: 2px 2px 0px 0px;
97+
border-radius: 2px 2px 0 0;
9998
padding-inline: 16px;
10099
padding-block: 16px;
101100
width: 100%;
102101
display: flex;
103102
justify-content: space-between;
104103
box-shadow: 0 1px 2px #00000040, inset 0 0 0 1px #36c;
105-
border-color: #3366cc;
104+
border-color: #36c;
106105
align-items: center;
107106
}
108107
@@ -118,7 +117,6 @@ defineExpose({focus});
118117
}
119118
120119
&__clear-button {
121-
122120
visibility: hidden;
123121
display: flex;
124122

‎resources/js/Components/LanguageSelectorOptionsMenu.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,14 +86,14 @@ watch(() => props.highlightedIndex,
8686
</script>
8787

8888
<style lang="scss">
89-
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
89+
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui';
9090
9191
$base: '.languageSelector__options-menu';
92-
$tinyViewportWidth: 38em;
92+
$tiny-viewport-width: 38em;
9393
9494
#{$base} {
95-
background-color: #ffffff;
96-
border-radius: 0px 0px 1px 1px;
95+
background-color: #fff;
96+
border-radius: 0 0 1px 1px;
9797
border: 1px solid #a2a9b1;
9898
box-shadow: $box-shadow-drop-medium;
9999
box-sizing: border-box;
@@ -103,12 +103,11 @@ $tinyViewportWidth: 38em;
103103
height: 15.25rem;
104104
overflow-y: scroll;
105105
106-
@media (max-width: $tinyViewportWidth) {
106+
@media (max-width: $tiny-viewport-width) {
107107
flex-grow: 1;
108108
}
109109
110110
&__languages-list {
111-
112111
&__item {
113112
position: relative;
114113
padding-block: 8px;

‎resources/js/Components/LoadingOverlay.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ defineExpose({show, hide});
5757
$base: '.loading-indicator';
5858
5959
#{$base} {
60-
6160
.overlay {
6261
/**
6362
* Layout
@@ -72,11 +71,13 @@ $base: '.loading-indicator';
7271
min-height: $size-full;
7372
width: $size-viewport-width-full;
7473
height: $size-viewport-height-full;
74+
7575
// Support Safari/iOS: Make `100vh` work with Safari's address bar.
7676
// See https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
7777
/* stylelint-disable-next-line plugin/no-unsupported-browser-features,
7878
scale-unlimited/declaration-strict-value */
79-
height: -webkit-fill-available;
79+
height: stretch;
80+
8081
/**
8182
* Colors
8283
*/

0 commit comments

Comments
 (0)