Add stylelint to project

.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
+

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+    "rules": {
+        "selector-class-pattern": [null]
+    },
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-recommended-vue/scss"
+    ]
+}

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",

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;
                 }

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;

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;
 		}
 	}

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;
 

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;

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
         */

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;
     }

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 {

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;
     }
 }

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;