Using Prettier for CSS (#8606)

* Adding clean-css npm script, and calling it in the lint-fix script for good measure.

* resulting cleanup

superset/assets/package.json

@@ -16,7 +16,8 @@
     "prod": "node --max_old_space_size=4096 webpack --mode=production --colors --progress",
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production webpack --mode=production --colors --progress",
     "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c tslint.json ./{src,spec}/**/*.ts{,x}",
-    "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c tslint.json --fix ./{src,spec}/**/*.ts{,x}",
+    "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c tslint.json --fix ./{src,spec}/**/*.ts{,x} && npm run clean-css",
+    "clean-css": "prettier --write src/**/*.{css,less,sass,scss}",
     "cypress": "cypress",
     "cypress-debug": "cypress open --config watchForFileChanges=true",
     "install-cypress": "npm install cypress@3.4.1"

superset/assets/src/CRUD/styles.css

@@ -16,16 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-.CRUD i.fa-caret-down, i.fa-caret-up {
-  width: '5px';
+.CRUD i.fa-caret-down,
+i.fa-caret-up {
+  width: "5px";
 }
 .CRUD td.expanded {
-  border-top: '0px';
-  padding: '0px';
+  border-top: "0px";
+  padding: "0px";
 }
 .CRUD .frame {
-  border: '1px solid #AAA';
+  border: "1px solid #AAA";
   border-radius: 5;
   padding: 10;
-  background: '#F4F4F4';
+  background: "#F4F4F4";
 }

superset/assets/src/SqlLab/main.less

@@ -153,7 +153,7 @@ div.Workspace {
   color: black;
 }
 .success {
-    background-color: #4AC15F;
+  background-color: #4ac15f;
 }
 .failed {
   background-color: red;
@@ -167,9 +167,9 @@ div.Workspace {
   position: absolute;
   width: 300px;
   opacity: 0.85;
-    border: 1px solid #AAA;
+  border: 1px solid #aaa;
   max-height: 600px;
-    box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px
+  box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px;
 }
 .SqlLab pre {
   padding: 0px !important;
@@ -243,7 +243,7 @@ div.Workspace {
   .schemaPane {
     flex: 0 0 300px;
     max-width: 300px;
-        transition: transform .3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
   }
 
   .queryPane {
@@ -251,7 +251,8 @@ div.Workspace {
     padding-left: 10px;
   }
 
-    .schemaPane-enter-done, .schemaPane-exit {
+  .schemaPane-enter-done,
+  .schemaPane-exit {
     transform: translateX(0);
   }
 
@@ -264,7 +265,8 @@ div.Workspace {
     max-width: 300px;
   }
 
-    .schemaPane-enter, .schemaPane-exit-done {
+  .schemaPane-enter,
+  .schemaPane-exit-done {
     max-width: 0;
     transform: translateX(-120%);
     overflow: hidden;
@@ -357,7 +359,7 @@ div.tablePopover:hover {
 }
 
 .TableElement .ws-el-controls {
-    margin-right: -.3em;
+  margin-right: -0.3em;
 }
 
 .QueryTable .label {

superset/assets/src/components/BootstrapSliderWrapper.css

@@ -23,4 +23,3 @@
 .BootstrapSliderWrapper .slider-handle {
   background: #b3b3b3;
 }
-

superset/assets/src/datasource/main.css

@@ -23,7 +23,7 @@
 
 .Datasource .change-warning {
   margin: 16px 10px 0;
-    color: #FE4A49;
+  color: #fe4a49;
 }
 
 .Datasource .change-warning .bold {

superset/assets/src/explore/main.css

@@ -34,8 +34,9 @@
   margin-bottom: 40px;
 }
 
-.fave-unfave-icon, .edit-desc-icon {
-  padding: 0 0 0 .5em;
+.fave-unfave-icon,
+.edit-desc-icon {
+  padding: 0 0 0 0.5em;
   font-size: 14px;
 }
 
@@ -57,7 +58,11 @@
   width: 100px;
 }
 
-.control-panel-section .metrics-select .Select-multi-value-wrapper .Select-input > input {
+.control-panel-section
+  .metrics-select
+  .Select-multi-value-wrapper
+  .Select-input
+  > input {
   width: 300px;
 }
 
@@ -208,7 +213,8 @@
   margin: 20px 0 0;
 }
 
-.label-btn:hover, .label-btn-label:hover {
+.label-btn:hover,
+.label-btn-label:hover {
   background-color: #667177;
   color: #fff;
 }

superset/assets/src/showSavedQuery/index.css

@@ -16,5 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-.btn-add { display: none; }
-.linkback { padding: 0 10px 20px 2px; }
+.btn-add {
+  display: none;
+}
+.linkback {
+  padding: 0 10px 20px 2px;
+}