feat: support stylelint

.stylelintrc

@@ -0,0 +1,23 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "rules": {
+    "selector-class-pattern": null,
+    "max-nesting-depth": [
+      3,
+      {
+        "ignore": [
+          "pseudo-classes"
+        ],
+        "ignoreAtRules": [
+          "each",
+          "media",
+          "supports",
+          "include"
+        ]
+      }
+    ],
+    "scss/no-global-function-names": null,
+    "scss/at-function-pattern": null,
+    "scss/dollar-variable-pattern": null
+  }
+}

app/pages/common.scss

@@ -14,7 +14,7 @@
   }
 }
 
-.icon {
+%icon {
   display: inline-flex;
   width: calcVW(36);
   height: calcVW(36);
@@ -30,8 +30,12 @@
   }
 }
 
+.icon {
+  @extend %icon;
+}
+
 .link {
-  @extend .icon;
+  @extend %icon;
 
   &::before {
     @include bg-image-full(url('@static/images/icon-link.svg'));
@@ -51,6 +55,7 @@
   }
 
   .icon {
+    @extend %icon;
     width: calcPX(36);
     height: calcPX(36);
     margin: 0 calcPX(10);

app/pages/cover/cover.scss

@@ -5,6 +5,7 @@
   0% {
     transform: rotate3d(1, 1, 1, 0deg);
   }
+
   100% {
     transform: rotate3d(1, 1, 1, 360deg);
   }
@@ -17,6 +18,7 @@
 
 // logo animation
 $picH: calcVW(240);
+
 .logoWrap {
   @extend %rel;
   height: $picH;
@@ -74,6 +76,7 @@ $picH: calcVW(240);
   }
 
   $picH: calcPX(240);
+
   .logoWrap {
     height: $picH;
     width: $picH;

app/popups/popupX/popupX.scss

@@ -9,7 +9,7 @@ $popupXFontSize: calcVW(30);
   flex-direction: column;
   z-index: 99;
 
-  background-color: rgba(black, .85);
+  background-color: rgba(#000, .85);
 
   opacity: 0;
   transition: opacity .4s;

app/preloader/preloader.scss

@@ -20,6 +20,7 @@ $loadingBgc: $bgc;
 $progressH: 2vw;
 $progressW: 48vw;
 $progressPadding: $progressH / 4;
+
 .loadingProgressWrapper {
   display: flex;
   width: $progressW - $progressPadding * 2;
@@ -69,6 +70,7 @@ $progressPadding: $progressH / 4;
   $progressW: 240px;
   $progressPadding: $progressH / 4;
   $space: 10px;
+
   .loadingProgressWrapper {
     width: $progressW - $progressPadding * 2;
     height: $progressH - $progressPadding * 2;

package.json

@@ -4,8 +4,12 @@
   "description": "H5 webpack starter for webpack, es6/7, sass, pug, swiper...",
   "scripts": {
     "start": "npm run dev",
-    "lint": "eslint -c .eslintrc .",
-    "lint:fix": "eslint --fix -c .eslintrc .",
+    "eslint": "eslint -c .eslintrc .",
+    "eslint:fix": "eslint --fix -c .eslintrc .",
+    "stylelint": "stylelint app/**/*.scss",
+    "stylelint:fix": "stylelint app/**/*.scss --fix",
+    "lint": "npm run eslint && npm run stylelint",
+    "lint:fix": "npm run eslint:fix && npm run stylelint:fix",
     "dev": "npx webpack-cli --define-process-env-node-env development -c webpack/webpack.dev.config.js -w --color",
     "build": "npx webpack-cli --define-process-env-node-env production -c webpack/webpack.build.config.js --progress --color",
     "build:watch": "npx webpack-cli --define-process-env-node-env production -c webpack/webpack.build.config.js --progress --color -w",
@@ -73,6 +77,9 @@
     "pug-loader": "^2.4.0",
     "sass-loader": "^14.0.0",
     "style-loader": "^3.3.4",
+    "stylelint": "^15.11.0",
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-webpack-plugin": "^4.1.1",
     "terser-webpack-plugin": "^5.3.10",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0",