build(stylelint): Updated to use stylelint

mlaursen · Nov 2, 2021 · 22d1598 · 22d1598
1 parent 6159e16
commit 22d1598
Show file tree

Hide file tree

Showing 37 changed files with 499 additions and 141 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,113 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended",
+    "stylelint-config-standard-scss"
+  ],
+  "plugins": ["stylelint-order", "stylelint-scss"],
+  "rules": {
+    "no-descending-specificity": null,
+    "at-rule-empty-line-before": null,
+    "block-closing-brace-newline-after": null,
+    "block-closing-brace-newline-before": null,
+    "declaration-colon-newline-after": null,
+    "function-parentheses-newline-inside": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      { "ignorePseudoClasses": ["global", "local"] }
+    ],
+    "value-list-comma-newline-after": null,
+    "indentation": null,
+    "function-calc-no-unspaced-operator": null,
+    "declaration-no-important": true,
+    "at-rule-disallowed-list": ["debug"],
+    "at-rule-no-unknown": null,
+    "at-rule-no-vendor-prefix": true,
+    "block-no-empty": true,
+    "block-opening-brace-space-before": null,
+    "max-empty-lines": null,
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-named": "never",
+    "color-no-invalid-hex": true,
+    "declaration-property-value-disallowed-list": {
+      "border": ["none"],
+      "border-top": ["none"],
+      "border-right": ["none"],
+      "border-bottom": ["none"],
+      "border-left": ["none"]
+    },
+    "length-zero-no-unit": null,
+    "max-nesting-depth": [
+      3,
+      {
+        "ignore": ["pseudo-classes"],
+        "ignoreAtRules": ["each", "media", "supports", "include"]
+      }
+    ],
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-parentheses-space-inside": "never",
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+    "order/order": [
+      [
+        "custom-properties",
+        "dollar-variables",
+        {
+          "type": "at-rule",
+          "name": "extend"
+        },
+        {
+          "type": "at-rule",
+          "name": "include",
+          "hasBlock": false
+        },
+        {
+          "type": "at-rule",
+          "name": "include",
+          "hasBlock": true
+        },
+        "declarations",
+        "rules"
+      ]
+    ],
+    "order/properties-alphabetical-order": true,
+    "property-no-unknown": true,
+    "property-no-vendor-prefix": true,
+    "scss/at-extend-no-missing-placeholder": true,
+    "scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/at-import-no-partial-leading-underscore": true,
+    "scss/at-import-partial-extension-blacklist": ["scss"],
+    "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/at-rule-no-unknown": true,
+    "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/selector-no-redundant-nesting-selector": true,
+    "scss/comment-no-empty": null,
+    "scss/at-if-no-null": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/operator-no-newline-after": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "selector-class-pattern": null,
+    "selector-max-compound-selectors": 8,
+    "selector-max-id": 0,
+    "selector-no-qualifying-type": [
+      true,
+      {
+        "ignore": ["attribute"]
+      }
+    ],
+    "alpha-value-notation": null,
+    "selector-no-vendor-prefix": true,
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-no-unknown": true,
+    "shorthand-property-no-redundant-values": true,
+    "string-quotes": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-invalid-position-at-import-rule": null,
+    "color-function-notation": null,
+    "max-line-length": null,
+    "value-no-vendor-prefix": true
+  }
+}
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "build": "npm-run-all styles combine-styles build-ejs build-cjs build-var",
     "typecheck": "tsc -p tsconfig.check.json",
     "lint-scripts": "eslint \"packages/*/src/**/*.{ts,tsx,js,jsx}\"",
-    "lint": "npm-run-all lint-scripts typecheck",
+    "lint-styles": "stylelint \"packages/*/src/**/*.scss\"",
+    "lint": "npm-run-all lint-scripts lint-styles typecheck",
     "test": "jest",
     "format": "prettier --write \"**/*.{ts,tsx,scss,js,jsx,md,yml,json}\"",
     "clean": "dev-utils clean",
@@ -84,6 +85,12 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.2",
+    "stylelint": "^14.0.1",
+    "stylelint-config-recommended": "^6.0.0",
+    "stylelint-config-standard": "^23.0.0",
+    "stylelint-config-standard-scss": "^2.0.0",
+    "stylelint-order": "^5.0.0",
+    "stylelint-scss": "^4.0.0",
     "ts-jest": "^27.0.7",
     "typescript": "^4.4.4"
   },

diff --git a/packages/app-bar/src/_mixins.scss b/packages/app-bar/src/_mixins.scss
@@ -75,6 +75,8 @@
 ///   </div>
 ///
 @mixin rmd-app-bar-fixed {
+  $positions: top right bottom left;
+
   &--fixed {
     @include rmd-theme-update-var(
       surface,
@@ -91,7 +93,6 @@
     @include rmd-elevation($rmd-app-bar-fixed-elevation);
   }
 
-  $positions: top right bottom left;
   @each $position in $positions {
     &--#{$position} {
       #{$position}: 0;
@@ -190,6 +191,7 @@
       margin-right: $rmd-app-bar-title-nav-margin,
     )
   );
+
   flex-shrink: 0;
 
   &--inherit {
@@ -384,5 +386,6 @@
     }
   }
 
