Husky and sasslint fixes, fixes #14638

7 years ago · ce0dcd5cab
parent 66a13b281c
commit ce0dcd5cab
30 changed files with 117 additions and 85 deletions
--- a/package.json
+++ b/package.json
@ -59,8 +59,7 @@
    "grunt-newer": "^1.3.0",
    "grunt-notify": "^0.4.5",
    "grunt-postcss": "^0.8.0",
-    "grunt-sass": "^2.0.0",
-    "grunt-sass-lint": "^0.2.2",
+    "grunt-sass-lint": "^0.2.4",
    "grunt-usemin": "3.1.1",
    "grunt-webpack": "^3.0.2",
    "html-loader": "^0.5.1",
@ -116,7 +115,12 @@
    "typecheck": "tsc --noEmit",
    "jest": "jest --notify --watch",
    "api-tests": "jest --notify --watch --config=tests/api/jest.js",
-    "precommit": "lint-staged && grunt precommit"
+    "precommit": "grunt precommit"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && grunt precommit"
+    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
--- a/public/sass/.sass-lint.yml
+++ b/public/sass/.sass-lint.yml
@ -1,23 +1,41 @@
 options:
  formatter: stylish

-files:
-  include: '**/*.s+(a|c)ss'
-  ignore:
-    - './utils/*.scss'
-
 rules:
+  quotes:
+    - 0
+    -
+      style: 'single'
+
+  brace-style:
+    - 2
+    -
+      style: '1tbs'
+
+  space-before-brace:
+    - 2
+
+  no-duplicate-properties:
+    - 0
+    -
+      exclude:
+        - 'font-size'
+        - 'word-break'
+
+  empty-line-between-blocks:
+    - 0
+    -
+      allow-single-line-rulesets: 1
+
  # Extends
  extends-before-mixins: 0
  extends-before-declarations: 0
  placeholder-in-extend: 0
-
  # Mixins
  mixins-before-declarations: 0

  # Line Spacing
  one-declaration-per-line: 0
-  empty-line-between-blocks: 0
  single-line-per-selector: 0

  # Disallows
@ -25,7 +43,6 @@ rules:
  no-color-literals: 0
  no-css-comments: 0
  no-debug: 0
-  no-duplicate-properties: 0
  no-empty-rulesets: 1
  no-extends: 0
  no-ids: 0
@ -40,6 +57,7 @@ rules:
  no-vendor-prefixes: 0
  no-warn: 0
  property-units: 0
+  pseudo-element: 0

  # Nesting
  force-attribute-nesting: 0
@ -57,7 +75,6 @@ rules:
  # Style Guide
  bem-depth: 0
  border-zero: 0
-  brace-style: 0
  clean-import-paths: 0
  empty-args: 0
  hex-length: 0
@ -66,7 +83,6 @@ rules:
  leading-zero: 0
  nesting-depth: 0
  property-sort-order: 0
-  quotes: 0
  shorthand-values: 0
  url-quotes: 0
  variable-for-property: 0
@ -76,12 +92,10 @@ rules:
  space-after-comma: 0
  space-before-colon: 0
  space-after-colon: 0
-  space-before-brace: 0
  space-before-bang: 0
  space-after-bang: 0
  space-between-parens: 0
  space-around-operator: 0

  # Final Items
-  trailing-semicolon: 0
  final-newline: 0
--- a/public/sass/components/_drop.scss
+++ b/public/sass/components/_drop.scss
@ -5,13 +5,13 @@ $useDropShadow: false;
 $attachmentOffset: 0%;
 $easing: cubic-bezier(0, 0, 0.265, 1);

-@include drop-theme("error", $popover-error-bg, $popover-color);
-@include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color);
-@include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-theme('error', $popover-error-bg, $popover-color);
+@include drop-theme('popover', $popover-bg, $popover-color, $popover-border-color);
+@include drop-theme('help', $popover-help-bg, $popover-help-color);

