Use stylelint-prettier instead of stylelint formatting rules (firefox-devtools#8098)

Author: Florens Verschelde

.stylelintignore

@@ -1,55 +1,19 @@
 {
+  "plugins": ["stylelint-prettier"],
   "rules": {
-    "at-rule-semicolon-newline-after": "always",
-    "block-closing-brace-newline-after": "always",
-    "block-closing-brace-newline-before": "always-multi-line",
-    "block-closing-brace-space-before": "always-single-line",
     "block-no-empty": true,
-    "block-opening-brace-newline-after": "always-multi-line",
-    "block-opening-brace-space-after": "always-single-line",
-    "block-opening-brace-space-before": "always",
-    "color-hex-case": "lower",
     "color-hex-length": "long",
     "color-no-invalid-hex": true,
-    "declaration-bang-space-after": "never",
-    "declaration-bang-space-before": "always",
     "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-block-semicolon-space-after": "always-single-line",
-    "declaration-block-semicolon-space-before": "never",
     "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-colon-space-after": "always-single-line",
-    "declaration-colon-space-before": "never",
     "function-calc-no-unspaced-operator": true,
-    "function-comma-newline-after": "always-multi-line",
-    "function-comma-space-after": "always-single-line",
-    "function-comma-space-before": "never",
     "function-linear-gradient-no-nonstandard-direction": true,
-    "function-parentheses-newline-inside": "always-multi-line",
-    "function-parentheses-space-inside": "never-single-line",
     "function-whitespace-after": "always",
-    "max-empty-lines": 1,
-    "media-feature-colon-space-after": "always",
-    "media-feature-colon-space-before": "never",
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-range-operator-space-before": "always",
-    "media-query-list-comma-newline-after": "always-multi-line",
-    "media-query-list-comma-space-after": "always-single-line",
-    "media-query-list-comma-space-before": "never",
-    "media-feature-parentheses-space-inside": "never",
-    "no-eol-whitespace": true,
     "no-invalid-double-slash-comments": true,
     "no-missing-end-of-source-newline": true,
-    "number-leading-zero": "always",
-    "number-no-trailing-zeros": true,
-    "selector-combinator-space-after": "always",
-    "selector-list-comma-space-before": "never",
+    "prettier/prettier": true,
     "selector-pseudo-element-colon-notation": "double",
     "selector-type-case": "lower",
-    "string-no-newline": true,
-    "value-list-comma-newline-after": "always-multi-line",
-    "value-list-comma-space-after": "always-single-line",
-    "value-list-comma-space-before": "never",
-  },
+    "string-no-newline": true
+  }
 }

.stylelintrc

@@ -14,6 +14,7 @@ const args = [
   "*.js",
   "*.json",
   "packages/**/src/*.js",
+  "packages/**/src/*.css",
   "src/*.js",
   "src/*/*.js",
   "src/components/**/*.css",

bin/prettier.js

@@ -23,7 +23,7 @@
     "license-check": "devtools-license-check",
     "links": "ls -l node_modules/ | grep ^l || echo 'no linked packages'",
     "lint": "run-p lint:css lint:js lint:jsx-a11y lint:md",
-    "lint:css": "stylelint \"src/components/**/*.css\"",
+    "lint:css": "stylelint \"src/components/**/*.css\" \"packages/*/src/**/*.css\"",
     "lint:js": "eslint *.js \"src/**/*.js\" \"packages/*/src/**/*.js\" --fix",
     "lint:jsx-a11y": "eslint *.js \"src/**/*.js\" \"packages/*/src/**/*.js\" --plugin=jsx-a11y --config=.eslintrc.jsx-a11y",
     "lint:md": "remark -u devtools-linters/markdown/preset -qf *.md src",
@@ -162,6 +162,7 @@
     "rimraf": "^2.6.1",
     "single-line-log": "^1.1.2",
     "stylelint": "^9.0.0",
+    "stylelint-prettier": "^1.0.6",
     "webpack": "^3.5.5",
     "webpack-visualizer-plugin": "^0.1.11",
     "workerjs": "github:jasonLaster/workerjs#a2425aaeebacae7a7640e496a54c2a41962f3890"

package.json

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
- /* We can remove the outline since we do add our own focus style on nodes */
+/* We can remove the outline since we do add our own focus style on nodes */
 .tree:focus {
   outline: none;
 }
@@ -35,7 +35,7 @@
   display: inline-block;
   width: 12px;
   margin-inline-start: 5px;
-  border-inline-start: 1px solid #A2D1FF;
+  border-inline-start: 1px solid #a2d1ff;
   flex-shrink: 0;
 }
 