+  // stylelint-disable order/order
   @include rmd-app-bar-offsets;
 }
diff --git a/packages/avatar/src/_mixins.scss b/packages/avatar/src/_mixins.scss
@@ -110,5 +110,6 @@
     }
   }
 
+  // stylelint-disable order/order
   @include rmd-avatar-colors;
 }
diff --git a/packages/card/src/_mixins.scss b/packages/card/src/_mixins.scss
@@ -63,6 +63,8 @@
     text-secondary-on-background,
     rmd-card-theme-var(secondary-color)
   );
+  @include rmd-card-theme(background-color);
+  @include rmd-card-theme(color);
   @include rmd-utils-mouse-only {
     &--raiseable {
       // Note: Only worthwhile with the `--shadowed` class
@@ -73,8 +75,6 @@
       );
     }
   }
-  @include rmd-card-theme(background-color);
-  @include rmd-card-theme(color);
 
   border-radius: $rmd-card-border-radius;
   display: inline-block;

diff --git a/packages/chip/src/_mixins.scss b/packages/chip/src/_mixins.scss
@@ -86,6 +86,7 @@
     @include rmd-states-theme-update-var(hover-color, transparent);
 
     &:hover {
+      // stylelint-disable declaration-no-important
       // because the rmd-states-surface mixin uses
       // `:not(:disabled):not([aria-disabled='true'])`, have to use important or
       // an even more specific selector
@@ -135,31 +136,28 @@
   }
 
   &--leading-icon {
+    @include rmd-chip-theme(padding-left, small-spacing);
     @include rmd-utils-rtl {
       @include rmd-chip-theme(padding-left, large-spacing);
       @include rmd-chip-theme(padding-right, small-spacing);
     }
-
-    @include rmd-chip-theme(padding-left, small-spacing);
   }
 
   &--trailing-icon {
+    @include rmd-chip-theme(padding-right, medium-spacing);
     @include rmd-utils-rtl {
       @include rmd-chip-theme(padding-left, medium-spacing);
       @include rmd-chip-theme(padding-right, large-spacing);
     }
-
-    @include rmd-chip-theme(padding-right, medium-spacing);
   }
 
   &--surrounded {
+    @include rmd-chip-theme(padding-left, small-spacing);
+    @include rmd-chip-theme(padding-right, medium-spacing);
     @include rmd-utils-rtl {
       @include rmd-chip-theme(padding-left, medium-spacing);
       @include rmd-chip-theme(padding-right, small-spacing);
     }
-
-    @include rmd-chip-theme(padding-left, small-spacing);
-    @include rmd-chip-theme(padding-right, medium-spacing);
   }
 
   &__content {

diff --git a/packages/documentation/src/components/DemoSandbox/CodePreview.module.scss b/packages/documentation/src/components/DemoSandbox/CodePreview.module.scss
@@ -16,11 +16,10 @@
 }
 
 .offset {
+  @include rmd-sheet-theme(margin-left, static-width);
   @include rmd-utils-rtl {
     @include rmd-sheet-theme(margin-right, static-width);
 
     margin-left: auto;
   }
-
-  @include rmd-sheet-theme(margin-left, static-width);
 }
diff --git a/packages/documentation/src/components/DemoSandbox/SandboxNavigation.module.scss b/packages/documentation/src/components/DemoSandbox/SandboxNavigation.module.scss
@@ -6,6 +6,8 @@
 }
 
 .breadcrumbs {
+  @include rmd-theme(color, text-secondary-on-dark);
+  @include rmd-typography(subtitle-2);
   @include rmd-utils-rtl-auto(margin-left, $rmd-app-bar-keyline);
   @include rmd-utils-phone-media {
     @include rmd-utils-rtl-auto(margin-left, $rmd-app-bar-title-keyline);
@@ -14,8 +16,6 @@
       100% - #{$rmd-app-bar-title-keyline + $rmd-app-bar-keyline}
     );
   }
-  @include rmd-theme(color, text-secondary-on-dark);
-  @include rmd-typography(subtitle-2);
 
   bottom: 0.5rem;
   font-family: 'Source Code Pro', Consolas, Monaco, monospace;

diff --git a/packages/documentation/src/components/Demos/AppBar/AnimatingAppBar.module.scss b/packages/documentation/src/components/Demos/AppBar/AnimatingAppBar.module.scss
@@ -25,14 +25,12 @@
 }
 
 .header {
+  $width: 20 * 16; // 20rem
+  $height: (3.5 * 16) + 96; // app-bar-height (3.5rem) + 96 for custom offset
+
   @include rmd-button-theme-update-var(color, $rmd-white-base);
   @include rmd-theme(color, $rmd-white-base);
 
-  // 20rem
-  $width: 20 * 16;
-  // app-bar-height (3.5rem) + 96 for custom offset
-  $height: (3.5 * 16) + 96;
-
   background-image: url(#{'https://picsum.photos/#{$width}/#{$height}?image=811'});
   height: auto;
   padding-bottom: var(--offset);

diff --git a/packages/documentation/src/components/Demos/AppBar/FixedWithOffset.module.scss b/packages/documentation/src/components/Demos/AppBar/FixedWithOffset.module.scss
@@ -29,14 +29,15 @@
   }
 }
 
