Browse Source

[frontend] Add scss to the style linter

Johan Ahlen 5 năm trước cách đây
mục cha
commit
782b6bee02

+ 0 - 7
.stylelintrc.json

@@ -1,7 +0,0 @@
-{
-  "extends": "stylelint-config-standard",
-  "rules": {
-    "max-empty-lines": 4,
-    "no-descending-specificity": null
-  }
-}

+ 2 - 4
desktop/core/src/desktop/js/components/er-diagram/comps/literal-entity.scss

@@ -20,11 +20,9 @@
   border: 1px solid #d6d8db;
   border-radius: 5px;
   padding: 5px;
-  background-color: #FFF;
-
+  background-color: #fff;
   position: relative;
-
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(0, 0, 0, 0.15);
 
   .literal-value {
     text-align: center;

+ 10 - 11
desktop/core/src/desktop/js/components/er-diagram/comps/table-entity.scss

@@ -17,7 +17,7 @@
 */
 
 $border-color: #d6d8db;
-$bg-color: #FFF;
+$bg-color: #fff;
 
 .ellipsis-on-overflow {
   white-space: nowrap;
@@ -29,16 +29,13 @@ $bg-color: #FFF;
   border: 1px solid $border-color;
   border-radius: 5px;
   padding: 5px;
-
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(0, 0, 0, 0.15);
-
-  background-color: #EFEFEF;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(0, 0, 0, 0.15);
+  background-color: #efefef;
 
   .db-name {
     color: rgb(5, 5, 5);
     font-size: 0.8em;
     text-align: center;
-
     margin-bottom: -5px;
 
     @extend .ellipsis-on-overflow;
@@ -58,23 +55,25 @@ $bg-color: #FFF;
   .columns-container {
     padding: 0 10px;
 
-    .column-entity, .grouped-columns {
+    .column-entity,
+    .grouped-columns {
       padding: 5px;
       text-align: center;
       background-color: $bg-color;
-
       border: 1px solid $border-color;
       border-radius: 5px;
       margin: 5px 0;
-
       position: relative;
 
       @extend .ellipsis-on-overflow;
     }
 
     .grouped-columns {
-      box-shadow: -2px -2px 0 rgba($bg-color, 0.95), -3px -3px 0 rgba($border-color, 0.95),
-                  -5px -5px 0 rgba($bg-color, 0.7), -6px -6px 0 rgba($border-color, 0.7);
+      box-shadow:
+        -2px -2px 0 rgba($bg-color, 0.95),
+        -3px -3px 0 rgba($border-color, 0.95),
+        -5px -5px 0 rgba($bg-color, 0.7),
+        -6px -6px 0 rgba($border-color, 0.7);
       margin-left: 7px;
       margin-top: 10px;
     }

+ 10 - 17
desktop/core/src/desktop/js/components/er-diagram/er-diagram.scss

@@ -17,14 +17,14 @@
 */
 
 // Colors
-$bg-color: #FFF;
-$dot-color: #BBB;
+$bg-color: #fff;
+$dot-color: #bbb;
 
 // Dimensions
 $dot-size: 1px;
 $dot-space: 10px;
 
-expand-icon{
+.expand-icon {
   font-size: 13px;
   font-weight: bold;
 
@@ -37,16 +37,14 @@ expand-icon{
   color: #0a78a3;
   border: 1px solid #d6d8db;
   border-radius: 5px;
-
   position: relative;
-
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
   font-size: 14px;
-
   background:
     linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
-    linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
+    linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
+    $dot-color;
   background-size: $dot-space $dot-space;
 
   .buttons-panel {
@@ -71,35 +69,33 @@ expand-icon{
   .erd-container {
     white-space: nowrap;
     min-height: 500px;
-
     position: relative;
 
     .entity-group {
       display: inline-block;
       width: 200px;
       padding: 15px 30px;
-
       white-space: normal;
-
       vertical-align: top;
 
       .entity-container {
         padding: 10px 0;
 
-        .left-point, .right-point {
+        .left-point,
+        .right-point {
           position: absolute;
-          width: 0px;
-          height: 0px;
+          width: 0;
+          height: 0;
           top: 1em;
         }
 
         .left-point {
           left: -1px;
         }
+
         .right-point {
           right: -1px;
         }
-
       }
     }
   }
@@ -107,12 +103,9 @@ expand-icon{
   .erd-relations {
     position: absolute;
     overflow: visible;
-
     top: 0;
     left: 0;
-
     opacity: 0.5;
-
     pointer-events: none;
 
     .relation-path {

+ 12 - 6
desktop/core/src/desktop/js/components/styles/mixins.scss

@@ -57,15 +57,17 @@ $hue-panel-border-radius: 3px;
 }
 
 @mixin ease-transition($arg) {
-  @include transition($arg 0.2s ease)
+  @include transition($arg 0.2s ease);
 }
 
 @mixin box-shadow($top, $left, $blur, $color, $inset: false) {
   @if $inset {
-    -webkit-box-shadow:inset $top $left $blur $color;
-    -moz-box-shadow:inset $top $left $blur $color;
-    box-shadow:inset $top $left $blur $color;
-  } @else {
+    -webkit-box-shadow: inset $top $left $blur $color;
+    -moz-box-shadow: inset $top $left $blur $color;
+    box-shadow: inset $top $left $blur $color;
+  }
+
+  @else {
     -webkit-box-shadow: $top $left $blur $color;
     -moz-box-shadow: $top $left $blur $color;
     box-shadow: $top $left $blur $color;
@@ -116,15 +118,19 @@ $hue-panel-border-radius: 3px;
   @-webkit-keyframes #{$animation-name} {
     @content;
   }
+
   @-moz-keyframes #{$animation-name} {
     @content;
   }
+
   @-ms-keyframes #{$animation-name} {
     @content;
   }
+
   @-o-keyframes #{$animation-name} {
     @content;
   }
+
   @keyframes #{$animation-name} {
     @content;
   }
@@ -210,8 +216,8 @@ $hue-panel-border-radius: 3px;
 }
 
 @mixin hue-flex-layout($direction: row) {
-  display: flex;
   @include flex-direction($direction);
+  @include display-flex;
 
   column-gap: 10px;
   row-gap: 10px;

+ 39 - 0
package-lock.json

@@ -20970,6 +20970,45 @@
         "stylelint-config-recommended": "^3.0.0"
       }
     },
+    "stylelint-scss": {
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.18.0.tgz",
+      "integrity": "sha512-LD7+hv/6/ApNGt7+nR/50ft7cezKP2HM5rI8avIdGaUWre3xlHfV4jKO/DRZhscfuN+Ewy9FMhcTq0CcS0C/SA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.15",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+          "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+          "dev": true
+        }
+      }
+    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",

+ 10 - 3
package.json

@@ -31,9 +31,15 @@
   },
   "stylelint": {
     "extends": "stylelint-config-standard",
+    "plugins": [
+      "stylelint-scss"
+    ],
     "rules": {
+      "max-empty-lines": 4,
       "number-leading-zero": null,
-      "no-descending-specificity": null
+      "no-descending-specificity": null,
+      "at-rule-no-unknown": null,
+      "scss/at-rule-no-unknown": true
     }
   },
   "dependencies": {
@@ -131,6 +137,7 @@
     "style-loader": "^1.1.3",
     "stylelint": "13.6.0",
     "stylelint-config-standard": "20.0.0",
+    "stylelint-scss": "3.18.0",
     "ts-loader": "7.0.5",
     "typescript": "3.9.5",
     "vue-jest": "^3.0.6",
@@ -152,8 +159,8 @@
     "dev-workers": "webpack --config webpack.config.workers.js --watch -d",
     "less": "./node_modules/.bin/grunt less",
     "less-dev": "./node_modules/.bin/grunt watch",
-    "less-lint": "stylelint \"desktop/core/src/desktop/static/desktop/less/**/*.less\"",
-    "less-lint-fix": "npm run less-lint -- --fix",
+    "style-lint": "stylelint \"desktop/core/src/desktop/static/desktop/less/**/*.less\" \"desktop/core/src/desktop/js/**/*.scss\"" ,
+    "style-lint-fix": "npm run style-lint -- --fix",
     "lint": "eslint desktop/core/src/desktop/js tools/sql-docs tools/jison",
     "lint-debug": "npm run lint -- --debug",
     "lint-fix": "npm run lint -- --fix",