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.
wmde · Jan 24, 2024 · 9e5e804 · 9e5e804
1 parent 94a3606
commit 9e5e804
Show file tree

Hide file tree

Showing 18 changed files with 2,076 additions and 275 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -32,8 +32,9 @@ jobs:
         - name: Install Dependencies
           run: npm ci
 
-        - name: Run ESLint
+        - name: Run ESlint and Stylelint
           run: npm run lint
 
         - name: Run i18 Validation
           run: npm run i18n:validate
+
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,9 @@
+{
+    "rules": {
+        "selector-class-pattern": [null]
+    },
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-recommended-vue/scss"
+    ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,8 +2,12 @@
     "private": true,
     "name": "wikidata-mismatch-finder",
     "scripts": {
-        "lint": "eslint --ext .js,.vue resources/js",
-        "lint:fix": "eslint --fix --ext .js,.vue resources/js",
+        "lint": "run-s lint:*",
+        "lint:eslint": "eslint --ext .js,.vue resources/js",
+        "lint:stylelint": "stylelint '**/*.scss' '**/*.vue'",
+        "fix": "run-s fix:*",
+        "fix:eslint": "eslint --fix --ext .js,.vue resources/js",
+        "fix:stylelint": "stylelint '**/*.scss' '**/*.vue' --fix",
         "i18n:validate": "banana-checker public/i18n",
         "test": "jest",
         "dev": "npm run development",
@@ -22,9 +26,9 @@
         "@typescript-eslint/parser": "^6.13.1",
         "@vue/compiler-sfc": "^3.3.8",
         "@vue/eslint-config-typescript": "^12.0.0",
+        "@vue/runtime-dom": "^3.3.9",
         "@vue/test-utils": "^2.4.3",
         "@vue/vue3-jest": "^29.2.4",
-        "@vue/runtime-dom": "^3.3.9",
         "@wikimedia/codex": "^1.0.1",
         "@wikimedia/codex-design-tokens": "^1.0.1",
         "@wikimedia/codex-icons": "^1.0.1",
@@ -38,10 +42,15 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "laravel-mix": "^6.0.49",
+        "npm-run-all": "^4.1.5",
         "postcss": "^8.4.31",
+        "postcss-html": "^1.6.0",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.69.5",
         "sass-loader": "^13.3.1",
+        "stylelint": "^16.2.0",
+        "stylelint-config-recommended-vue": "^1.5.0",
+        "stylelint-config-standard-scss": "^13.0.0",
         "ts-jest": "^29.1.0",
         "ts-loader": "^9.5.0",
         "typescript": "^5.3.2",

diff --git a/resources/js/Components/AuthWidget.vue b/resources/js/Components/AuthWidget.vue
@@ -28,7 +28,7 @@ defineProps<{ user: User | null}>();
 </script>
 
 <style lang="scss">
-@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
+@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 @import '../../css/custom-variables.css';
 
 .auth-widget {
@@ -45,8 +45,10 @@ defineProps<{ user: User | null}>();
     &_wrapper {
         a {
             white-space: nowrap;
+
             &:visited {
                 color: $color-progressive;
+
                 &:hover {
                     color: $color-progressive--hover;
                 }

diff --git a/resources/js/Components/ItemIdSearchTextarea.vue b/resources/js/Components/ItemIdSearchTextarea.vue
@@ -98,7 +98,8 @@ defineExpose({validate, serializeInput, validationError});
 </script>
 
 <style lang="scss">
-@import '~@wmde/wikit-tokens/dist/_variables.scss';
+/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */
+@import '~@wmde/wikit-tokens/dist/_variables';
 
 .cdx-field__control {
     position: relative;

diff --git a/resources/js/Components/LanguageSelector.vue b/resources/js/Components/LanguageSelector.vue
@@ -109,15 +109,15 @@ defineExpose({focus})
 </script>
 
 <style lang="scss">
-$tinyViewportWidth: 38em;
+$tiny-viewport-width: 38em;
 
 .mismatchfinder__language-selector {
 	position: absolute;
 	inset-inline-end: 0;
 	width: 384px;
 	z-index: 1;
 
-	@media (max-width: $tinyViewportWidth) {
+	@media (max-width: $tiny-viewport-width) {
 		width: 100%;
 		position: fixed;
 		top: 0;
@@ -140,7 +140,7 @@ $tinyViewportWidth: 38em;
 			font-weight: bold;
 		}
 
-		@media (max-width: $tinyViewportWidth) {
+		@media (max-width: $tiny-viewport-width) {
 			display: flex;
 		}
 	}

diff --git a/resources/js/Components/LanguageSelectorInput.vue b/resources/js/Components/LanguageSelectorInput.vue
@@ -79,7 +79,7 @@ defineExpose({focus});
 	font-weight: 400;
 	box-sizing: border-box;
 	flex-grow: 1;
-	border-color: #3366cc;
+	border-color: #36c;
 	height: 20px;
 
 	&:focus {
@@ -91,18 +91,17 @@ defineExpose({focus});
 	}
 
 	&__wrapper {
-		background-color: #ffffff;
-		border-color: #a2a9b1;
+		background-color: #fff;
 		border-style: solid;
 		border-width: 1px;
-		border-radius: 2px 2px 0px 0px;
+		border-radius: 2px 2px 0 0;
 		padding-inline: 16px;
 		padding-block: 16px;
 		width: 100%;
 		display: flex;
 		justify-content: space-between;
 		box-shadow: 0 1px 2px #00000040, inset 0 0 0 1px #36c;
-		border-color: #3366cc;
+		border-color: #36c;
 		align-items: center;
 	}
 
@@ -118,7 +117,6 @@ defineExpose({focus});
 	}
 
 	&__clear-button {
-
 		visibility: hidden;
 		display: flex;
 

diff --git a/resources/js/Components/LanguageSelectorOptionsMenu.vue b/resources/js/Components/LanguageSelectorOptionsMenu.vue
@@ -86,14 +86,14 @@ watch(() => props.highlightedIndex,
 </script>
 
 <style lang="scss">
-@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
+@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 $base: '.languageSelector__options-menu';
-$tinyViewportWidth: 38em;
+$tiny-viewport-width: 38em;
 
 #{$base} {
-	background-color: #ffffff;
-	border-radius: 0px 0px 1px 1px;
+	background-color: #fff;
+	border-radius: 0 0 1px 1px;
 	border: 1px solid #a2a9b1;
 	box-shadow: $box-shadow-drop-medium;
 	box-sizing: border-box;
@@ -103,12 +103,11 @@ $tinyViewportWidth: 38em;
 	height: 15.25rem;
 	overflow-y: scroll;
 
-	@media (max-width: $tinyViewportWidth) {
+	@media (max-width: $tiny-viewport-width) {
 		flex-grow: 1;
 	}
 
 	&__languages-list {
-
 		&__item {
 			position: relative;
 			padding-block: 8px;

diff --git a/resources/js/Components/LoadingOverlay.vue b/resources/js/Components/LoadingOverlay.vue
@@ -57,7 +57,6 @@ defineExpose({show, hide});
 $base: '.loading-indicator';
 
 #{$base} {
-
     .overlay {
         /**
         * Layout
@@ -72,11 +71,13 @@ $base: '.loading-indicator';
         min-height: $size-full;
         width: $size-viewport-width-full;
         height: $size-viewport-height-full;
+
         // Support Safari/iOS: Make `100vh` work with Safari's address bar.
         // See https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
         /* stylelint-disable-next-line plugin/no-unsupported-browser-features,
             scale-unlimited/declaration-strict-value */
-        height: -webkit-fill-available;
+        height: stretch;
+
         /**
         * Colors
         */

diff --git a/resources/js/Components/MismatchRow.vue b/resources/js/Components/MismatchRow.vue
@@ -200,9 +200,10 @@ function showDialog(e: Event) {
   }
 
  .full-description-button {
-      padding: 0px 2px;
+      padding: 0 2px;
       font-weight: 400;
     }
+
     .empty-value {
       color: $color-disabled;
     }

diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -177,11 +177,12 @@ function showRandom(): void{
 </script>
 
 <style lang="scss">
-@import '../../sass/_typography.scss';
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '../../sass/typography';
 @import '../../css/custom-variables.css';
 
 #about-description {
-    @include body-M
+    @include body-m;
 }
 
 #querying-section .heading {

diff --git a/resources/js/Pages/Layout.vue b/resources/js/Pages/Layout.vue
@@ -189,7 +189,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 @import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
-@import '../../sass/_typography.scss';
+@import '../../sass/typography';
 
 #app {
     box-sizing: border-box;
@@ -215,7 +215,7 @@ onBeforeUnmount(() => {
         }
     }
 
-    .visually-hidden:not(:focus):not(:active) {
+    .visually-hidden:not(:focus, :active) {
         clip: rect(0 0 0 0);
         clip-path: inset(100%);
         height: 1px;
@@ -249,8 +249,7 @@ onBeforeUnmount(() => {
 
     @media (min-width: $min-width-breakpoint-tablet) {
         main>header {
-            flex-direction: row;
-            flex-wrap: wrap;
+            flex-flow: row wrap;
 
             .languageSelector {
                 >button {
@@ -261,7 +260,8 @@ onBeforeUnmount(() => {
     }
 
     .footer-title {
-        @include body-S;
+        @include body-s;
+
         font-weight: $font-weight-bold;
     }
 }

diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
@@ -393,6 +393,7 @@ function _handleConfirmation(){
 .back-button {
     // to match the first heading on the home page
     margin-top: var(--dimension-layout-xsmall);
+
     // to avoid visual grouping with .description-section
     margin-bottom: var(--dimension-layout-xsmall);
 }
@@ -408,6 +409,7 @@ h2 {
     a {
         display: inline-block;
     }
+
     &::after {
         content: ", ";
     }
@@ -416,23 +418,26 @@ h2 {
         content: "";
     }
 }
+
 #results-confirmation-dialog {
 	footer {
 		display: flex;
 		align-items: baseline;
 		justify-content: space-between;
 	}
 }
+
 .mismatches-form-footer {
     margin-top: var(--dimension-layout-xsmall);
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--dimension-layout-xsmall);
+
     // calculate the footer height to reserve space for
     // messages with two lines (1.5 line height plus padding)
-    min-height: calc(2*var(--dimension-spacing-xlarge) + 2*var(--dimension-spacing-large));
+    min-height: calc(2 * var(--dimension-spacing-xlarge) + 2 * var(--dimension-spacing-large));
 
     .form-success-message {
         max-width: 705px;