fix: stylelint ineffectiveness and differences in stylelint execution…

… on different os (#107)

* fix: stylelint ineffectiveness and differences in stylelint execution on different os

* chore: format by stylelint

* fix: manually fixing some stylelint issues that can't be fixed automatically

* feat: stylelint only exec from the staged files

* fix: code error caused by merge PR #103

.husky/pre-commit

@@ -1,6 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint:css
+yarn lint-staged
 yarn test
-npx lint-staged

.stylelintrc.js

@@ -0,0 +1,64 @@
+const package = require('./package.json')
+
+module.exports = {
+  customSyntax: 'postcss-scss',
+  extends: ['stylelint-config-standard'],
+  rules: {
+    'no-empty-source': null,
+    // Due to the large number of non-standard names previously used, it is not possible to quickly correct all names,
+    // so these rules have been temporarily disabled.
+    'selector-class-pattern': null,
+    'selector-id-pattern': null,
+    'custom-property-pattern': null,
+    // This rule provides little benefit relative to the cost of implementing it, so it has been disabled.
+    'no-descending-specificity': null,
+
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        // to support `:global`
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+  },
+
+  overrides: [
+    {
+      files: ['*.scss', '**/*.scss'],
+      extends: ['stylelint-config-standard-scss'],
+      rules: {
+        'scss/dollar-variable-pattern': null,
+      },
+    },
+    {
+      files: ['*.tsx', '**/*.tsx'],
+      customSyntax: 'postcss-styled-syntax',
+      // Currently, it is difficult to integrate postcss into styled-components to achieve CSS compatibility, unless a complex but not robust implementation is done manually.
+      // However, considering the implementation cost and the possibility that we may gradually abandon styled-components in the future, we do not adopt this solution.
+      // Therefore, without postcss to automatically handle compatibility, we need to handle it manually and avoid introducing syntax that is too high for stylelint.
+      // So here we introduce stylelint-no-unsupported-browser-features to help identify unsupported features and manually disable some stylelint rules that involve high-version features.
+      plugins: ['stylelint-no-unsupported-browser-features'],
+      rules: {
+        'media-feature-range-notation': null,
+        'plugin/no-unsupported-browser-features': [
+          true,
+          {
+            browsers: package.browserslist,
+            // TODO: Perhaps the browserslist should be adjusted to a more reasonable range, at least to a level that is compatible with CSS variables.
+            ignore: [
+              'css-nesting',
+              'css-sticky',
+              'css-variables',
+              'mdn-text-decoration-shorthand',
+              'css-unset-value',
+              'flexbox-gap',
+              'css-font-stretch',
+              'css-overscroll-behavior',
+            ],
+            ignorePartialSupport: true,
+          },
+        ],
+      },
+    },
+  ],
+}

package.json

@@ -64,24 +64,24 @@
     "husky": "^7.0.1",
     "jest-styled-components": "^7.0.5",
     "mockdate": "^2.0.5",
+    "postcss-scss": "4.0.8",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "react-app-rewired": "2.2.1",
     "react-test-renderer": "^17.0.2",
     "rxjs": "7.8.1",
     "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-no-unsupported-browser-features": "7.0.0",
     "stylelint-processor-styled-components": "^1.10.0",
     "timezone-mock": "^1.1.4",
     "ts-jest": "27.1.5",
     "typescript": "4.9.5"
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "lint": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:css": "stylelint src/**/*.tsx",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --watchAll=false",
     "eject": "react-app-rewired eject",
@@ -105,6 +105,7 @@
   ],
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",
-    "*.{ts,tsx,json,html,scss}": "prettier --write"
+    "*.{ts,tsx,json,html,scss}": "prettier --write",
+    "*.{scss,css,tsx}": "stylelint --fix"
   }
 }

src/assets/fonts/fonts.css

@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'Lato';
+  font-family: Lato;
   src: local('Lato'), url('./Lato-Regular.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;

src/components/Banner/index.module.scss

@@ -9,7 +9,8 @@ $backgroudColor: #232323;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto 100%;
-  @media (max-width: 750px) {
+
+  @media (width <= 750px) {
     background-image: url('../../assets/ckb_explorer_banner_phone.svg');
   }
 }

src/components/Card/HashCard/styles.module.scss

@@ -9,13 +9,16 @@
     width: 22px;
     height: 22px;
     pointer-events: none;
+
     path {
       fill: #999;
     }
   }
