Feature: add stylelinter config

Author: Oleksandr Khlopiachyi

.stylelintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": "stylelint-config-standard",
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true,
+    "no-descending-specificity": null
+  }
+}

package.json

@@ -38,15 +38,19 @@
     "redux": "^4.0.1",
     "redux-saga": "^0.16.2",
     "sinon": "^7.2.3",
+    "stylelint": "^13.2.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.0.0",
     "tslint": "^5.13.1",
     "ua-parser-js": "^0.7.19",
     "ws": "^7.2.0"
   },
   "scripts": {
     "build:css": "postcss src/index.pcss -o src/index.css",
     "watch:css": "postcss src/index.pcss -o src/index.css -w",
-    "lint": "tsc --noEmit && tslint --project .",
+    "lint": "yarn style:lint && tsc --noEmit && tslint --project .",
     "lint:fix": "tslint --project . --fix",
+    "style:lint": "npx stylelint '**/*.pcss'",
     "mockAPI": "node mocks/mockAPI.js",
     "mockWS": "node mocks/mockWS.js",
     "start": "npm-run-all -p watch:css start-js",

postcss.config.js

@@ -5,14 +5,6 @@ module.exports = {
     plugins: [
         require('postcss-import'),
         require('postcss-nested'),
-        require('postcss-autoreset')({
-            reset: {
-                color: 'var(--base)',
-                'font-size': 'var(--font-size)',
-                'font-family': 'var(--font-family)',
-                'background-color': 'var(--background-dark)',
-            },
-        }),
         require('postcss-hexrgba'),
         require('autoprefixer'),
     ],

src/components/Beneficiaries/Beneficiaries.pcss

@@ -1,9 +1,9 @@
 .pg-beneficiaries {
   &__title {
     color: var(--primary-text-color);
+    font-size: 16px;
     font-style: normal;
     font-weight: 500;
-    font-size: 16px;
     line-height: 40px;
   }
 
@@ -16,13 +16,13 @@
     height: 50px;
     justify-content: space-between;
     padding: 13px;
-    transition: .2s;
+    transition: 0.2s;
 
     &__label {
       color: var(--primary-text-color);
+      font-size: 12px;
       font-style: normal;
       font-weight: 500;
-      font-size: 12px;
       line-height: 12px;
     }
 
@@ -45,21 +45,17 @@
     min-height: calc(var(--big-gap) * 12);
   }
 
-  .beneficiaries-fail-modal .cr-email-form {
-    min-height: calc(var(--big-gap) * 4);
-  }
-
   .beneficiaries-confirmation-modal .cr-email-form {
     min-height: calc(var(--big-gap) * 5.65);
   }
 
   .beneficiaries-confirmation-modal {
     .confirmation-modal__content {
-      display: flex;
       align-items: center;
-      width: 100%;
+      display: flex;
       height: 60px;
       margin: 10px 0 20px;
+      width: 100%;
 
       &__icon {
         margin: 0 19px 0 10px;
@@ -85,32 +81,33 @@
     border-radius: 4px;
     cursor: pointer;
     display: flex;
-    transition: .2s;
+    transition: 0.2s;
     width: 100%;
 
-    &__select, .select {
+    &__select,
+    .select {
       align-items: center;
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
       height: 70px;
+      justify-content: space-between;
       padding: 0 22px 0 13px;
-      transition: .2s;
+      transition: 0.2s;
       user-select: none;
       width: 100%;
 
       &__left {
         display: flex;
         flex-direction: column;
-        justify-content: center;
         height: 70px;
+        justify-content: center;
         width: 75%;
 
         &__title {
           color: var(--secondary-contrast-cta-color);
+          font-size: 10px;
           font-style: normal;
           font-weight: 500;
-          font-size: 10px;
           line-height: 12px;
         }
 
@@ -152,16 +149,16 @@
 
         &__select {
           color: var(--secondary-contrast-cta-color);
+          font-size: 12px;
           font-style: normal;
           font-weight: normal;
-          font-size: 12px;
           line-height: 12px;
           margin-right: 12px;
         }
 
         &__chevron {
           display: flex;
-          transition: transform .3s;
+          transition: transform 0.3s;
           width: 12px;
         }
       }
@@ -183,10 +180,11 @@
       }
     }
 
-    &__tip, .tip {
+    &__tip,
+    .tip {
       background: var(--body-background-color);
       border-radius: 4px;
-      box-shadow: 0px 8px 25px var(--shadow-color-level-3);
+      box-shadow: 0 8px 25px var(--shadow-color-level-3);
       display: flex;
       padding: 24px;
       position: absolute;
@@ -238,9 +236,9 @@
     }
 
     &--open {
+      background: var(--primary-cta-color);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      background: var(--primary-cta-color);
 
       .select__left {
         &__title {
@@ -275,11 +273,12 @@
       justify-content: space-between;
       position: absolute;
       top: 110px;
-      transition: .2s;
+      transition: 0.2s;
       width: 100%;
       z-index: 10;
 
-      &__item, .item {
+      &__item,
+      .item {
         align-items: center;
         border-top: 1px solid var(--wallets-item-border);
         display: flex;
@@ -291,15 +290,15 @@
         &__left {
           display: flex;
           flex-direction: column;
-          justify-content: center;
           height: 70px;
+          justify-content: center;
           width: 75%;
 
           &__title {
             color: var(--secondary-contrast-cta-color);
+            font-size: 10px;
             font-style: normal;
             font-weight: 500;
-            font-size: 10px;
             line-height: 12px;
           }
 
@@ -346,25 +345,26 @@
         }
       }
 
-      &__add, .add {
+      &__add,
+      .add {
         align-items: center;
         background-color: var(--dropdown-background-color);
-        border-top: 1px solid var(--wallets-item-border);
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
+        border-top: 1px solid var(--wallets-item-border);
         cursor: pointer;
         display: flex;
         height: 50px;
         justify-content: space-between;
         padding: 13px;
-        transition: .2s;
+        transition: 0.2s;
         width: 100%;
 
         &__label {
           color: var(--primary-text-color);
+          font-size: 12px;
           font-style: normal;
           font-weight: 500;
-          font-size: 12px;
           line-height: 12px;
         }
 
@@ -395,9 +395,9 @@
 
   .cr-email-form {
     background: var(--body-background-color);
-    box-shadow: 0px 8px 25px var(--shadow-color-level-3);
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
+    box-shadow: 0 8px 25px var(--shadow-color-level-3);
 
     &__option {
       background: var(--subheader-background-color);
@@ -412,7 +412,7 @@
         line-height: 60px;
         text-transform: lowercase;
 
-        &:first-letter {
+        &::first-letter {
           text-transform: uppercase;
         }
       }
@@ -468,20 +468,23 @@
 
   .beneficiaries-fail-modal {
     .cr-email-form {
+      min-height: calc(var(--big-gap) * 4);
+
       &__form-content {
-        display: flex;
         align-items: center;
+        display: flex;
         justify-content: center;
 
         &__info {
           align-items: center;
           color: var(--primary-text-color);
-          font-weight: normal;
           font-size: 14px;
+          font-weight: normal;
           position: absolute;
           top: 12px;
         }
       }
+
       &__button-wrapper {
         a {
           width: 100%;
@@ -496,13 +499,15 @@
 }
 
 @media screen and (max-width: 1024px) {
-  .pg-beneficiaries__dropdown__tip, .tip {
+  .pg-beneficiaries__dropdown__tip,
+  .tip {
     right: 0 !important;
   }
 }
 
 @media screen and (max-width: 400px) {
-  .pg-beneficiaries__dropdown__select, .select {
+  .pg-beneficiaries__dropdown__select,
+  .select {
     &__left {
       width: 55% !important;
     }

src/components/CombinedOrderBook/CombinedOrderBook.pcss

@@ -1,6 +1,6 @@
 .cr-combined-order-book {
-  position: relative;
   height: 100%;
+  position: relative;
 
   .cr-table {
     table-layout: fixed;
@@ -29,15 +29,15 @@
     padding-bottom: 5px;
 
     span {
+      font-size: 12px;
       font-weight: normal;
       line-height: 12px;
-      font-size: 12px;
       text-align: center;
 
       &:first-child {
+        font-size: 28px;
         font-weight: bold;
         line-height: normal;
-        font-size: 28px;
       }
     }
 
@@ -62,39 +62,39 @@
 
     &-market {
       border-top: 1px solid var(--order-book-last-market-price-border-color);
-      position: sticky;
       bottom: 0;
-      right: 0;
       left: 0;
+      position: sticky;
+      right: 0;
       z-index: 25;
     }
 
     .cr-order-book {
-      width: 50%;
       padding-right: 1px;
+      width: 50%;
     }
 
     .cr-table-background {
       top: 60px;
 
       &__row {
-        padding-bottom: calc(var(--gap) * 2.5);
         margin-bottom: 1px;
+        padding-bottom: calc(var(--gap) * 2.5);
       }
     }
   }
 
   &__small {
     .cr-table-background {
       &__row {
-        padding-bottom: calc(var(--gap) * 2.5);
         margin-bottom: 1px;
+        padding-bottom: calc(var(--gap) * 2.5);
       }
     }
 
     .cr-order-book {
-      overflow-y: scroll;
       height: 154px;
+      overflow-y: scroll;
 
       &:first-child {
         border-bottom: 1px solid var(--order-book-last-market-price-border-color);
@@ -114,8 +114,8 @@
       }
 
       th {
-        top: 0;
         position: sticky;
+        top: 0;
         z-index: 2222;
       }
     }