Add Stylelint (#3736)

iterative · Apr 25, 2023 · 16dacc7 · 16dacc7
1 parent 3ea8f06
commit 16dacc7
Show file tree

Hide file tree

Showing 26 changed files with 548 additions and 149 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,6 +2,10 @@
   "search.exclude": {
     "extension/out": true
   },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.configFile": "./webview/.stylelintrc.js",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "prettier.configPath": ".prettierrc.json",

diff --git a/package.json b/package.json
@@ -61,8 +61,11 @@
     "lint-staged": "13.2.1",
     "npm-run-all": "4.1.5",
     "nyc": "15.1.0",
+    "postcss": "8.4.23",
     "prettier": "2.8.7",
     "prettier-config-standard": "5.0.0",
+    "stylelint": "15.5.0",
+    "stylelint-config-standard-scss": "8.0.0",
     "ts-node": "10.9.1",
     "turbo": "1.9.3",
     "typescript": "5.0.4"

diff --git a/turbo.json b/turbo.json
@@ -47,8 +47,12 @@
       "dependsOn": ["^lint:prettier"],
       "outputs": []
     },
+    "lint:css": {
+      "dependsOn": ["^lint:css"],
+      "outputs": []
+    },
     "lint": {
-      "dependsOn": ["lint:prettier", "lint:eslint", "lint:build"],
+      "dependsOn": ["lint:prettier", "lint:eslint", "lint:css", "lint:build"],
       "outputs": []
     },
     "dev": {

diff --git a/webview/.stylelintrc.js b/webview/.stylelintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  extends: 'stylelint-config-standard-scss',
+  rules: {
+    'max-nesting-depth': 2,
+    'selector-max-attribute': 2,
+    'selector-max-class': 2,
+    'selector-max-combinators': 3,
+    'selector-max-type': 2,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      { ignorePseudoClasses: ['global'] }
+    ],
+    'custom-property-pattern': null,
+    'selector-class-pattern': null,
+    'scss/percent-placeholder-pattern': null,
+    'scss/dollar-variable-empty-line-before': [
+      'always',
+      {
+        except: ['after-comment', 'after-dollar-variable']
+      }
+    ]
+  }
+}
diff --git a/webview/package.json b/webview/package.json
@@ -6,6 +6,7 @@
     "format": "prettier --write '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'",
     "lint:prettier": "prettier -c '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'",
     "lint:eslint": "eslint --cache '**/*.{js,ts,jsx,tsx}'",
+    "lint:css": "stylelint **/*.scss",
     "lint:build": "webpack --mode development",
     "dev": "webpack watch --mode development",
     "build": "webpack --mode production",