@@ -47,7 +47,7 @@
 /* For non expandable root nodes, we don't have .tree-indent elements, so we declare
    the margin on the start of the node */
 .tree-node[data-expandable="false"][aria-level="1"] {
-  padding-inline-start: 15px
+  padding-inline-start: 15px;
 }
 
 .tree .tree-node[data-expandable="true"] {

packages/devtools-components/src/tree.css

@@ -27,7 +27,7 @@ main {
   padding: 0.5rem;
 }
 
-.rep-input:before {
+.rep-input::before {
   content: "➜ ";
 }
 
@@ -48,7 +48,7 @@ main {
 }
 
 .rep-element[data-mode]::before {
-  content: attr(data-mode)":";
+  content: attr(data-mode) ":";
   background-color: var(--theme-toolbar-background);
   font-family: monospace;
   display: inline-block;
@@ -73,7 +73,7 @@ main {
 .packet header .copy-label {
   margin: 0 0.5em;
   padding-inline-start: 0.5em;
-  border-inline-start: 1px solid rgba(0,0,0, 0.2);
+  border-inline-start: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .packet header.packet-expanded::before {

packages/devtools-reps/src/launchpad/components/Console.css

@@ -27,7 +27,7 @@
   color: var(--theme-body-color);
 }
 
-.tree.object-inspector .block .object-label:before {
+.tree.object-inspector .block .object-label::before {
   content: "☲ ";
   font-size: 1.1em;
 }

packages/devtools-reps/src/object-inspector/components/ObjectInspector.css

@@ -288,7 +288,7 @@ button.invoke-getter {
   background-color: var(--theme-icon-color);
   height: 10px;
   vertical-align: middle;
-  border:none;
+  border: none;
 }
 
 .invoke-getter:hover {

packages/devtools-reps/src/reps/reps.css

@@ -48,6 +48,7 @@
 }
 
 .split-box.vert > .splitter {
+  /* prettier-ignore */
   min-width: calc(var(--devtools-splitter-inline-start-width) +
     var(--devtools-splitter-inline-end-width) + 1px);
 
@@ -61,6 +62,7 @@
 }
 
 .split-box.horz > .splitter {
+  /* prettier-ignore */
   min-height: calc(var(--devtools-splitter-top-width) +
     var(--devtools-splitter-bottom-width) + 1px);
   border-top-width: var(--devtools-splitter-top-width);

packages/devtools-splitter/src/SplitBox.css

@@ -19,7 +19,7 @@
   left: 0;
   right: 0;
   bottom: -1px;
-  border: solid 1px  var(--blue-50);
+  border: solid 1px var(--blue-50);
   pointer-events: none;
   opacity: 0;
   transition: opacity 150ms ease-out;

src/components/Editor/SearchBar.css

@@ -157,7 +157,8 @@
   width: 100%;
   height: 2px;
   background-color: var(--tab-line-color, transparent);
-  transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve);
+  transition: transform 250ms var(--animation-curve),
+    opacity 250ms var(--animation-curve);
   opacity: 0;
   transform: scaleX(0);
 }

src/components/PrimaryPanes/Sources.css

@@ -3,56 +3,56 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .event-listeners-content {
-	padding-top: 4px;
-	padding-bottom: 4px;
-	padding-inline-start: 14px;
-	padding-inline-end: 20px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-inline-start: 14px;
+  padding-inline-end: 20px;
 }
 
 .event-listeners-content ul {
-	padding: 0;
-	list-style-type: none;
+  padding: 0;
+  list-style-type: none;
 }
 
 .event-listener-group {
-	user-select: none;
+  user-select: none;
 }
 
 .event-listener-header {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .event-listener-expand {
-	border: none;
-	background: none;
-	padding: 4px 5px;
-	line-height: 12px;
+  border: none;
+  background: none;
+  padding: 4px 5px;
+  line-height: 12px;
 }
 
 .event-listener-expand:hover {
-	background: transparent;
+  background: transparent;
 }
 
 .event-listener-group input[type="checkbox"] {
-	margin: 0px;
-	margin-inline-end: 4px;
+  margin: 0px;
+  margin-inline-end: 4px;
 }
 
 .event-listener-label {
-	display: flex;
-	align-items: center;
-	padding-inline-start: 2px;
-	padding-inline-end: 10px;
+  display: flex;
+  align-items: center;
+  padding-inline-start: 2px;
+  padding-inline-end: 10px;
 }
 
 .event-listener-category {
-	padding: 3px 0px;
-	line-height: 14px;
+  padding: 3px 0px;
+  line-height: 14px;
 }
 
 .event-listeners-content .arrow {
-	margin-inline-end: 0;
+  margin-inline-end: 0;
 }
 
 html[dir="ltr"] .event-listeners-content .arrow.expanded {
@@ -64,19 +64,19 @@ html[dir="rtl"] .event-listeners-content .arrow.expanded {
 }
 
 .event-listener-event {
-	display: flex;
-	align-items: center;
-	margin-inline-start: 30px;
+  display: flex;
+  align-items: center;
+  margin-inline-start: 30px;
 }
 
 .event-listener-name {
-	line-height: 14px;
-	padding: 3px 0px;
+  line-height: 14px;
+  padding: 3px 0px;
 }
 
 .event-listener-event input {
-	margin-inline-end: 4px;
-	margin-inline-start: 0px;
-	margin-top: 0px;
-	margin-bottom: 0px;
+  margin-inline-end: 4px;
+  margin-inline-start: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
 }

src/components/SecondaryPanes/EventListeners.css

@@ -12540,6 +12540,13 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
+stylelint-prettier@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/stylelint-prettier/-/stylelint-prettier-1.0.6.tgz#479b76336751cb617c5beb7545d05a791f945e1e"
+  integrity sha512-XKlTyJHJYiyXs9JXRMt2FQxMJoBSjz4I6+4+/R3o8/ePof19v9naC4d0zsMKUJ88by81+qHfqXBLfmAalu46cg==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 stylelint@^9.0.0:
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.4.0.tgz#2f2b82ae9db53a06735ae0724f41b134fdb84a10"