build: Run stylelint for vue files

Change-Id: Iabb7aae258d6a5eb1be3a7fe0a9f90f4735ec880

.stylelintrc.json

@@ -1,3 +1,8 @@
 {
-	"extends": "stylelint-config-wikimedia"
+	"extends": "stylelint-config-wikimedia",
+	"rules": {
+		"declaration-property-unit-disallowed-list": null,
+		"declaration-property-value-disallowed-list": null,
+		"selector-pseudo-element-colon-notation": null
+	}
 }

Gruntfile.js

@@ -18,7 +18,7 @@ module.exports = function ( grunt ) {
 		},
 		stylelint: {
 			all: [
-				'**/*.less',
+				'**/*.{less,vue}',
 				'!node_modules/**',
 				'!vendor/**',
 				'!lib/**'

resources/components/App.vue

@@ -198,14 +198,13 @@ module.exports = exports = {
 @import '../styles/Search-result-mobile.less';
 
 .mw-search-quick-view {
-
-	background-color: white;
-	font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
+	background-color: #000;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
 
 	&__desktop {
 		position: absolute;
-		border: solid 1px #c8CCd1;
-		right: 0px;
+		border: solid 1px #c8ccd1;
+		right: 0;
 		width: 30em;
 		display: inline-block;
 	}
@@ -218,6 +217,7 @@ module.exports = exports = {
 		height: 174px;
 		margin: 0;
 		top: 0;
+
 		& > * {
 			min-width: 300px;
 		}

resources/components/QuickViewTutorialPopup.vue

@@ -78,6 +78,7 @@ module.exports = exports = {
 	padding: 12px;
 	width: 320px;
 	left: 310px;
+
 	&__triangle {
 		top: 0;
 		left: 50%;
@@ -90,6 +91,7 @@ module.exports = exports = {
 		border-right: 8px solid transparent;
 		border-left: 8px solid transparent;
 		position: absolute;
+
 		&:after {
 			content: '';
 			width: 0;
@@ -102,6 +104,7 @@ module.exports = exports = {
 			top: -7px;
 			left: -8px;
 		}
+
 		&:before {
 			top: -8px;
 			left: -6px;
@@ -115,21 +118,26 @@ module.exports = exports = {
 			animation: pulse 2s infinite;
 			z-index: 10;
 		}
+
 		@keyframes pulse {
 			0% {
 				box-shadow: 0 0 0 0 @pulse-dot-fading;
 			}
+
 			70% {
 				box-shadow: 0 0 0 10px @pulse-dot-transparent;
 			}
+
 			100% {
 				box-shadow: 0 0 0 0 @pulse-dot-transparent;
 			}
 		}
 	}
+
 	&__heading {
 		display: flex;
 	}
+
 	&__title {
 		h4 {
 			font-size: 16px;
@@ -140,22 +148,27 @@ module.exports = exports = {
 			text-transform: capitalize;
 		}
 	}
+
 	&__article--icon {
 		background-image: url( ../assets/icons/article.svg );
 		background-repeat: no-repeat;
 		width: 14px;
 	}
+
 	&__close--icon {
 		cursor: pointer;
 		margin-left: auto;
 		line-height: 1;
 	}
+
 	&__content {
 		padding-top: 25px;
+
 		p {
 			padding: 0;
 			margin: 0;
 			line-height: 1.45;
+
 			&:first-child {
 				margin-bottom: 16px;
 			}

resources/components/generic/ContentSkeleton.vue

@@ -32,13 +32,15 @@ module.exports = exports = {
 <style lang="less">
 .content-skeleton {
 	margin: 0 20px;
+
 	&__block {
 		margin-bottom: 32px;
 	}
+
 	&__row {
 		height: 16px;
 		margin-bottom: 6px;
-		background-color: #EAECF0;
+		background-color: #eaecf0;
 	}
 }
 </style>

resources/components/generic/ImageWithLoadingBackground.vue

@@ -60,27 +60,22 @@ module.exports = exports = {
 	flex: 1;
 
 	&__loading {
-		background-color: #EAECF0;
+		background-color: #eaecf0;
 		position: relative;
 		overflow: hidden;
 
 		img {
 			visibility: hidden;
 		}
+
 		&::after {
 			position: absolute;
 			top: 0;
 			right: 0;
 			bottom: 0;
 			left: 0;
-			transform: translateX(-100%);
-			background-image: linear-gradient(
-			90deg,
-			rgba(255, 255, 255, 0) 0,
-			rgba(255, 255, 255, 0.2) 20%,
-			rgba(255, 255, 255, 0.6) 60%,
-			rgba(255, 255, 255, 0)
-			);
+			transform: translateX( -100% );
+			background-image: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ) 0, rgba( 255, 255, 255, 0.2 ) 20%, rgba( 255, 255, 255, 0.6 ) 60%, rgba( 255, 255, 255, 0 ) );
 			animation: shimmer 3s infinite;
 			content: '';
 		}
@@ -95,7 +90,7 @@ module.exports = exports = {
 
 	@keyframes shimmer {
 		100% {
-			transform: translateX(100%);
+			transform: translateX( 100% );
 		}
 	}
 }

resources/components/generic/LoadingDots.vue

@@ -26,7 +26,6 @@ module.exports = exports = {
 	// Re-usable LESS project code.
 	@width-bounce-dot: 1em;
 	@margin-bounce-dot: @width-bounce-dot / 4;
-
 	white-space: nowrap;
 	display: block;
 	width: 3 * @width-bounce-dot + 2 * @margin-bounce-dot;
@@ -61,6 +60,7 @@ module.exports = exports = {
 		100% {
 			transform: scale( 0.625 );
 		}
+
 		20% {
 			opacity: 0.87;
 			transform: scale( 1 );

resources/components/sections/QuickView.vue

@@ -176,6 +176,5 @@ module.exports = exports = {
 		padding-bottom: 20px;
 		min-height: 32px;
 	}
-
 }
 </style>

resources/components/sections/QuickViewCommons.vue

@@ -120,7 +120,7 @@ module.exports = exports = {
 	margin: 0 auto 20px;
 
 	h3 {
-		font-weight: 400;
+		font-weight: normal;
 		font-size: 1em;
 		margin: 0;
 		padding: 0;
@@ -131,6 +131,17 @@ module.exports = exports = {
 		margin-bottom: 8px;
 	}
 
+	&__footNote {
+		background-image: url( ../../assets/icons/commons.svg );
+		padding-left: 23px;
+		background-repeat: no-repeat;
+		background-position-y: center;
+
+		a {
+			color: inherit;
+		}
+	}
+
 	ul {
 		max-height: 210px;
 		overflow: hidden;
@@ -157,16 +168,5 @@ module.exports = exports = {
 			}
 		}
 	}
-
-	&__footNote {
-		background-image: url( '../../assets/icons/commons.svg' );
-		padding-left: 23px;
-		background-repeat: no-repeat;
-		background-position-y: center;
-
-		a {
-			color: inherit;
-		}
-	}
 }
 </style>

resources/components/sections/QuickViewDescription.vue

@@ -40,7 +40,7 @@ module.exports = exports = {
 <style lang="less">
 @import 'mediawiki.ui/variables.less';
 
-.quickViewDescription{
+.quickViewDescription {
 	width: 365px;
 	margin: 0 auto 20px;
 

resources/components/sections/QuickViewSections.vue

@@ -157,7 +157,7 @@ module.exports = exports = {
 <style lang="less">
 @import 'mediawiki.ui/variables.less';
 
-.quickViewSections{
+.quickViewSections {
 	width: 365px;
 	margin: 0 auto 20px;
 
@@ -171,13 +171,14 @@ module.exports = exports = {
 		max-height: 100px;
 		overflow: hidden;
 
-		&--expanded{
+		&--expanded {
 			max-height: 140px;
 		}
 	}
 
-	h3, &__pill {
-		font-weight: 400;
+	h3,
+	&__pill {
+		font-weight: normal;
 		font-size: 1em;
 		margin: 0;
 		padding: 0;
@@ -187,14 +188,15 @@ module.exports = exports = {
 		text-overflow: ellipsis;
 	}
 
-	h3{
+	h3 {
 		margin-bottom: 8px;
 	}
 
-	&__pill{
+	&__pill {
 		padding: 2px 8px;
 		border-radius: 12px;
 		border: 1px solid @colorGray10;
+
 		a {
 			font-size: 0.9285em;
 			line-height: 1.286em;

resources/components/sections/QuickViewSnippet.vue

@@ -52,7 +52,7 @@ module.exports = exports = {
 </script>
 
 <style>
-.quickViewSnippet{
+.quickViewSnippet {
 	width: 365px;
 	margin: 0 auto 20px;
 }