-@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
-@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
-@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale('drop', 'help', $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale('drop', 'error', $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale('drop', 'popover', $attachmentOffset: $attachmentOffset, $easing: $easing);

 .drop-element {
  z-index: 10000;
--- a/public/sass/components/_filter-list.scss
+++ b/public/sass/components/_filter-list.scss
@ -67,17 +67,17 @@
  text-transform: uppercase;

  &.online {
-    background-image: url("/img/online.svg");
+    background-image: url('/img/online.svg');
    color: $online;
  }

  &.warn {
-    background-image: url("/img/warn-tiny.svg");
+    background-image: url('/img/warn-tiny.svg');
    color: $warn;
  }

  &.critical {
-    background-image: url("/img/critical.svg");
+    background-image: url('/img/critical.svg');
    color: $critical;
  }
 }
--- a/public/sass/components/_jsontree.scss
+++ b/public/sass/components/_jsontree.scss
@ -3,16 +3,20 @@ json-tree {
  .json-tree-key {
    vertical-align: middle;
  }
+
  .expandable {
    position: relative;
+
    &::before {
      pointer-events: none;
    }
+
    &::before,
    & > .json-tree-key {
      cursor: pointer;
    }
  }
+
  .json-tree-branch-preview {
    display: inline-block;
    vertical-align: middle;
@ -24,36 +28,44 @@ json-tree {
  ul {
    padding-left: $spacer;
  }
+
  li,
  ul {
    list-style: none;
  }
+
  li {
    line-height: 1.3rem;
  }
+
  .json-tree-key {
    color: $variable;
    padding: 5px 10px 5px 15px;
+
    &::after {
-      content: ":";
+      content: ':';
    }
  }
+
  json-node.expandable {
    &::before {
-      content: "\25b6";
+      content: '\25b6';
      position: absolute;
      left: 0px;
      font-size: 8px;
      transition: transform 0.1s ease;
    }
+
    &.expanded::before {
      transform: rotate(90deg);
    }
  }
+
  .json-tree-leaf-value,
  .json-tree-branch-preview {
    word-break: break-all;
  }
+
  .json-tree-branch-preview {
    overflow: hidden;
    font-style: italic;
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@ -174,7 +174,6 @@
 }

 .panel-editor-tabs {
-  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
@ -221,7 +220,6 @@

    &:hover {
      filter: $panel-editor-side-menu-shadow;
-      transform: translate(-2px, -2px);
      transform: scale(1.1);
    }
  }
--- a/public/sass/components/_panel_gettingstarted.scss
+++ b/public/sass/components/_panel_gettingstarted.scss
@ -51,8 +51,7 @@ $path-position: $marker-size-half - ($path-height / 2);
  min-width: $marker-size;

  &::after {
-    right: -50%;
-    content: "";
+    content: '';
    display: block;
    position: absolute;
    z-index: 1;
@ -105,7 +104,7 @@ $path-position: $marker-size-half - ($path-height / 2);

      // change icon to check
      .icon-gf::before {
-        content: "\e604";
+        content: '\e604';
      }
    }
    .progress-text {
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@ -368,7 +368,6 @@
  font-size: $font-size-sm;
  position: absolute;
  text-align: center;
-  font-size: 12px;
 }

 .alert-handle-wrapper {
--- a/public/sass/components/_shortcuts.scss
+++ b/public/sass/components/_shortcuts.scss
@ -33,9 +33,8 @@
  text-align: center;
  margin-right: 0.3rem;
  padding: 3px 5px;
-  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  line-height: 10px;
-  color: #555;
  vertical-align: middle;
  background-color: $btn-inverse-bg;
  border: solid 1px $btn-inverse-bg-hl;
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@ -29,12 +29,12 @@
  .sidemenu-open {
    .sidemenu {
      background: $side-menu-bg;
-      position: initial;
      height: auto;
      box-shadow: $side-menu-shadow;
      position: relative;
      z-index: $zindex-sidemenu;
    }
+
    .sidemenu__top,
    .sidemenu__bottom {
      display: block;
@ -212,7 +212,6 @@ li.sidemenu-org-switcher {
    .sidemenu {
      width: 100%;
      background: $side-menu-bg-mobile;
-      position: initial;
      height: auto;
      box-shadow: $side-menu-shadow;
      position: relative;
--- a/public/sass/components/_slate_editor.scss
+++ b/public/sass/components/_slate_editor.scss
@ -32,7 +32,6 @@
    left: -10000px;
    opacity: 0;
    border-radius: $border-radius;
-    transition: opacity 0.75s;
    border: $panel-border;
    max-height: calc(66vh);
    overflow-y: scroll;
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@ -22,10 +22,8 @@
 }

 .submenu-item {
-  margin-right: 20px;
  display: inline-block;
  margin-right: 15px;
-  display: inline-block;
  float: left;

  .fa-caret-down {
@ -42,7 +40,6 @@
  background-color: $input-bg;
  border: 1px solid $input-border-color;
  border-radius: $input-border-radius;
-  color: $input-color;
  box-sizing: content-box;
  display: inline-block;
  color: $text-color;
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@ -19,15 +19,14 @@ gf-form-switch[disabled] {
 }

 .gf-form-switch {
+  display: flex;
  position: relative;
-  display: inline-block;
  width: 60px;
  height: $gf-form-input-height;
  background: $switch-bg;
  border: 1px solid $input-border-color;
  border-left: none;
  border-radius: $input-border-radius;
-  display: flex;
  align-items: center;
  justify-content: center;

@ -77,14 +76,13 @@ input:checked + .gf-form-switch__slider::before {

 .gf-form-checkbox {
  position: relative;
-  display: inline-block;
+  display: flex;
  width: 50px;
  height: $gf-form-input-height;
  background: $switch-bg;
  border: 1px solid $input-border-color;
  border-left: none;
  border-radius: $input-border-radius;
-  display: flex;
  align-items: center;
  justify-content: center;

--- a/public/sass/components/_tabbed_view.scss
+++ b/public/sass/components/_tabbed_view.scss
@ -31,7 +31,6 @@

 .tabbed-view-close-btn {
  float: right;
-  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
--- a/public/sass/components/_tags.scss
+++ b/public/sass/components/_tags.scss
@ -25,6 +25,7 @@
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 0 1px rgba($white, 0.2);
+
  .icon-tag {
    position: relative;
    top: 1px;
--- a/public/sass/components/_tagsinput.scss
+++ b/public/sass/components/_tagsinput.scss
@ -24,12 +24,15 @@
    [data-role='remove'] {
      margin-left: 8px;
      cursor: pointer;
+
      &::after {
        content: 'x';
        padding: 0px 2px;
      }
+
      &:hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+
        &:active {
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@ -60,9 +60,11 @@
    list-style: none;
    float: left;
    margin: 0 30px 10px 0px;
+
    li {
      line-height: 22px;
    }
+
    li.active {
      border-bottom: 1px solid $blue;
      margin: 3px 0;
@ -77,26 +79,32 @@
  td {
    padding: 1px;
  }
+
  button {
    @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
    background-image: none;
    border: none;
    color: $text-color;
+
    &.active span {
      color: $blue;
      font-weight: bold;
    }
+
    .text-info {
      color: $orange;
      font-weight: bold;
    }
+
    &.btn-sm {
      font-size: $font-size-sm;
      padding: 5px 11px;
    }
+
    &:hover {
      color: $text-color-strong;
    }
+
    &[disabled] {
      color: $text-color;
    }
@ -119,6 +127,7 @@
 .fa-chevron-left::before {
  content: '\f053';
 }
+
 .fa-chevron-right::before {
  content: '\f054';
 }
--- a/public/sass/components/_tooltip.scss
+++ b/public/sass/components/_tooltip.scss
@ -11,21 +11,26 @@
  font-size: 11px;
  line-height: 1.4;
  @include opacity(0);
+
  &.in {
    @include opacity(100);
  }
+
  &.top {
    margin-top: -3px;
    padding: 5px 0;
  }
+
  &.right {
    margin-left: 3px;
    padding: 0 5px;
  }
+
  &.bottom {
    margin-top: 3px;
    padding: 5px 0;
  }
+
  &.left {
    margin-left: -3px;
    padding: 0 5px;
@ -60,6 +65,7 @@
    border-width: $tooltipArrowWidth $tooltipArrowWidth 0;
    border-top-color: $tooltipArrowColor;
  }
+
  &.right .tooltip-arrow {
    top: 50%;
    left: 0;
@ -67,6 +73,7 @@
    border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0;
    border-right-color: $tooltipArrowColor;
  }
+
  &.left .tooltip-arrow {
    top: 50%;
    right: 0;
@ -74,6 +81,7 @@
    border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth;
    border-left-color: $tooltipArrowColor;
  }
+
  &.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
@ -98,6 +106,7 @@
  max-height: 600px;
  overflow: hidden;
  line-height: 14px;
+
  a {
    color: $tooltipLinkColor;
  }
--- a/public/sass/components/_view_states.scss
+++ b/public/sass/components/_view_states.scss
@ -10,6 +10,7 @@

  .navbar-page-btn {
    transform: translate3d(-36px, 0, 0);
+
    i {
      opacity: 0;
    }
@ -40,9 +41,11 @@
  .navbar {
    display: none;
  }
+
  .scroll-canvas--dashboard {
    height: 100%;
  }
+
  .submenu-controls {
    display: none;
  }
--- a/public/sass/components/edit_sidemenu.scss
+++ b/public/sass/components/edit_sidemenu.scss
@ -46,6 +46,7 @@
    li {
      float: left;
    }
+
    a {
      margin: 0.3rem 1rem;
    }
--- a/public/sass/fonts.scss
+++ b/public/sass/fonts.scss
@ -1 +1 @@
-@import "base/fonts";
+@import 'base/fonts';
--- a/public/sass/grafana.dark.scss
+++ b/public/sass/grafana.dark.scss
@ -1,3 +1,3 @@
-@import "variables";
-@import "variables.dark";
-@import "grafana";
+@import 'variables';
+@import 'variables.dark';
+@import 'grafana';
--- a/public/sass/grafana.light.scss
+++ b/public/sass/grafana.light.scss
@ -1,3 +1,3 @@
-@import "variables";
-@import "variables.light";
-@import "grafana";
+@import 'variables';
+@import 'variables.light';
+@import 'grafana';
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@ -42,15 +42,13 @@
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
+  display: flex;
+  flex-direction: column;

  &--dashboard {
    height: calc(100% - 56px);
  }

-  // Sticky footer
-  display: flex;
-  flex-direction: column;
-
  > div {
    flex-grow: 1;
  }
--- a/public/sass/mixins/_forms.scss
+++ b/public/sass/mixins/_forms.scss
@ -13,16 +13,9 @@
  .custom-control {
    color: $color;
  }
-  // Set the border and box shadow on specific inputs to match
+
  .form-control {
    border-color: $color;
-    // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
-
-    &:focus {
-      // border-color: darken($border-color, 10%);
-      // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
-      // @include box-shadow($shadow);
-    }
  }

  // Set validation states also for addons
--- a/public/sass/pages/_history.scss
+++ b/public/sass/pages/_history.scss
@ -29,10 +29,6 @@
  white-space: nowrap;
  position: relative;

-  &:before,
-  &:after {
-  }
-
  &:after {
    left: -40px;
  }
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@ -13,9 +13,11 @@ $login-border: #8daac5;
  background-image: url(../img/heatmap_bg_test.svg);
  background-size: cover;
  color: #d8d9da;
+
  & a {
    color: #d8d9da !important;
  }
+
  & .btn-primary {
    @include buttonBackground(#ff6600, #bc3e06);
  }
@ -198,6 +200,10 @@ select:-webkit-autofill:focus {
  border: none;
  font-size: 15px;
  padding: 10px 10px;
+  font-weight: bold;
+  display: inline-block;
+  width: 170px;
+  color: $text-color;

  &.active {
    background: darken($tight-form-bg, 5%);
@ -207,11 +213,6 @@ select:-webkit-autofill:focus {
  &:focus {
    outline: 0;
  }
-
-  font-weight: bold;
-  display: inline-block;
-  width: 170px;
-  color: $text-color;
 }

 .password-strength {
@ -222,10 +223,12 @@ select:-webkit-autofill:focus {
  padding-top: 3px;
  color: darken($text-color, 20%);
  border-top: 3px solid $red;
+
  &.password-strength-ok {
    width: 40%;
    border-top: 3px solid lighten($yellow, 10%);
  }
+
  &.password-strength-good {
    width: 100%;
    border-top: 3px solid lighten($green, 10%);
@ -252,6 +255,7 @@ select:-webkit-autofill:focus {
 .password-recovery {
  background: $tight-form-bg;
  padding: 10px;
+
  a {
    color: $gray-2;
  }
--- a/public/sass/pages/_plugins.scss
+++ b/public/sass/pages/_plugins.scss
@ -3,9 +3,11 @@
  font-size: $font-size-sm;
  position: relative;
  top: 1.2rem;
+
  &:hover {
    color: $link-hover-color;
  }
+
  img {
    vertical-align: top;
  }
@ -18,12 +20,12 @@
 }

 .plugin-info-list-item {
-  img {
-    width: 16px;
-  }
-
  white-space: nowrap;
  max-width: $page-sidebar-width;
  text-overflow: ellipsis;
  overflow: hidden;
+
+  img {
+    width: 16px;
+  }
 }
--- a/public/sass/utils/_validation.scss
+++ b/public/sass/utils/_validation.scss
@ -1,6 +1,3 @@
-input[type='text'].ng-dirty.ng-invalid {
-}
-
 input.validation-error,
 input.ng-dirty.ng-invalid {
  box-shadow: inset 0 0px 5px $red;
--- a/scripts/grunt/options/sasslint.js
+++ b/scripts/grunt/options/sasslint.js
@ -4,10 +4,9 @@ module.exports = function(config) {
    options: {
      configFile: 'public/sass/.sass-lint.yml',
    },
-    // src: ['public/sass#<{(||)}>#*'],
-    target: [
-      'public/sass/*.scss',
-      'public/sass/components/*.scss',
-    ]
+    src: [
+      'public/sass/**/*.scss',
+      'packages/**/*.scss',
+    ],
  };
 };