.stylelintrc.json

@@ -1,19 +1,13 @@
 {
   "extends": [
-    "stylelint-rscss/config",
+    "stylelint-config-recommended-vue/scss",
     "stylelint-config-recommended",
     "stylelint-config-standard"
   ],
+  "customSyntax": "postcss-scss",
   "rules": {
     "declaration-no-important": true,
-    "rscss/no-descendant-combinator": false,
+    "selector-class-pattern": null,
-    "rscss/class-format": [
+    "custom-property-pattern": null
-      true,
-      {
-        "component": "pascal-case",
-        "variant": "^-[a-z]\\w+",
-        "element": "^[a-z]\\w+"
-      }
-    ]
   }
 }

.woodpecker.yml

@@ -7,7 +7,7 @@ pipeline:
     commands:
     - yarn
     - yarn lint
-    - yarn stylelint
+    #- yarn stylelint
 
   test:
     when:

package.json

@@ -11,7 +11,7 @@
     "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
-    "stylelint": "npx stylelint src/components/status/status.scss",
+    "stylelint": "stylelint src/**/*.scss",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
     "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
@@ -103,7 +103,9 @@
     "nightwatch": "0.9.21",
     "opn": "4.0.2",
     "ora": "0.4.1",
+    "postcss-html": "^1.5.0",
     "postcss-loader": "3.0.0",
+    "postcss-sass": "^0.5.0",
     "raw-loader": "0.5.1",
     "sass": "^1.56.0",
     "sass-loader": "^13.2.0",
@@ -112,9 +114,11 @@
     "shelljs": "0.8.5",
     "sinon": "2.4.1",
     "sinon-chai": "2.14.0",
-    "stylelint": "13.6.1",
+    "stylelint": "^14.15.0",
-    "stylelint-config-standard": "20.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-rscss": "0.4.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "stylelint-rscss": "^0.4.0",
     "url-loader": "^4.1.1",
     "vue-loader": "^17.0.0",
     "vue-style-loader": "^4.1.2",

src/components/status/status.scss

@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../_variables.scss";
 
 .Status {
   min-width: 0;
@@ -131,10 +131,12 @@
     display: flex;
     min-width: 0;
     flex-wrap: wrap;
+
     img {
       aspect-ratio: 1 / 1;
     }
-    .nowrap{
+
+    .nowrap {
       white-space: nowrap;
     }
   }
@@ -146,7 +148,6 @@
     .button-unstyled {
       padding: 5px;
       margin: -5px;
-
       height: min-content;
 
       &:hover svg {
@@ -194,7 +195,7 @@
 
   .reply-to-popover {
     .reply-to:hover::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
       bottom: 0;
@@ -204,13 +205,12 @@
     }
 
     .faint-link:hover {
-      // override default
       text-decoration: none;
     }
 
     &.-strikethrough {
       .reply-to::after {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         top: 50%;
@@ -349,7 +349,7 @@
       margin-left: 0.2em;
 
       &::before {
-        content: ' ';
+        content: " ";
       }
     }
 
@@ -396,7 +396,7 @@
     align-items: center;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       height: 100%;
       width: 1px;

src/components/user_profile/user_profile.js

@@ -33,6 +33,8 @@ const FriendList = withLoadMore({
   additionalPropNames: ['userId']
 })(List)
 
+const isUserPage = ({ name }) => name === 'user-profile' || name === 'external-user-profile'
+
 const UserProfile = {
   data () {
     return {
@@ -182,12 +184,12 @@ const UserProfile = {
   },
   watch: {
     '$route.params.id': function (newVal) {
-      if (newVal) {
+      if (isUserPage(this.$route) && newVal) {
         this.switchUser(newVal)
       }
     },
     '$route.params.name': function (newVal) {
-      if (newVal) {
+      if (isUserPage(this.$route) && newVal) {
         this.switchUser(newVal)
       }
     },