stylinting now

Author: corevo

.stylelintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "extends": "stylelint-config-standard",
+  "rules": {
+  }
+};

package.json

@@ -14,7 +14,9 @@
     "pack:runner": "cd packages/selenium-side-runner && yarn pkg",
     "test": "jest",
     "test:webdriver": "cd tests/examples && node ../../packages/selenium-side-runner/dist/index.js *.side",
-    "lint": "eslint packages/selenium-ide/src/{neo,selianize,plugin,router,api}/ packages/selenium-side-runner/src/ packages/selianize/{__tests__,src}/ --ext .js --ext .jsx",
+    "lint": "yarn lint:scripts && yarn lint:styles",
+    "lint:scripts": "eslint packages/selenium-ide/src/{neo,selianize,plugin,router,api}/ packages/selenium-side-runner/src/ packages/selianize/{__tests__,src}/ --ext .js --ext .jsx ",
+    "lint:styles": "stylelint \"packages/selenium-ide/src/neo/**/*.css\"",
     "postinstall": "lerna bootstrap"
   },
   "jest": {
@@ -36,6 +38,8 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.1.0",
     "lerna": "^2.6.0",
+    "stylelint": "^9.3.0",
+    "stylelint-config-standard": "^18.2.0",
     "web-ext": "^2.4.0"
   }
 }

packages/selenium-ide/src/neo/components/ActionButtons/ActionButton/style.css

@@ -18,8 +18,8 @@
 }
 
 .btn-action:focus {
-  border-color: rgba(0,0,0,.25);
-  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.7);
+  border-color: rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.7);
 }
 
 .btn-action.no-focus:focus {
@@ -32,9 +32,9 @@
 }
 
 .btn-action:disabled {
-  color: #A9A9A9;
+  color: #a9a9a9;
 }
 
 .btn-action.active {
-  background-color: #E3F2FF;
+  background-color: #e3f2ff;
 }

packages/selenium-ide/src/neo/components/ActionButtons/Open/style.css

@@ -12,11 +12,6 @@
   left: -1000px;
 }
 
-.file-input > input:focus ~ label {
-  border-color: rgba(0,0,0,.25);
-  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.7);
-}
-
 .file-input > label {
   width: 22px;
   height: 22px;
@@ -26,6 +21,11 @@
   cursor: pointer;
 }
 
+.file-input > input:focus ~ label {
+  border-color: rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.7);
+}
+
 .file-input > label > i {
   margin: auto;
   position: absolute;

packages/selenium-ide/src/neo/components/ActionButtons/Record/style.css

@@ -1,10 +1,10 @@
 .record {
-    display: inline-block;
-    border: 1px solid transparent;
-    margin: 2px;
+  display: inline-block;
+  border: 1px solid transparent;
+  margin: 2px;
 }
 
 .record:focus-within {
-    border-color: rgba(0,0,0,.25);
-    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.7);
+  border-color: rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.7);
 }

packages/selenium-ide/src/neo/components/ActionButtons/Save/style.css

@@ -10,15 +10,19 @@
   0% {
     transform: scale(1);
   }
+
   3% {
     transform: scale(1.2);
   }
+
   6% {
     transform: scale(1);
   }
+
   9% {
     transform: scale(1.2);
   }
+
   12% {
     transform: scale(1);
   }

packages/selenium-ide/src/neo/components/ActionButtons/SpeedGauge/style.css

@@ -11,6 +11,6 @@
   font-size: 8px;
   top: 0;
   bottom: 0;
-  margin: auto 0px;
+  margin: auto 0;
   height: 10px;
 }

packages/selenium-ide/src/neo/components/Alert/style.css

@@ -1,4 +1,4 @@
 .alert .markdown {
-    max-height: 400px;
-    overflow-y: auto;
+  max-height: 400px;
+  overflow-y: auto;
 }

packages/selenium-ide/src/neo/components/Callstack/style.css

@@ -1,11 +1,8 @@
 .test > .stack-item:not(.name) {
-    display: block;
-}
-
-.test > .stack-item:not(.name).selected {
+  display: block;
 }
 
 .test > .stack-item:not(.name) > span {
-    display: inline-block;
-    transform: scaleY(-1) rotate(270deg);
+  display: inline-block;
+  transform: scaleY(-1) rotate(270deg);
 }

packages/selenium-ide/src/neo/components/Checkbox/style.css

@@ -1,44 +1,45 @@
 input[type="checkbox"].checkbox {
-    position: absolute;
-    opacity: 0;
+  position: absolute;
+  opacity: 0;
 }
 
 input[type="checkbox"].checkbox + label {
-    display: block;
-    cursor: pointer;
-    padding: 5px 0;
+  display: block;
+  cursor: pointer;
+  padding: 5px 0;
 }
 
 input[type="checkbox"].checkbox + label span {
-    display: inline-block;
-    background-color: #fff;
-    color: #40A6FF;
-    text-align: center;
-    line-height: 18px;
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    margin: -2px 10px 0 0;
-    vertical-align: top;
-    cursor: pointer;
-    border: 1px solid #DCDCDC;
-    border-radius: 3px;
-    box-shadow: inset 0 0 1px 1px transparent;
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  display: inline-block;
+  background-color: #fff;
+  color: #40a6ff;
+  text-align: center;
+  line-height: 18px;
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  margin: -2px 10px 0 0;
+  vertical-align: top;
+  cursor: pointer;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  box-shadow: inset 0 0 1px 1px transparent;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
+
 input[type="checkbox"].checkbox:disabled + label span {
-    color: rgba(128, 128, 128, 0.6);
-    background-color: whitesmoke;
-    border-color: whitesmoke;
-    cursor: not-allowed;
+  color: rgba(128, 128, 128, 0.6);
+  background-color: whitesmoke;
+  border-color: whitesmoke;
+  cursor: not-allowed;
 }
 
 input[type="checkbox"].checkbox:not(:disabled) + label:active span {
-    background-color: #fdfdfd;
-    box-shadow: inset 0 0 1px 1px #ececec;
+  background-color: #fdfdfd;
+  box-shadow: inset 0 0 1px 1px #ececec;
 }
 
 input[type="checkbox"].checkbox + label > div {
-    display: inline-block;
-    width: 85px;
+  display: inline-block;
+  width: 85px;
 }