Fix style lint rule violations

Bug: T348449 Change-Id: I3d57ee3290d428ed6272f3102581745690f63aa3
wikimedia · Jul 11, 2024 · 056b3ae · 056b3ae
1 parent 5abd4c3
commit 056b3ae
Show file tree

Hide file tree

Showing 15 changed files with 23 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "test:integration": "jest -c jest.config.integration.js",
     "test:lint": "eslint --no-fix --max-warnings 0 --ignore-path .gitignore .",
     "test": "npm-run-all test:* && vite build",
-    "disabled:test:lintcss": "stylelint '**/*.{vue,scss}'",
+    "test:lintcss": "stylelint '**/*.{vue,scss}'",
     "test:a11y": "jest --testMatch=\"**/tests/a11y/**\"",
     "test:cy": "env $(grep -v '^#' .env.example | xargs) start-server-and-test serve http-get://localhost:8080 cypress",
     "fix:css": "stylelint '**/*.{vue,scss}' --fix",

diff --git a/src/App.vue b/src/App.vue
@@ -94,7 +94,7 @@ export default defineComponent( {
 </script>
 
 <style lang="scss">
-@import "ress";
+@import 'ress';
 @import './styles/custom-variables.css';
 @import 'wikit-dist/wikit-vue-components-vue3compat.css';
 @import './styles/typography';

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -117,7 +117,7 @@ export default defineComponent( {
 </script>
 
 <style lang="scss">
-@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 @import '../styles/typography';
 
 $tinyViewportWidth: 38em;

diff --git a/src/components/InfoTooltip.vue b/src/components/InfoTooltip.vue
@@ -49,7 +49,7 @@ export default defineComponent( {
 </script>
 
 <style lang="scss">
-@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .querybuilder-tooltip {
 	& .wikit-Popover__target .cdx-button.cdx-button--action-default {

diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
@@ -121,7 +121,7 @@ export default defineComponent( {
 </script>
 
 <style lang="scss">
-@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 $tinyViewportWidth: 38em;
 

diff --git a/src/components/LanguageSelectorInput.vue b/src/components/LanguageSelectorInput.vue
@@ -86,7 +86,7 @@ export default defineComponent( {
 </script>
 
 <style lang="scss">
-@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .languageSelector__input {
 	color: $color-base;
@@ -122,8 +122,8 @@ export default defineComponent( {
 	}
 
 	&-left-side {
-		display:flex;
-		flex-grow:1;
+		display: flex;
+		flex-grow: 1;
 	}
 
 	&__search-icon {
@@ -140,6 +140,5 @@ export default defineComponent( {
 			visibility: visible;
 		}
 	}
-
 }
 </style>
diff --git a/src/components/LanguageSelectorOptionsMenu.vue b/src/components/LanguageSelectorOptionsMenu.vue
@@ -88,7 +88,7 @@ export default defineComponent( {
 </script>
 
 <style lang="scss">
-@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 $base: '.languageSelector__options-menu';
 $tinyViewportWidth: 38em;
@@ -119,12 +119,15 @@ $tinyViewportWidth: 38em;
 			transition-duration: 100ms;
 			transition-timing-function: ease;
 
-			&:hover, &:active, &.highlight {
+			&:hover,
+			&:active,
+			&.highlight {
 				background-color: $background-color-interactive;
 				cursor: pointer;
 			}
 
-			&--selected, &--selected:hover {
+			&--selected,
+			&--selected:hover {
 				background-color: $background-color-interactive;
 			}
 		}

diff --git a/src/components/Limit.vue b/src/components/Limit.vue
@@ -94,7 +94,6 @@ export default defineComponent( {
 </script>
 
 <style lang="scss">
-
 .querybuilder-limit {
 	display: flex;
 	align-items: flex-start;

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
@@ -421,12 +421,12 @@ a {
 	justify-content: space-between;
 
 	.querybuilder__logo {
-		background-image: url( '/img/QB_Logo.svg' );
+		background-image: url('/img/QB_Logo.svg');
 		inline-size: 360px;
 		block-size: 24px;
 
 		@media (max-width: $tinyViewportWidth) {
-			background-image: url( '/img/QB_Logo_Mobile.svg' );
+			background-image: url('/img/QB_Logo_Mobile.svg');
 			inline-size: 239px;
 			block-size: 24px;
 		}

diff --git a/src/components/QueryCondition.vue b/src/components/QueryCondition.vue
@@ -207,7 +207,7 @@ export default defineComponent( {
 </script>
 
 <style scoped lang="scss">
-@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 $tinyViewportWidth: 38em; // Set so that inputs show all below each other in the smallest layout
 

diff --git a/src/components/SharableLink.vue b/src/components/SharableLink.vue
@@ -75,7 +75,7 @@ export default defineComponent( {
 </script>
 
 <style scoped lang="scss">
-@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 @import '../styles/typography';
 
 $tinyViewportWidth: 36em;

diff --git a/src/styles/_links.scss b/src/styles/_links.scss
@@ -9,7 +9,8 @@
 			outline-color: gray;
 		}
 
-		&:hover, &:active {
+		&:hover,
+		&:active {
 			text-decoration: underline;
 		}
 	}

diff --git a/src/styles/noscript.scss b/src/styles/noscript.scss
@@ -74,4 +74,3 @@ main.no-script {
 		justify-content: center;
 	}
 }
-
diff --git a/src/styles/typography.scss b/src/styles/typography.scss
@@ -14,7 +14,7 @@
 	color: $color-base;
 }
 
-@mixin ui-text-m($font-weight: $font-weight-normal){
+@mixin ui-text-m($font-weight: $font-weight-normal) {
 	font-family: $font-family-system-sans;
 	font-size: $font-size-medium;
 	font-weight: $font-weight;

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -11,7 +11,8 @@ module.exports = {
 		'@stylistic/stylelint-plugin',
 	],
 	rules: {
-		indentation: 'tab',
+		'@stylistic/indentation': 'tab',
+		'@stylistic/string-quotes': 'single',
 		'csstools/use-logical': 'always',
 		// CSS Logical Properties do not support the shorthand 'margin' and 'padding' yet
 		// TODO: Re-enable property-disallowed-list