From 1e8588a402191124456d53d24a140c74c0134146 Mon Sep 17 00:00:00 2001 From: Jason Laster Date: Sun, 18 Jun 2017 02:17:57 -0400 Subject: [PATCH] prettify css --- .stylelintrc | 1 - bin/prettier.js | 4 ++- src/components/Editor/Editor.css | 20 +++++++---- src/components/Editor/Tabs.css | 6 ++-- .../ProjectSearch/ProjectSearch.css | 1 - src/components/SecondaryPanes/Breakpoints.css | 3 +- .../SecondaryPanes/Frames/Frames.css | 9 ++--- .../SecondaryPanes/Frames/Group.css | 3 +- .../SecondaryPanes/Frames/WhyPaused.css | 1 - src/components/SecondaryPanes/Scopes.css | 1 - src/components/Sources.css | 3 +- src/components/shared/Accordion.css | 3 +- src/components/shared/Autocomplete.css | 1 - src/components/shared/BracketArrow.css | 3 +- src/components/shared/Button/PaneToggle.css | 15 +++----- src/components/shared/SearchInput.css | 10 ++---- src/components/shared/Svg.css | 30 +++------------- src/components/shared/previewFunction.css | 1 - src/components/shared/reps.css | 36 ++++++------------- src/components/variables.css | 6 ++-- src/utils/parser/tests/fixtures/var.js | 3 +- 21 files changed, 53 insertions(+), 107 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 3ff9742a31..8b8babdb37 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -47,7 +47,6 @@ "number-no-trailing-zeros": true, "selector-combinator-space-after": "always", "selector-combinator-space-before": "always", - "selector-list-comma-newline-after": "always", "selector-list-comma-space-before": "never", "selector-pseudo-element-colon-notation": "double", "selector-type-case": "lower", diff --git a/bin/prettier.js b/bin/prettier.js index 8ce28dba48..710f98b92e 100644 --- a/bin/prettier.js +++ b/bin/prettier.js @@ -14,6 +14,7 @@ const args = [ "*.js", "src/*.js", "src/*/*.js", + "src/components/**/*.css", "src/*/!(mochitest)**/*.js", "src/*/!(mochitest)*/**/*.js" ]; @@ -25,7 +26,8 @@ const prettierProc = spawn(prettierCmd, prettierArgs); prettierProc.stdout.on("data", data => console.log(`${data}`)); prettierProc.stderr.on("data", data => console.log(`stderr: ${data}`)); prettierProc.on("close", code => - console.log(`prettier exited with code ${code}`)); + console.log(`prettier exited with code ${code}`) +); prettierProc.on("error", error => { if (error.code == "ENOENT") { console.log(`Hmm, could not find the path ${cmd}.`); diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css index 3253fa50ff..19c7e9c2da 100644 --- a/src/components/Editor/Editor.css +++ b/src/components/Editor/Editor.css @@ -3,7 +3,6 @@ --debug-line-border: rgb(145, 188, 219); --editor-searchbar-height: 27px; --editor-second-searchbar-height: 27px; - } .theme-dark .editor-wrapper { @@ -23,8 +22,7 @@ --theme-conditional-breakpoint-color: #ccd1d5; } -.out-of-scope .CodeMirror-line, -.out-of-scope .CodeMirror-linenumber { +.out-of-scope .CodeMirror-line, .out-of-scope .CodeMirror-linenumber { opacity: 0.8; } @@ -178,8 +176,12 @@ html[dir="rtl"] .editor-mount { } @keyframes fade-highlight-out { - 0% { background-color: var(--theme-highlight-gray); } - 100% { background-color: transparent; } + 0% { + background-color: var(--theme-highlight-gray); + } + 100% { + background-color: transparent; + } } .theme-dark .highlight-line .CodeMirror-line { @@ -187,8 +189,12 @@ html[dir="rtl"] .editor-mount { } @keyframes fade-highlight-out-dark { - 0% { background-color: var(--theme-content-color3); } - 100% { background-color: transparent; } + 0% { + background-color: var(--theme-content-color3); + } + 100% { + background-color: transparent; + } } .welcomebox { diff --git a/src/components/Editor/Tabs.css b/src/components/Editor/Tabs.css index 6b52194115..bc953ee723 100644 --- a/src/components/Editor/Tabs.css +++ b/src/components/Editor/Tabs.css @@ -57,8 +57,7 @@ border-bottom-color: transparent; } -.source-tab.active path, -.source-tab:hover path { +.source-tab.active path, .source-tab:hover path { fill: var(--theme-body-color); } @@ -75,8 +74,7 @@ fill: var(--theme-textbox-box-shadow); } -.source-tab .blackBox, -.source-tab .prettyPrint { +.source-tab .blackBox, .source-tab .prettyPrint { line-height: 0; align-self: center; } diff --git a/src/components/ProjectSearch/ProjectSearch.css b/src/components/ProjectSearch/ProjectSearch.css index 3c658a5c02..c6d15d65ca 100644 --- a/src/components/ProjectSearch/ProjectSearch.css +++ b/src/components/ProjectSearch/ProjectSearch.css @@ -1,4 +1,3 @@ - .search-container { position: absolute; top: 30px; diff --git a/src/components/SecondaryPanes/Breakpoints.css b/src/components/SecondaryPanes/Breakpoints.css index c5d1a88718..5352bc1dae 100644 --- a/src/components/SecondaryPanes/Breakpoints.css +++ b/src/components/SecondaryPanes/Breakpoints.css @@ -71,8 +71,7 @@ html .breakpoints-list .breakpoint.paused { order: 3; } -:root.theme-light .breakpoint-snippet, -:root.theme-firebug .breakpoint-snippet { +:root.theme-light .breakpoint-snippet, :root.theme-firebug .breakpoint-snippet { color: var(--theme-comment); } diff --git a/src/components/SecondaryPanes/Frames/Frames.css b/src/components/SecondaryPanes/Frames/Frames.css index 8135b583c4..52ae8795a3 100644 --- a/src/components/SecondaryPanes/Frames/Frames.css +++ b/src/components/SecondaryPanes/Frames/Frames.css @@ -37,8 +37,7 @@ margin: 0; } -:root.theme-light .frames .location, -:root.theme-firebug .frames .location { +:root.theme-light .frames .location, :root.theme-firebug .frames .location { color: var(--theme-comment); } @@ -53,14 +52,12 @@ margin-right: 1em; } -.frames ul li:hover, -.frames ul li:focus { +.frames ul li:hover, .frames ul li:focus { background-color: var(--theme-toolbar-background-alt); outline: none; } -.theme-dark .frames ul li:hover, -.theme-dark .frames ul li:focus { +.theme-dark .frames ul li:hover, .theme-dark .frames ul li:focus { background-color: var(--theme-tab-toolbar-background); } diff --git a/src/components/SecondaryPanes/Frames/Group.css b/src/components/SecondaryPanes/Frames/Group.css index 88a02c4733..3a21547fe7 100644 --- a/src/components/SecondaryPanes/Frames/Group.css +++ b/src/components/SecondaryPanes/Frames/Group.css @@ -1,5 +1,4 @@ -.frames ul .frames-group .group, -.frames ul .frames-group .group .location { +.frames ul .frames-group .group, .frames ul .frames-group .group .location { font-weight: 500; } diff --git a/src/components/SecondaryPanes/Frames/WhyPaused.css b/src/components/SecondaryPanes/Frames/WhyPaused.css index 6377321da8..2e8ba0e3be 100644 --- a/src/components/SecondaryPanes/Frames/WhyPaused.css +++ b/src/components/SecondaryPanes/Frames/WhyPaused.css @@ -1,4 +1,3 @@ - .why-paused { background-color: var(--theme-body-background); color: var(--theme-body-color); diff --git a/src/components/SecondaryPanes/Scopes.css b/src/components/SecondaryPanes/Scopes.css index 783c4c36b9..9030b47a4b 100644 --- a/src/components/SecondaryPanes/Scopes.css +++ b/src/components/SecondaryPanes/Scopes.css @@ -1,4 +1,3 @@ - .object-node.default-property { opacity: 0.6; } diff --git a/src/components/Sources.css b/src/components/Sources.css index 389f033c3b..b217475a00 100644 --- a/src/components/Sources.css +++ b/src/components/Sources.css @@ -113,7 +113,6 @@ border-top-color: transparent; } -.source-footer .tab.active path, -.source-footer .tab:hover path { +.source-footer .tab.active path, .source-footer .tab:hover path { fill: var(--theme-body-color); } diff --git a/src/components/shared/Accordion.css b/src/components/shared/Accordion.css index 43e4c90976..e12c2f6b2a 100644 --- a/src/components/shared/Accordion.css +++ b/src/components/shared/Accordion.css @@ -28,8 +28,7 @@ background-color: var(--theme-toolbar-background-hover); } -.accordion ._header button svg, -.accordion ._header:hover button svg { +.accordion ._header button svg, .accordion ._header:hover button svg { fill: currentColor; height: 16px; } diff --git a/src/components/shared/Autocomplete.css b/src/components/shared/Autocomplete.css index 53a8cc9d21..6de1c2d4f5 100644 --- a/src/components/shared/Autocomplete.css +++ b/src/components/shared/Autocomplete.css @@ -1,4 +1,3 @@ - .autocomplete { flex: 1; width: 100%; diff --git a/src/components/shared/BracketArrow.css b/src/components/shared/BracketArrow.css index 14f99aca35..8de643b7ec 100644 --- a/src/components/shared/BracketArrow.css +++ b/src/components/shared/BracketArrow.css @@ -2,8 +2,7 @@ position: absolute; } -.bracket-arrow::before, -.bracket-arrow::after { +.bracket-arrow::before, .bracket-arrow::after { content: ''; height: 0; width: 0; diff --git a/src/components/shared/Button/PaneToggle.css b/src/components/shared/Button/PaneToggle.css index 09e9cc8f2a..11dc00f28d 100644 --- a/src/components/shared/Button/PaneToggle.css +++ b/src/components/shared/Button/PaneToggle.css @@ -1,24 +1,20 @@ -.toggle-button-start, -.toggle-button-end { +.toggle-button-start, .toggle-button-end { transform: translate(0, 2px); transition: transform 0.25s ease-in-out; cursor: pointer; padding: 5px 2px; } -.toggle-button-start.vertical, -.toggle-button-end.vertical { +.toggle-button-start.vertical, .toggle-button-end.vertical { padding: 4px 2px; } -.toggle-button-start svg, -.toggle-button-end svg { +.toggle-button-start svg, .toggle-button-end svg { width: 16px; fill: var(--theme-comment); } -.theme-dark .toggle-button-start svg, -.theme-dark .toggle-button-end svg { +.theme-dark .toggle-button-start svg, .theme-dark .toggle-button-end svg { fill: var(--theme-comment-alt); } @@ -40,7 +36,6 @@ html .toggle-button-end.vertical svg { transform: rotate(-90deg); } -.toggle-button-start.collapsed, -.toggle-button-end.collapsed { +.toggle-button-start.collapsed, .toggle-button-end.collapsed { transform: rotate(180deg); } diff --git a/src/components/shared/SearchInput.css b/src/components/shared/SearchInput.css index 1da3f52442..81ea771e0a 100644 --- a/src/components/shared/SearchInput.css +++ b/src/components/shared/SearchInput.css @@ -1,4 +1,3 @@ - .search-field { width: calc(100% - 1px); height: 27px; @@ -40,20 +39,17 @@ color: var(--theme-body-color-inactive); } -.search-field i.magnifying-glass, -.search-field i.sad-face { +.search-field i.magnifying-glass, .search-field i.sad-face { padding: 6px; width: 24px; } -.search-field.big i.magnifying-glass, -.search-field.big i.sad-face { +.search-field.big i.magnifying-glass, .search-field.big i.sad-face { padding: 14px; width: 40px; } -.search-field .magnifying-glass path, -.search-field .magnifying-glass ellipse { +.search-field .magnifying-glass path, .search-field .magnifying-glass ellipse { stroke: var(--theme-splitter-color); } diff --git a/src/components/shared/Svg.css b/src/components/shared/Svg.css index 2627c91b4d..f0f70ac688 100644 --- a/src/components/shared/Svg.css +++ b/src/components/shared/Svg.css @@ -1,34 +1,18 @@ - -.arrow, -.folder, -.domain, -.file, -.worker, -.refresh, -.add-button { +.arrow, .folder, .domain, .file, .worker, .refresh, .add-button { fill: var(--theme-splitter-color); } -.worker, -.folder { +.worker, .folder { position: relative; top: 2px; } -.domain, -.file, -.worker, -.refresh, -.add-button { +.domain, .file, .worker, .refresh, .add-button { position: relative; top: 1px; } -.domain svg, -.folder svg, -.worker svg, -.refresh svg, -.add-button svg { +.domain svg, .folder svg, .worker svg, .refresh svg, .add-button svg { width: 15px; } @@ -36,11 +20,7 @@ width: 13px; } -.file svg, -.domain svg, -.folder svg, -.refresh svg, -.worker svg { +.file svg, .domain svg, .folder svg, .refresh svg, .worker svg { margin-inline-end: 5px; } diff --git a/src/components/shared/previewFunction.css b/src/components/shared/previewFunction.css index 6a886c8612..3b17eba1c6 100644 --- a/src/components/shared/previewFunction.css +++ b/src/components/shared/previewFunction.css @@ -1,4 +1,3 @@ - .function-signature { line-height: 20px; align-self: center; diff --git a/src/components/shared/reps.css b/src/components/shared/reps.css index 2cfc80c69a..00142a78f4 100644 --- a/src/components/shared/reps.css +++ b/src/components/shared/reps.css @@ -3,8 +3,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/. */ -.theme-dark, -.theme-light { +.theme-dark, .theme-light { --number-color: var(--theme-highlight-green); --string-color: var(--theme-highlight-orange); --null-color: var(--theme-comment); @@ -46,10 +45,7 @@ white-space: pre-wrap; } -.objectBox-string, -.objectBox-text, -.objectLink-textNode, -.objectBox-table { +.objectBox-string, .objectBox-text, .objectLink-textNode, .objectBox-table { white-space: pre-wrap; } @@ -65,9 +61,7 @@ color: var(--string-color); } -.objectLink-function, -.objectBox-stackTrace, -.objectLink-profile { +.objectLink-function, .objectBox-stackTrace, .objectLink-profile { color: var(--object-color); } @@ -76,10 +70,7 @@ color: var(--location-color); } -.objectBox-null, -.objectBox-undefined, -.objectBox-hint, -.logRowHint { +.objectBox-null, .objectBox-undefined, .objectBox-hint, .logRowHint { font-style: italic; color: var(--null-color); } @@ -123,21 +114,16 @@ /******************************************************************************/ -.objectLeftBrace, -.objectRightBrace, -.arrayLeftBracket, -.arrayRightBracket { +.objectLeftBrace, .objectRightBrace, .arrayLeftBracket, .arrayRightBracket { cursor: pointer; font-weight: bold; } -.objectLeftBrace, -.arrayLeftBracket { +.objectLeftBrace, .arrayLeftBracket { margin-right: 4px; } -.objectRightBrace, -.arrayRightBracket { +.objectRightBrace, .arrayRightBracket { margin-left: 4px; } @@ -156,7 +142,7 @@ .caption { font-weight: bold; - color: var(--caption-color); + color: var(--caption-color); } /******************************************************************************/ @@ -169,13 +155,11 @@ font-style: normal; } -.theme-dark .objectBox-object, -.theme-light .objectBox-object { +.theme-dark .objectBox-object, .theme-light .objectBox-object { font-weight: normal; white-space: pre-wrap; } -.theme-dark .caption, -.theme-light .caption { +.theme-dark .caption, .theme-light .caption { font-weight: normal; } diff --git a/src/components/variables.css b/src/components/variables.css index 1c00d5db14..46c113e211 100644 --- a/src/components/variables.css +++ b/src/components/variables.css @@ -1,9 +1,7 @@ -:root.theme-light, -:root .theme-light { +:root.theme-light, :root .theme-light { --search-overlays-semitransparent: rgba(221, 225, 228, 0.66); } -:root.theme-dark, -:root .theme-dark { +:root.theme-dark, :root .theme-dark { --search-overlays-semitransparent: rgba(42, 46, 56, 0.66); } diff --git a/src/utils/parser/tests/fixtures/var.js b/src/utils/parser/tests/fixtures/var.js index 80ff5111b9..d5307424d4 100644 --- a/src/utils/parser/tests/fixtures/var.js +++ b/src/utils/parser/tests/fixtures/var.js @@ -1,4 +1,5 @@ var foo = 1; let bar = 2; const baz = 3; -const a = 4, b = 5; +const a = 4, + b = 5;