Stylelint fixes

Author: martinRenou

.stylelintrc.yaml

@@ -0,0 +1,47 @@
+$schema: https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/stylelintrc.json
+
+extends:
+  - stylelint-config-recommended
+  - stylelint-config-standard
+  - stylelint-prettier/recommended
+
+plugins:
+  - stylelint-csstree-validator
+
+rules:
+  import-notation: null
+  # TODO: fix all of these rules violated in stylelint-config-recommended
+  no-descending-specificity: null
+  # this fixer is incompatible with the copyright headers
+  comment-whitespace-inside: null
+  # these fixers assume use of `autoprefixer`: we _don't_ use any CSS preprocessors
+  property-no-vendor-prefix: null
+  selector-no-vendor-prefix: null
+  value-no-vendor-prefix: null
+  # these fixers doesn't work well with variables
+  alpha-value-notation: null
+  color-function-notation: null
+  # TODO: evaluate these unfixable rules violated in stylelint-config-standard
+  custom-property-pattern: null
+  declaration-block-no-redundant-longhand-properties: null
+  function-linear-gradient-no-nonstandard-direction: null
+  function-url-quotes: null
+  keyframes-name-pattern: null
+  number-max-precision: null
+  selector-class-pattern: null
+  selector-id-pattern: null
+  selector-pseudo-class-no-unknown: null
+  selector-pseudo-element-no-unknown: null
+  selector-not-notation: null
+  # disallow use of more than one bare HTML tag like `div span` to avoid performance regression,
+  # while allowing compounded HTML tags like `button.jp-Button`
+  selector-max-type:
+    - 1
+    - ignore: "compounded"
+  # matching complex selectors is expensive
+  selector-max-class: 4
+  # TODO: decrease max-compound to 3
+  selector-max-compound-selectors: 4
+  # TODO: decrease to 0
+  selector-max-universal: 1
+  csstree/validator: true

package.json

@@ -50,7 +50,7 @@
     "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
     "prettier:check": "jlpm prettier:base --check",
     "stylelint": "jlpm stylelint:check --fix",
-    "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+    "stylelint:check": "stylelint --config .stylelintrc.yaml --cache \"style/**/*.css\"",
     "test": "jlpm run test:firefox",
     "test:chrome": "karma start --browsers=Chrome tests/karma.conf.js",
     "test:debug": "karma start --browsers=Chrome --singleRun=false --debug=true tests/karma.conf.js",

style/base.css

@@ -1,28 +1,30 @@
 .jupyterlab-sidecar {
-    background: var(--jp-layout-color0);
-    display: flex;
-  }
+  background: var(--jp-layout-color0);
+  display: flex;
+}
 
-  .jupyterlab-sidecar .jp-OutputPrompt.jp-OutputArea-prompt {
-    display: none;
-  }
+.jupyterlab-sidecar .jp-OutputPrompt.jp-OutputArea-prompt {
+  display: none;
+}
 
-  .jupyterlab-sidecar > .jp-OutputArea-child {
-    flex: 1;
-  }
+.jupyterlab-sidecar > .jp-OutputArea-child {
+  flex: 1;
+}
 
-  .jp-SideBar.jp-mod-right .p-TabBar-tabCloseIcon, .jp-SideBar.jp-mod-right .lm-TabBar-tabCloseIcon {
-    padding: 4px 0px 4px 4px;
-    background-size: 16px;
-    height: 16px;
-    width: 16px;
-    background-image: var(--jp-icon-close);
-    background-position: center;
-    background-repeat: no-repeat;
-    align-self: center;
-  }
+.jp-SideBar.jp-mod-right .p-TabBar-tabCloseIcon,
+.jp-SideBar.jp-mod-right .lm-TabBar-tabCloseIcon {
+  padding: 4px 0px 4px 4px;
+  background-size: 16px;
+  height: 16px;
+  width: 16px;
+  background-image: var(--jp-icon-close);
+  background-position: center;
+  background-repeat: no-repeat;
+  align-self: center;
+}
 
-  .jp-SideBar.jp-mod-right .p-TabBar-tabCloseIcon:hover, .jp-SideBar.jp-mod-right .lm-TabBar-tabCloseIcon:hover {
-    background-size: 16px;
-    background-image: var(--jp-icon-inverse-close-circle);
-  }
+.jp-SideBar.jp-mod-right .p-TabBar-tabCloseIcon:hover,
+.jp-SideBar.jp-mod-right .lm-TabBar-tabCloseIcon:hover {
+  background-size: 16px;
+  background-image: var(--jp-icon-inverse-close-circle);
+}