+// just a reminder that you don't need to use the `rmd-PACKAGE-theme-var` stuff if
+// you will have mostly static variables. You can instead use the corresponding
+// SCSS variable instead. I'm just using them since the documentation site can be
+// fully configured
+$offset: $rmd-app-bar-title-keyline + $rmd-app-bar-lr-margin * 2;
+
 .title {
   @include rmd-typography-text-overflow-ellipsis;
 
-  // just a reminder that you don't need to use the `rmd-PACKAGE-theme-var` stuff if
-  // you will have mostly static variables. You can instead use the corresponding
-  // SCSS variable instead. I'm just using them since the documentation site can be
-  // fully configured
-  $offset: $rmd-app-bar-title-keyline + $rmd-app-bar-lr-margin * 2;
   width: calc(100% - #{$offset} - #{rmd-button-theme-var(icon-size)} * 2);
 }
 

diff --git a/packages/documentation/src/components/Demos/AutoComplete/HighlightMatches.module.scss b/packages/documentation/src/components/Demos/AutoComplete/HighlightMatches.module.scss
@@ -1,3 +1,4 @@
+// stylelint-disable declaration-no-important
 @use 'react-md' as *;
 
 // all the importants are really just required to override the useFixedPositioning styles

diff --git a/packages/documentation/src/components/Demos/Chip/ActionChips/Blind.module.scss b/packages/documentation/src/components/Demos/Chip/ActionChips/Blind.module.scss
@@ -5,6 +5,7 @@ $blind-margin: 2px;
 $blind-margin-extra: 8px;
 $blind-rotation: 12deg;
 $blind-rotation-extra: 24deg;
+$blind-transition-duration: 2s;
 
 .blind {
   @include rmd-elevation(8);
@@ -19,9 +20,9 @@ $blind-rotation-extra: 24deg;
 
 .animate {
   @include rmd-transition(standard);
-  $duration: 2s;
 
-  transition: margin-bottom $duration, transform $duration;
+  transition: margin-bottom $blind-transition-duration,
+    transform $blind-transition-duration;
 }
 
 .enter {

diff --git a/packages/documentation/src/components/Demos/Chip/InputChips/To.module.scss b/packages/documentation/src/components/Demos/Chip/InputChips/To.module.scss
@@ -1,3 +1,4 @@
+// stylelint-disable declaration-no-important
 @use 'react-md' as *;
 
 $spacing: 0.5rem;

diff --git a/packages/documentation/src/components/Demos/Utils/Grid.module.scss b/packages/documentation/src/components/Demos/Utils/Grid.module.scss
@@ -1,15 +1,15 @@
 @use 'react-md' as *;
 
 .grid {
+  @include rmd-utils-optional-css-modules($rmd-theme-dark-class, true) {
+    background-color: $rmd-theme-dark-background;
+  }
+
   background-color: $rmd-theme-light-background;
 
   + .grid {
     margin-top: 1rem;
   }
-
-  @include rmd-utils-optional-css-modules($rmd-theme-dark-class, true) {
-    background-color: $rmd-theme-dark-background;
-  }
 }
 
 .item {

diff --git a/packages/documentation/src/components/Home/JumpStart.module.scss b/packages/documentation/src/components/Home/JumpStart.module.scss
@@ -2,6 +2,5 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-
   padding: 0 1rem;
 }
diff --git a/packages/documentation/src/components/Phone/StatusBar.module.scss b/packages/documentation/src/components/Phone/StatusBar.module.scss
@@ -2,8 +2,8 @@
 
 .container {
   @include rmd-app-bar-theme-update-var(dense-height, rmd-icon-theme-var(size));
-  background-color: rgba($rmd-black-base, 0.12);
 
+  background-color: rgba($rmd-black-base, 0.12);
   width: 100%;
 }
 

diff --git a/packages/documentation/src/components/TableOfContents/TableOfContents.module.scss b/packages/documentation/src/components/TableOfContents/TableOfContents.module.scss
@@ -5,13 +5,13 @@ $toc-width: 15rem;
 $toc-z-index: 9;
 
 .dialog {
+  @include rmd-elevation(2);
+  @include rmd-theme-dark-elevation(2, true);
   @include rmd-utils-rtl {
     left: $page-margin;
     right: auto;
     transform-origin: 2% ($rmd-icon-size * 0.5);
   }
-  @include rmd-elevation(2);
-  @include rmd-theme-dark-elevation(2, true);
 
   max-height: calc(100% - #{$rmd-app-bar-height + $page-margin + $page-margin});
   position: fixed;