feat(lint): Add style lint for scss linting

nrwl · Apr 9, 2019 · 6521299 · 6521299
1 parent 54862d6
commit 6521299
Show file tree

Hide file tree

Showing 24 changed files with 841 additions and 87 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,12 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+      "selector-type-no-unknown": null,
+      "at-rule-no-unknown": null,
+      "no-descending-specificity": null,
+      "font-family-no-missing-generic-family-keyword": null,
+      "value-list-comma-newline-after": null,
+      "indentation": null,
+      "declaration-colon-newline-after": null
+  }
+}
diff --git a/apps/angular-console/src/styles.scss b/apps/angular-console/src/styles.scss
@@ -8,9 +8,7 @@ $theme: mat-light-theme($primary, $accent, $warn);
 
 $custom-typography: mat-typography-config(
   $font-family:
-    "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-  'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif,
-  Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"
+    "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"
 );
 
 @include mat-core($custom-typography);

diff --git a/libs/feature-action-bar/src/lib/action-bar.component.scss b/libs/feature-action-bar/src/lib/action-bar.component.scss
@@ -2,24 +2,15 @@
   height: 52px;
 }
 
-mat-list {
-  padding: 0 !important;
-}
-
 .action-bar-container {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
     0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  bottom: 0;
-  left: 0;
-  right: 0;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  position: absolute;
   overflow: hidden;
   background: white;
   z-index: 10;
@@ -51,7 +42,7 @@ mat-list {
 }
 
 mat-list {
-  padding: 0;
+  padding: 0 !important;
 
   mat-list-item {
     height: 52px !important;
@@ -73,14 +64,21 @@ mat-list {
 
     .task-avatar {
       line-height: 40px;
-
       text-align: center;
       color: white;
       position: relative;
       background: rgba(0, 0, 0, 0.54);
 
       &:hover:not(.freshly-toggled) {
         background: rgba(0, 0, 0, 0.87);
+
+        .task-status {
+          opacity: 0;
+        }
+
+        .process-action {
+          opacity: 1;
+        }
       }
 
       .process-action mat-icon {
@@ -117,16 +115,6 @@ mat-list {
         }
       }
 
-      &:hover:not(.freshly-toggled) {
-        .task-status {
-          opacity: 0;
-        }
-
-        .process-action {
-          opacity: 1;
-        }
-      }
-
       .process-action {
         position: absolute;
         top: 0;
@@ -164,14 +152,15 @@ mat-list {
           color: rgba(0, 0, 0, 0.87);
         }
       }
+
       mat-icon {
         transition: color 0.15s ease-in-out;
         color: rgba(0, 0, 0, 0.54);
       }
     }
 
     .workspace-name {
-      color: #00000099;
+      color: #0009;
     }
 
     .second-line {

diff --git a/libs/feature-extensions/src/lib/extensions/extensions.component.scss b/libs/feature-extensions/src/lib/extensions/extensions.component.scss
diff --git a/libs/feature-extensions/src/lib/extensions/extensions.component.ts b/libs/feature-extensions/src/lib/extensions/extensions.component.ts
@@ -26,8 +26,7 @@ export interface ExtensionGroup {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'angular-console-extensions',
-  templateUrl: './extensions.component.html',
-  styleUrls: ['./extensions.component.scss']
+  templateUrl: './extensions.component.html'
 })
 export class ExtensionsComponent {
   private readonly extensions$: Observable<

diff --git a/libs/feature-generate/src/lib/schematics/schematics.component.scss b/libs/feature-generate/src/lib/schematics/schematics.component.scss
diff --git a/libs/feature-generate/src/lib/schematics/schematics.component.ts b/libs/feature-generate/src/lib/schematics/schematics.component.ts
@@ -22,8 +22,7 @@ interface SchematicId {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'angular-console-generate',
-  templateUrl: './schematics.component.html',
-  styleUrls: ['./schematics.component.scss']
+  templateUrl: './schematics.component.html'
 })
 export class SchematicsComponent {
   private readonly schematicCollections$: Observable<

diff --git a/libs/feature-install-node-js/src/lib/install-node-js.component.scss b/libs/feature-install-node-js/src/lib/install-node-js.component.scss
@@ -4,6 +4,8 @@
   mat-card-content {
     height: 120px;
     width: 680px;
+    padding-left: 36px;
+    padding-right: 36px;
 
     mat-progress-bar {
       padding-top: 24px;
@@ -25,7 +27,7 @@
   }
 
   .code-image-container {
-    background-color: #333333;
+    background-color: #333;
     padding: 48px;
   }
 
@@ -54,9 +56,4 @@
     color: white;
     margin-right: 8px;
   }
-
-  mat-card-content {
-    padding-left: 36px;
-    padding-right: 36px;
-  }
 }
diff --git a/libs/feature-run/src/lib/targets/targets.component.scss b/libs/feature-run/src/lib/targets/targets.component.scss
diff --git a/libs/feature-run/src/lib/targets/targets.component.ts b/libs/feature-run/src/lib/targets/targets.component.ts
@@ -21,8 +21,7 @@ interface Target {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'angular-console-targets',
-  templateUrl: './targets.component.html',
-  styleUrls: ['./targets.component.scss']
+  templateUrl: './targets.component.html'
 })
 export class TargetsComponent {
   private readonly projectsAndNpmScripts$: Observable<

diff --git a/libs/feature-workspaces/src/lib/new-workspace/new-workspace.component.scss b/libs/feature-workspaces/src/lib/new-workspace/new-workspace.component.scss
@@ -9,6 +9,7 @@ angular-console-new-workspace {
   }
 
   $selectedBackgroundColor: #dcdcdc;
+
   .selected-schematic {
     background: $selectedBackgroundColor !important;
   }

diff --git a/libs/feature-workspaces/src/lib/projects/projects.component.scss b/libs/feature-workspaces/src/lib/projects/projects.component.scss
@@ -1,17 +1,3 @@
-.project-name {
-  font-size: 20px;
-  font-weight: 500;
-  letter-spacing: 0.005em;
-}
-
-.project-root {
-  font-weight: 400;
-  letter-spacing: 0.01em;
-  font-size: 14px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.54);
-}
-
 mat-list-item mat-icon {
   cursor: pointer;
   color: rgb(128, 128, 128);

diff --git a/libs/feature-workspaces/src/lib/workspace/workspace.component.scss b/libs/feature-workspaces/src/lib/workspace/workspace.component.scss
@@ -34,12 +34,13 @@ angular-console-workspace {
           width: 32px;
           line-height: 32px;
         }
-        margin: 6px 4px;
 
+        margin: 6px 4px;
         transition: all 0.3s ease-in-out;
 
         &.active {
           pointer-events: none;
+
           .route-icon {
             color: rgb(67, 118, 197) !important;
           }

diff --git a/libs/feature-workspaces/src/lib/workspaces/workspaces.component.scss b/libs/feature-workspaces/src/lib/workspaces/workspaces.component.scss
@@ -65,12 +65,10 @@ mat-nav-list {
   position: fixed;
   bottom: 0;
   right: 0;
-
   padding: 24px;
   padding-left: 48px;
   padding-top: 48px;
   z-index: 2;
-
   transition: all 0.3s ease-in-out;
 
   &.action-bar-showing {
@@ -113,6 +111,7 @@ mat-nav-list {
         transform: rotate(90deg);
       }
     }
+
     .import-workspace-fab {
       opacity: 1;
       transform: scale(1);

diff --git a/libs/ui/src/lib/build-status/build-status.component.scss b/libs/ui/src/lib/build-status/build-status.component.scss
@@ -1,5 +1,6 @@
 @import '~@angular/material/theming';
 @import '../../../../ui/src/lib/variables';
+
 @include mat-core();
 
 $hint-palette: mat-palette($mat-gray, 500);
@@ -94,6 +95,7 @@ h3 {
   .title {
     font-size: 18px;
   }
+
   .content {
     font-size: 24px;
 
@@ -162,6 +164,7 @@ h3 {
     .title {
       font-size: 14px;
     }
+
     .content {
       font-size: 20px;
     }

diff --git a/libs/ui/src/lib/command-output/command-output.component.scss b/libs/ui/src/lib/command-output/command-output.component.scss
@@ -1,4 +1,5 @@
 @import '~@angular/material/theming';
+
 @include mat-core();
 
 $empty-palette: mat-palette($mat-grey, 500);

diff --git a/libs/ui/src/lib/flags/flags.component.scss b/libs/ui/src/lib/flags/flags.component.scss
@@ -2,10 +2,6 @@ $border-radius: 24px;
 $input-padding-horizontal: 24px;
 
 ui-flags {
-  mat-expansion-panel {
-    overflow: hidden !important;
-  }
-
   .mat-expansion-panel-body {
     padding-right: 0 !important;
   }
@@ -22,15 +18,14 @@ ui-flags {
     padding-right: 24px;
 
     .headline {
-      font-size: 24px;
-      font-weight: 400;
       font-size: 20px;
       font-weight: 500;
       color: rgba(0, 0, 0, 0.87) !important;
     }
   }
 
   mat-expansion-panel {
+    overflow: hidden !important;
     box-shadow: none !important;
 
     .mat-expanded {

diff --git a/libs/ui/src/lib/task-runner/task-runner.component.scss b/libs/ui/src/lib/task-runner/task-runner.component.scss
@@ -1,4 +1,5 @@
 @import '~@angular/material/theming';
+
 @include mat-core();
 
 $runner-container: mat-palette($mat-grey, 100);
@@ -10,7 +11,6 @@ $window-chrome-height: 45px;
 
 .outer-container {
   height: calc(100vh - 52px);
-  overflow: hidden;
   width: 100%;
   overflow: hidden;
   background-color: rgb(240, 240, 240);

diff --git a/libs/ui/src/lib/task-selector/task-selector.component.scss b/libs/ui/src/lib/task-selector/task-selector.component.scss
@@ -20,7 +20,6 @@
   z-index: 3;
   overflow-x: hidden;
   background-color: rgb(245, 245, 245);
-
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }

diff --git a/libs/ui/src/lib/test-status/test-status.component.scss b/libs/ui/src/lib/test-status/test-status.component.scss
@@ -1,4 +1,5 @@
 @import '~@angular/material/theming';
+
 @include mat-core();
 
 $gray-palette: mat-palette($mat-gray, 200);

diff --git a/libs/ui/src/lib/variables.scss b/libs/ui/src/lib/variables.scss
@@ -1,4 +1,5 @@
 @import '~@angular/material/theming';
+
 @include mat-core();
 
 $grey-lightest: mat-palette($mat-grey, 50);

diff --git a/package-scripts.js b/package-scripts.js
@@ -210,9 +210,15 @@ module.exports = {
     lint: {
       default: nps.concurrent({
         nxLint: 'nx lint',
-        tsLint: 'npx tslint -p tsconfig.json -e **/generated/* -c tslint.json'
+        tsLint: 'npx tslint -p tsconfig.json -e **/generated/* -c tslint.json',
+        stylelint: 'stylelint "{apps,libs}/**/*.scss" --config .stylelintrc'
       }),
-      fix: 'npx tslint -p tsconfig.json -e **/generated/* -c tslint.json --fix'
+      fix: nps.concurrent({
+        tslint:
+          'npx tslint -p tsconfig.json -e **/generated/* -c tslint.json --fix',
+        stylelint:
+          'stylelint "{apps,libs}/**/*.scss" --config .stylelintrc --fix'
+      })
     },
     build: {
       default: 'nx affected:build --all --parallel',

diff --git a/package.json b/package.json
@@ -82,6 +82,8 @@
     "node-pty-prebuilt": "0.7.6",
     "semver": "5.6.0",
     "source-map-explorer": "^1.7.0",
+    "stylelint": "^9.10.1",
+    "stylelint-config-standard": "^18.2.0",
     "tmp": "^0.1.0"
   },
   "devDependencies": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ angular-console-new-workspace { @@
       }
       $selectedBackgroundColor: #dcdcdc;
       .selected-schematic {
         background: $selectedBackgroundColor !important;
       }
@@ Expand Down @@