diff --git a/webview/src/experiments/components/table/body/branchDivider/styles.module.scss b/webview/src/experiments/components/table/body/branchDivider/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../shared/variables.scss';
+@import '../../../../../shared/variables';
 
 .branchName {
   padding: 0 20px 10px;

diff --git a/webview/src/experiments/components/table/body/commitsAndBranches/styles.module.scss b/webview/src/experiments/components/table/body/commitsAndBranches/styles.module.scss
@@ -14,13 +14,13 @@
   font-size: 0.6rem;
   cursor: pointer;
 
-  &:hover:not(:disabled) {
-    text-decoration: none;
-  }
-
   &:disabled {
     opacity: 0.5;
   }
+
+  &:hover:not(:disabled) {
+    text-decoration: none;
+  }
 }
 
 .separator::before {

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -1,11 +1,12 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable selector-max-class */
 // Variables
 
-@import '../../../shared/variables.scss';
-@import '../../../shared/mixins.scss';
+@import '../../../shared/variables';
+@import '../../../shared/mixins';
 
 $nested-row-padding: 1.35rem;
 $row-border: 1px solid $border-color;
-
 $edge-padding: 0.8rem;
 $cell-padding: 0.5rem;
 $workspace-row-edge-margin: $edge-padding - $cell-padding;
@@ -50,6 +51,7 @@ $badge-size: 0.85rem;
   align-items: center;
   width: 100%;
   height: 100%;
+
   &:hover {
     & .copyButton {
       display: block;
@@ -85,6 +87,10 @@ $badge-size: 0.85rem;
   text-overflow: ellipsis;
 }
 
+%noSelect {
+  user-select: none;
+}
+
 // Concrete selectors
 
 @keyframes spin {
@@ -93,12 +99,9 @@ $badge-size: 0.85rem;
   }
 }
 
-.noSelect {
-  user-select: none;
-}
-
 .isColumnResizing {
-  @extend .noSelect;
+  @extend %noSelect;
+
   cursor: col-resize;
 
   * {
@@ -148,7 +151,7 @@ $badge-size: 0.85rem;
 
 .experimentsTable.withExpColumnShadow .experimentsTr > *:first-child {
   &::after {
-    box-shadow: 3px 0px 3px $shadow;
+    box-shadow: 3px 0 3px $shadow;
   }
 
   > div::after {
@@ -161,13 +164,13 @@ $badge-size: 0.85rem;
   position: relative;
   border: none;
   background: none;
-  padding: 0;
   text-align: center;
   padding: 0.25rem;
   margin: 0.025rem;
   width: 1.5rem;
   height: 1.5rem;
   cursor: pointer;
+
   svg {
     fill: $icon-color;
   }
@@ -220,17 +223,18 @@ $badge-size: 0.85rem;
 
 .experimentsTh {
   height: auto;
-  background-color: $header-bg-color;
   font-size: 0.7rem;
   background-color: $header-bg-color;
 
   &::before {
     @extend %cellBorderLeft;
+
     background-color: $header-border-color;
   }
 
   .cellContents {
     @extend %truncateLeftChild;
+
     display: block;
 
     span[draggable='true'] {
@@ -297,9 +301,7 @@ $badge-size: 0.85rem;
 
 .dropTargetHeaderCell {
   background: $header-dnd-drop-background;
-  outline-width: 2px;
-  outline-style: dashed;
-  outline-color: $header-dnd-outline;
+  outline: $header-dnd-outline dashed 2px;
   outline-offset: -4px;
 
   .iconMenu ul[role='menu'] {
@@ -330,16 +332,17 @@ $badge-size: 0.85rem;
   ul[role='menu'] {
     background-color: $header-bg-color;
     padding-left: 2px;
-    margin: 0px 0px 0px 4px;
+    margin: 0 0 0 4px;
     border: none;
 
     button {
       width: 13px;
       height: 11px;
-      svg {
-        fill: currentColor;
-        transform: scale(0.7);
-      }
+    }
+
+    svg {
+      fill: currentcolor;
+      transform: scale(0.7);
     }
   }
 }
@@ -355,6 +358,7 @@ $badge-size: 0.85rem;
 
 .timestampHeader {
   @extend %headerCellPadding;
+
   overflow-x: hidden;
   text-overflow: ellipsis;
   text-align: left;
@@ -363,6 +367,7 @@ $badge-size: 0.85rem;
 
 .experimentHeader {
   @extend %headerCellPadding;
+
   padding-left: $cell-padding;
   text-align: left;
   direction: ltr;
@@ -373,8 +378,10 @@ $badge-size: 0.85rem;
 .headerCellText {
   @extend %truncateLeftParent;
   @extend %headerCellPadding;
+
   direction: rtl;
   opacity: 0.6;
+
   // to prevent extra dragLeave and dragEnter fired
   // should be on parent div, not span to work on text-overflow: ellipsis
   pointer-events: none;
@@ -490,13 +497,11 @@ $badge-size: 0.85rem;
     }
   }
 
-  .experimentGroup {
-    &:last-child .experimentsTr:last-child {
-      border-color: $row-bg-color;
+  .experimentGroup:last-child .experimentsTr:last-child {
+    border-color: $row-bg-color;
 
-      &.rowSelected {
-        border-color: $row-bg-selected-color;
-      }
+    &.rowSelected {
+      border-color: $row-bg-selected-color;
     }
   }
 }
@@ -545,6 +550,7 @@ $badge-size: 0.85rem;
 
 .innerCell {
   @extend %baseInnerCell;
+
   justify-content: flex-end;
 }
 
@@ -598,6 +604,7 @@ $badge-size: 0.85rem;
 
   .indicatorCount {
     z-index: 2;
+
     &[title='0'] {
       display: none;
     }
@@ -655,7 +662,7 @@ $badge-size: 0.85rem;
 
     .normalExperiment & {
       line-height: 0;
-      background: currentColor;
+      background: currentcolor;
       border-radius: 100%;
     }
 
@@ -673,8 +680,8 @@ $badge-size: 0.85rem;
       vertical-align: middle;
       border: 1.5px solid $checkbox-background;
       border-radius: 100%;
-      border-right: 1.5px solid currentColor;
-      border-top: 1.5px solid currentColor;
+      border-right: 1.5px solid currentcolor;
+      border-top: 1.5px solid currentcolor;
       animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
       background-color: $checkbox-background;
     }
@@ -706,6 +713,7 @@ $badge-size: 0.85rem;
 
 .expandedRowArrow {
   @extend %expandableRowArrow;
+
   transform: rotate(45deg);
   right: 1px;
   bottom: 2px;
@@ -717,6 +725,7 @@ $badge-size: 0.85rem;
 
 .contractedRowArrow {
   @extend %expandableRowArrow;
+
   transform: rotate(-45deg);
   right: 4px;
   bottom: 0;
@@ -731,7 +740,8 @@ $badge-size: 0.85rem;
 }
 
 .experimentCellText {
-  @extend .cellContents;
+  @extend %cellContentsBase;
+
   display: block;
   line-height: normal;
   direction: ltr;
@@ -806,18 +816,21 @@ $badge-size: 0.85rem;
 .timestampInnerCell {
   @extend %baseInnerCell;
   @extend %truncateLeftParent;
+
   line-height: normal;
   text-align: left;
   height: 32px;
 }
 
 .timestampDate {
   @extend %truncateLeftChild;
+
   font-size: 0.7em;
 }
 
 .timestampTime {
   @extend %truncateLeftChild;
+
   font-size: 0.9em;
 }
 
@@ -838,6 +851,7 @@ $badge-size: 0.85rem;
 
 .buttonAsLink {
   @extend %link;
+
   background: none;
   border: none;
   padding: 0;

diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss
@@ -1,6 +1,7 @@
-@import '../../../shared/variables.scss';
+@import '../../../shared/variables';
 
 $gap: 4px;
+
 .comparisonTableHeader {
   position: relative;
   z-index: 2;

diff --git a/webview/src/plots/components/ribbon/RibbonBlockTooltip.tsx b/webview/src/plots/components/ribbon/RibbonBlockTooltip.tsx
@@ -22,11 +22,11 @@ export const RibbonBlockTooltip: React.FC<{
           <ErrorTooltipContent error={errors.join('\n')} />
         </div>
       )}
-      <table className={styles.columnsTable}>
+      <table>
         <tbody>
           {firstThreeColumns.map(({ path, value, type }) => (
             <tr key={path}>
-              <td className={cx(styles[`${type}Key`])}>
+              <td className={cx(styles.tooltipColumn, styles[`${type}Key`])}>
                 <span className={styles.tooltipPathWrapper}>{path}</span>
               </td>
               <td>