-  @media screen and (max-width: 750px) {
+
+  @media screen and (width <= 750px) {
     height: 22px;
     margin-left: 2px;
+
     svg {
       width: 16px;
       height: 16px;
@@ -34,9 +37,11 @@
   cursor: pointer;
   width: 22px;
   height: 22px;
+
   &:hover {
     color: var(--primary-color);
   }
+
   svg {
     pointer-events: none;
   }
@@ -62,7 +67,7 @@
   font-size: 16px;
   font-weight: 500;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     max-width: 90px;
     font-size: 13px;
   }

src/components/Card/TitleCard/styled.tsx

@@ -41,8 +41,9 @@ export const TitleCardPanel = styled.div`
 
     @media (max-width: 750px) {
       flex-direction: column-reverse;
+
       > div:first-child {
-        padding: 16px 0 0 0;
+        padding: 16px 0 0;
         justify-content: flex-end;
       }
     }

src/components/MaintainAlert/styles.module.scss

@@ -12,7 +12,7 @@
   background-color: #fa8f00;
   z-index: 9;
 
-  @media screen and (max-width: 800px) {
+  @media screen and (width <= 800px) {
     text-align: left;
   }
 }

src/components/NftCollectionInventory/styles.module.scss

@@ -24,21 +24,25 @@
     border-radius: 8px;
     object-fit: cover;
   }
+
   .tokenId,
   .owner {
     display: flex;
     width: 100%;
     line-height: 1em;
+
     span:first-of-type {
       flex-basis: 80px;
       flex-shrink: 0;
     }
+
     span,
     a {
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
+
   .tokenId {
     padding-top: 15px;
     padding-bottom: 10px;
@@ -50,15 +54,15 @@
     }
   }
 
-  @media screen and (max-width: 1280px) {
+  @media screen and (width <= 1280px) {
     grid-template-columns: repeat(3, 1fr);
   }
 
-  @media screen and (max-width: 860px) {
+  @media screen and (width <= 860px) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media screen and (max-width: 540px) {
+  @media screen and (width <= 540px) {
     display: flex;
     flex-direction: column;
     align-items: center;

src/components/NftCollectionOverview/styles.module.scss

@@ -3,14 +3,15 @@
   background-color: #fff;
   margin-bottom: 18px;
   padding: 20px 40px;
-  box-shadow: #dfdfdf 2px 2px 6px 0px;
+  box-shadow: #dfdfdf 2px 2px 6px 0;
   border-radius: 6px;
 
   .header {
     display: flex;
     font-size: 20px;
     font-weight: 700;
     line-height: 30px;
+
     img {
       width: 30px;
       height: 30px;
@@ -35,13 +36,13 @@
   color: #494949;
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (width <= 1200px) {
   .container {
     margin: 40px 45px 24px;
   }
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (width <= 750px) {
   .container {
     margin: 40px 8px 24px;
   }

src/components/NftCollectionTransfers/styles.module.scss

@@ -10,6 +10,7 @@
     position: relative;
     font-size: 14px;
     font-weight: 700;
+
     th {
       vertical-align: middle;
       padding-top: 12px;
@@ -81,32 +82,39 @@
   ul,
   dl {
     list-style: none;
+
     .item {
       padding-bottom: 16px;
     }
   }
+
   li {
     padding: 16px;
+
     &:not(:last-child) {
       border-bottom: 1px solid #d8d8d8;
     }
   }
+
   dl > div {
     display: flex;
     width: 100%;
   }
+
   dt {
     width: 100px;
   }
+
   dd {
     text-align: right;
     flex: 1;
   }
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (width <= 1200px) {
     table {
       display: none;
     }
+
     ul {
       display: block;
     }
@@ -120,13 +128,16 @@
 .tokenId {
   overflow: hidden;
   text-overflow: ellipsis;
-  @media screen and (max-width: 1800px) {
+
+  @media screen and (width <= 1800px) {
     max-width: 200px;
   }
-  @media screen and (max-width: 1400px) {
+
+  @media screen and (width <= 1400px) {
     max-width: 120px;
   }
-  @media screen and (max-width: 1200px) {
+
+  @media screen and (width <= 1200px) {
     max-width: 80px;
   }
 }

src/components/NftHolderList/styles.module.scss

@@ -11,17 +11,19 @@
     position: relative;
     font-size: 14px;
     font-weight: 700;
+
     th {
       vertical-align: middle;
       padding-top: 12px;
       padding-bottom: 12px;
       text-transform: capitalize;
       white-space: nowrap;
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         &:first-child {
           padding-right: 0;
         }
+
         &:last-child {
           padding-left: 0;
         }
@@ -49,7 +51,7 @@
     max-width: 0.25vw;
 
     &:last-child {
-      @media screen and (max-width: 750px) {
+      @media screen and (width <= 750px) {
         text-align: right;
       }
     }
@@ -58,7 +60,8 @@
     &:last-child {
       padding-left: 40px;
       padding-right: 40px;
-      @media screen and (max-width: 750px) {
+
+      @media screen and (width <= 750px) {
         padding-left: 16px;
         padding-right: 16px;
       }
@@ -75,13 +78,13 @@
   font-family: inherit;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (width >= 1024px) {
   .addr:last-child {
     display: none;
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (width <= 1024px) {
   .addr:first-child {
     display: none;
   }