Add stylelint

Signed-off-by: Louis Chemineau <louis@chmn.me>

package.json

@@ -23,6 +23,8 @@
 		"serve": "NODE_ENV=development webpack serve --progress --config webpack.common.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
+		"stylelint": "stylelint src",
+		"stylelint:fix": "stylelint src --fix",
 		"test": "jest",
 		"test:coverage": "jest --coverage",
 		"cypress": "./cypress/start.sh; cypress run; ./cypress/stop.sh",
@@ -38,7 +40,6 @@
 		"@nextcloud/logger": "^2.5.0",
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/router": "^2.0.1",
-		"@nextcloud/stylelint-config": "^2.3.0",
 		"@nextcloud/vue": "^7.4.0",
 		"@nextcloud/vue-richtext": "^2.0.4",
 		"he": "^1.2.0",
@@ -77,6 +78,7 @@
 		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^2.3.0",
 		"@nextcloud/eslint-config": "^8.2.0",
+		"@nextcloud/stylelint-config": "^2.3.0",
 		"@nextcloud/webpack-vue-config": "^5.4.0",
 		"cypress": "^11.2.0",
 		"jest": "^29.3.1",

src/components/Composer/Composer.vue

@@ -669,8 +669,7 @@ export default {
 		right: 0;
 		top: 2;
 	}
-</style>
-<style>
+
 	/* Tribute-specific styles TODO: properly scope component css */
 	.tribute-container {
 		position: absolute;
@@ -685,9 +684,8 @@ export default {
 		z-index: 999999;
 		border-radius: 4px;
 		box-shadow: 0 1px 3px var(--color-box-shadow);
-	}
 
-	.tribute-container ul {
+		ul {
 			margin: 0;
 			margin-top: 2px;
 			padding: 0;
@@ -698,25 +696,24 @@ export default {
 			overflow: hidden;
 		}
 
-	.tribute-container li {
+		li {
 			color: var(--color-text);
 			padding: 5px 10px;
 			cursor: pointer;
 			font-size: 14px;
 			display: flex;
-	}
 
-	.tribute-container li span {
+			span {
 				display: block;
 			}
 
-	.tribute-container li.highlight,
-	.tribute-container li:hover {
+			&.highlight,
+			&:hover {
 				background: var(--color-primary);
 				color: var(--color-primary-text);
 			}
 
-	.tribute-container li img {
+			img {
 				width: 32px;
 				height: 32px;
 				border-radius: 50%;
@@ -726,31 +723,34 @@ export default {
 				margin-top: 3px;
 			}
 
-	.tribute-container li span {
+			span {
 				font-weight: bold;
 			}
 
-	.tribute-container li.no-match {
+			&.no-match {
 				cursor: default;
 			}
 
-	.tribute-container .menu-highlighted {
+		}
+
+		.menu-highlighted {
 			font-weight: bold;
 		}
 
-	.tribute-container .account,
-	.tribute-container li.highlight .account,
-	.tribute-container li:hover .account {
+		.account,
+		li.highlight .account,
+		li:hover .account {
 			font-weight: normal;
 			color: var(--color-text-light);
 			opacity: 0.5;
 		}
 
-	.tribute-container li.highlight .account,
-	.tribute-container li:hover .account {
+		li.highlight .account,
+		li:hover .account {
 			color: var(--color-primary-text) !important;
 			opacity: .6;
 		}
+	}
 
 	.message .mention {
 		color: var(--color-primary-element);
@@ -760,9 +760,8 @@ export default {
 		padding-left: 2px;
 		padding-bottom: 1px;
 		padding-right: 5px;
-	}
 
-	.mention img {
+		img {
 			width: 16px;
 			border-radius: 50%;
 			overflow: hidden;
@@ -770,6 +769,7 @@ export default {
 			vertical-align: middle;
 			margin-top: -1px;
 		}
+	}
 
 	.hashtag {
 		text-decoration: underline;

src/components/Emoji.vue

@@ -41,6 +41,3 @@ export default {
 	},
 }
 </script>
-<style scoped>
-
-</style>

src/components/TimelineList.vue

@@ -154,15 +154,15 @@ export default {
 </script>
 
 <style scoped>
-	.list-item {
-	}
 .list-enter-active, .list-leave-active {
 	transition: all .5s;
 }
+
 .list-enter {
 	opacity: 0;
 	transform: translateY(-30px);
 }
+
 .list-leave-to {
 	opacity: 0;
 	transform: translateX(-100px);

src/views/OStatus.vue

@@ -123,9 +123,11 @@ export default {
 	h2, p {
 		color: var(--color-primary-text);
 	}
+
 	p .icon {
 		display: inline-block;
 	}
+
 	.avatardiv {
 		vertical-align: -4px;
 		margin-right: 3px;

src/views/ProfileFollowers.vue

@@ -68,6 +68,7 @@ export default {
 		display: flex;
 		flex-wrap: wrap;
 	}
+
 	.user-entry {
 		width: 100%;
 		padding: 20px;

src/views/ProfileTimeline.vue

@@ -40,7 +40,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/Timeline.vue

@@ -149,6 +149,7 @@ export default {
 		transition: all .5s ease-out;
 		max-height: 200px;
 	}
+
 	.slide-fade-leave-to {
 		max-height: 0;
 		opacity: 0;

src/views/TimelineSinglePost.vue

@@ -93,7 +93,6 @@ export default {
 </script>
 
 <style scoped>
-
 .social__timeline {
 	max-width: 600px;
 	margin: 15px auto;
@@ -102,9 +101,4 @@ export default {
 #app-content {
 	position: relative;
 }
-
-</style>
-
-<style>
-
 </style>

stylelint.config.js

@@ -0,0 +1,3 @@
+const stylelintConfig = require('@nextcloud/stylelint-config')
+
+module.exports = stylelintConfig