.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+"
-      }
-    ]
   }
 }

package.json

@@ -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 url("../../_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;