build: add style lint

package-lock.json

@@ -15595,6 +15595,12 @@
       "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
       "dev": true
     },
+    "postcss-scss": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.2.tgz",
+      "integrity": "sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ==",
+      "dev": true
+    },
     "postcss-selector-parser": {
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",

package.json

@@ -43,6 +43,7 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.1.3",
     "node-sass": "^6.0.1",
+    "postcss-scss": "^4.0.2",
     "prettier": "^2.2.1",
     "sass-loader": "^10.2.0",
     "stylelint": "^14.1.0",

src/styles/lib.scss

@@ -18,85 +18,111 @@
   display: flex;
   flex-direction: column;
 }
+
 .flex-h {
   display: flex;
   flex-direction: row;
 }
+
 .ell {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
+
 .cp {
   cursor: pointer;
 }
+
 .cm {
   cursor: move;
 }
+
 .auto {
   margin-right: auto;
   margin-left: auto;
 }
+
 .green {
   color: #4caf50;
 }
+
 .red {
   color: #e54c17;
 }
+
 .blue {
   color: #448dfe;
 }
+
 .purple {
   color: #6e40aa;
 }
+
 .yellow {
   color: #fbb03b;
 }
+
 .grey {
   color: #a7aebb;
 }
+
 .white {
   color: #fff;
 }
+
 .bg-green {
   background-color: #4caf50;
 }
+
 .bg-red {
   background-color: #e54c17;
 }
+
 .bg-blue {
   background-color: #448dfe;
 }
+
 .bg-purple {
   background-color: #6e40aa;
 }
+
 .bg-yellow {
   background-color: #fbb03b;
 }
+
 .bg-grey {
   background-color: #a7aebb;
 }
+
 .ml-5 {
   margin-left: 5px;
 }
+
 .ml-10 {
   margin-left: 10px;
 }
+
 .ml-15 {
   margin-left: 15px;
 }
+
 .ml-20 {
   margin-left: 20px;
 }
+
 .mr-5 {
   margin-right: 5px;
 }
+
 .mr-10 {
   margin-right: 10px;
 }
+
 .mr-15 {
   margin-right: 15px;
 }
+
 .mr-20 {
   margin-right: 20px;
 }

stylelint.config.js

@@ -0,0 +1,93 @@
+module.exports = {
+  root: true,
+  plugins: ["stylelint-order"],
+  customSyntax: "postcss-scss",
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  rules: {
+    "selector-class-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global"],
+      },
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        ignorePseudoElements: ["v-deep"],
+      },
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+          "function",
+          "if",
+          "each",
+          "include",
+          "mixin",
+        ],
+      },
+    ],
+    "no-empty-source": null,
+    "named-grid-areas-no-invalid": null,
+    "unicode-bom": "never",
+    "no-descending-specificity": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    // 'declaration-block-trailing-semicolon': 'always',
+    "rule-empty-line-before": [
+      "always",
+      {
+        ignore: ["after-comment", "first-nested"],
+      },
+    ],
+    "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
+    "order/order": [
+      [
+        "dollar-variables",
+        "custom-properties",
+        "at-rules",
+        "declarations",
+        {
+          type: "at-rule",
+          name: "supports",
+        },
+        {
+          type: "at-rule",
+          name: "media",
+        },
+        "rules",
+      ],
+      { severity: "warning" },
+    ],
+  },
+  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"],
+  overrides: [
+    {
+      files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],
+      extends: ["stylelint-config-recommended", "stylelint-config-html"],
+      rules: {
+        "keyframes-name-pattern": null,
+        "selector-pseudo-class-no-unknown": [
+          true,
+          {
+            ignorePseudoClasses: ["deep", "global"],
+          },
+        ],
+        "selector-pseudo-element-no-unknown": [
+          true,
+          {
+            ignorePseudoElements: ["v-deep", "v-global", "v-slotted"],
+          },
+        ],
+      },
+    },
+  ],
+};