From 20a9a667da95f312063639f9b52a1709791a9ec3 Mon Sep 17 00:00:00 2001
From: Fangzhou Li <riophaelee@gmail.com>
Date: Wed, 1 Nov 2017 11:17:10 +0800
Subject: [PATCH] introduce stylelint

---
 docs/styles/docs.less  | 76 ++++++++++++++++++++++--------------------
 docs/styles/prism.less | 29 +++++-----------
 package.json           |  6 +++-
 src/style.less         | 75 ++++++++++++++++++++---------------------
 stylelint.config.js    | 17 ++++++++++
 5 files changed, 106 insertions(+), 97 deletions(-)
 create mode 100644 stylelint.config.js

diff --git a/docs/styles/docs.less b/docs/styles/docs.less
index c970190c..cc92d649 100644
--- a/docs/styles/docs.less
+++ b/docs/styles/docs.less
@@ -1,3 +1,5 @@
+/* stylelint-disable declaration-no-important */
+
 @import "~google-material-color/dist/palette.less";
 
 /* Utils */
@@ -53,7 +55,7 @@ dl, h1, h2, h3, h4, h5, h6, ol, p, pre, ul {
 }
 
 address, dl, ol, p, pre, ul {
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 pre, code {
@@ -62,7 +64,7 @@ pre, code {
 
 code:not([class*="language-"]) {
   padding: 2px 3px;
-  background: rgba(0, 0, 0, .04);
+  background: rgba(0, 0, 0, 0.04);
   border-radius: 3px;
   font-size: 12px;
 }
@@ -83,7 +85,7 @@ input[type="radio"] {
   margin-right: auto;
 }
 
-[class*=container] {
+[class*="container"] {
   padding-left: 20px;
   padding-right: 20px;
 }
@@ -102,12 +104,12 @@ a img {
 }
 
 h1, h2, h3, h4 {
-  color: #2c3e50;
-  letter-spacing: .5px;
+  color: #2C3E50;
+  letter-spacing: 0.5px;
 }
 
 h1, h2 {
-  margin: 1em 0 .45em;
+  margin: 1em 0 0.45em;
   line-height: 1.2;
 }
 
@@ -126,7 +128,7 @@ h2 {
 .site-header {
   .vertical-padding(15px);
 
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #EEE;
 }
 
 #header {
@@ -178,13 +180,13 @@ h2 {
 
 .site-header-logo-link {
   padding-left: 2em;
-  background: url(../../static/vue-logo.png) left center no-repeat;
+  background: url("../../static/vue-logo.png") left center no-repeat;
   background-size: 1.5em 1.5em;
   font-size: 24px;
-  font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
   font-weight: 300;
-  color: rgba(255, 255, 255, .9);
-  color: #2c3e50;
+  color: rgba(255, 255, 255, 0.9);
+  color: #2C3E50;
 }
 
 .site-header-logo-component-name {
@@ -200,8 +202,8 @@ h2 {
 .site-header-nav-item {
   display: inline-block;
   margin-left: 1em;
-  font-size: .875rem;
-  color: #34495e;
+  font-size: 0.875rem;
+  color: #34495E;
   vertical-align: middle;
 }
 
@@ -212,7 +214,7 @@ h2 {
 
 /* Main */
 
-#main {
+#main { // stylelint-disable-line no-duplicate-selectors
   padding-top: 3em;
 
   h1 {
@@ -230,7 +232,7 @@ h2 {
   text-decoration: none;
 
   svg {
-    color: rgba(0, 0, 0, .25);
+    color: rgba(0, 0, 0, 0.25);
   }
 
   svg:hover {
@@ -254,7 +256,7 @@ p.tip {
   position: relative;
   margin: 1em 0;
   padding: 12px 20px 12px 48px;
-  background: #f8f8f8;
+  background: #F8F8F8;
   border-radius: 5px;
 
   &::before {
@@ -268,7 +270,7 @@ p.tip {
     width: @size;
     height: @size;
     border-radius: 50%;
-    color: #fff;
+    color: #FFF;
     text-align: center;
     font-weight: 400;
     line-height: @size;
@@ -281,7 +283,7 @@ p.tip {
   margin: 1em 0;
   width: 100%;
   border-radius: 5px;
-  border: 1px solid #eee;
+  border: 1px solid #EEE;
 
   p {
     margin: 5px 10px;
@@ -296,15 +298,15 @@ p.tip {
 
 .example-label {
   display: block;
-  padding: .75em 1em;
+  padding: 0.75em 1em;
   width: 100%;
   background: #F8F8F8;
   box-sizing: border-box;
-  color: rgba(0, 0, 0, .6);
+  color: rgba(0, 0, 0, 0.6);
   font-weight: 700;
   font-size: 12px;
   line-height: 1;
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
   text-transform: uppercase;
 }
 
@@ -312,8 +314,8 @@ p.tip {
   margin-right: -8px;
   float: right;
   font-weight: 400;
-  font-size: .9em;
-  color: #aaa;
+  font-size: 0.9em;
+  color: #AAA;
   letter-spacing: 0;
 }
 
@@ -332,7 +334,7 @@ p.tip {
 }
 
 .example-demo .example-inner,
-.example-code pre[class*="language-"] {
+  .example-code pre[class*="language-"] {
   padding: 15px;
 }
 
@@ -340,7 +342,7 @@ p.tip {
   pre.result {
     margin: 1em 0;
     padding: 1em 1.5em;
-    background: rgba(0, 0, 0, .025);
+    background: rgba(0, 0, 0, 0.025);
     border: 0;
     border-radius: 5px;
     font-size: 12px;
@@ -348,7 +350,7 @@ p.tip {
 }
 
 .example-code {
-  border-left: 1px solid #eee;
+  border-left: 1px solid #EEE;
 
   .example-inner {
     max-height: 300px;
@@ -383,10 +385,10 @@ pre[class*="language-"] {
     right: 0;
     top: 0;
     padding: 5px 10px 0;
-    color: #ccc;
-    font-size: .9em;
+    color: #CCC;
+    font-size: 0.9em;
     font-weight: 600;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
   }
 }
 
@@ -410,24 +412,24 @@ table {
 
   thead,
   &.striped tr:nth-of-type(2n) {
-    background: #f8f8f8;
+    background: #F8F8F8;
   }
 
   th {
     text-align: left;
     font-size: 15px;
     font-weight: 400;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
   }
 
   th,
   td {
-    padding: .4em;
-    border-bottom: 1px solid #eee;
+    padding: 0.4em;
+    border-bottom: 1px solid #EEE;
   }
 
   tbody tr:hover {
-    background: #f2f2f2 !important;
+    background: #F2F2F2 !important;
   }
 }
 
@@ -462,7 +464,7 @@ label input[type="checkbox"] {
 }
 
 .sidebar-nav-section-title {
-  margin-bottom: .6em;
+  margin-bottom: 0.6em;
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
@@ -490,8 +492,8 @@ label input[type="checkbox"] {
   .vertical-padding(30px);
 
   margin-top: 30px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #EEE;
   text-align: center;
   font-size: 13px;
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
 }
diff --git a/docs/styles/prism.less b/docs/styles/prism.less
index 1c3de2e7..eb7071de 100644
--- a/docs/styles/prism.less
+++ b/docs/styles/prism.less
@@ -18,40 +18,29 @@ pre[class*="language-"] {
   word-wrap: normal;
   line-height: 1.5;
   font-size: 12px;
-
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
   tab-size: 2;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
+  padding: 28px 28px 20px;
+  margin: 0.5em 0;
   overflow: auto;
+  background: #F8F8F8;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
   margin: 1em 0;
   border-radius: 5px;
-  background: white;
-}
-
-pre[class*="language-"] {
-  background: #f8f8f8;
-  padding: 28px 28px 20px;
+  background: #FFF;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
+  padding: 0.1em;
+  border-radius: 0.3em;
   white-space: normal;
 }
 
@@ -67,7 +56,7 @@ pre[class*="language-"] {
 }
 
 .namespace {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -94,7 +83,7 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  color: #a67f59;
+  color: #A67F59;
 }
 
 .token.atrule,
@@ -110,7 +99,7 @@ pre[class*="language-"] {
 .token.regex,
 .token.important,
 .token.variable {
-  color: #e90;
+  color: #E90;
 }
 
 .token.important,
diff --git a/package.json b/package.json
index 66948219..753de6a9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
     "testonly": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "test": "npm run testonly",
     "pretest": "npm run lint",
-    "lint": "eslint --ext .js,.vue .",
+    "lint:js": "eslint --ext .js,.vue .",
+    "lint:css": "stylelint '**/*.less'",
+    "lint": "npm run lint:js && npm run lint:css",
     "finish": "npm test && npm run bundle"
   },
   "dependencies": {
@@ -90,6 +92,8 @@
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "stylelint": "^8.2.0",
+    "stylelint-config-xo-space": "^0.1.0",
     "url-loader": "^0.6.2",
     "vue": "^2.2.0",
     "vue-loader": "^13.0.4",
diff --git a/src/style.less b/src/style.less
index 48a2185b..e4ca5068 100644
--- a/src/style.less
+++ b/src/style.less
@@ -2,7 +2,7 @@
  * Dependencies
  */
 
- @import "~google-material-color/dist/palette.less";
+@import "~google-material-color/dist/palette.less";
 
 /**
  * Variables
@@ -22,14 +22,14 @@
 @treeselect-control-height: 36px;
 @treeselect-control-inner-height: @treeselect-control-height - @treeselect-control-border-width * 2;
 @treeselect-control-border-width: 1px;
-@treeselect-control-border-color: #ddd;
-@treeselect-control-border-color-hover: #cfcfcf;
+@treeselect-control-border-color: #DDD;
+@treeselect-control-border-color-hover: #CFCFCF;
 @treeselect-control-border-color-active: @treeselect-control-border-color-hover;
 @treeselect-control-border-color-focus: @palette-Light-Blue-600;
 @treeselect-control-border-radius: @treeselect-border-radius-lg;
-@treeselect-control-bg: #fff;
+@treeselect-control-bg: #FFF;
 @treeselect-control-box-shadow-focus: 0 0 0 3px fade(@treeselect-control-border-color-focus, 10%);
-@treeselect-control-bg-disabled: #f9f9f9;
+@treeselect-control-bg-disabled: #F9F9F9;
 
 @treeselect-placeholder-font-color: @palette-Grey-400;
 @treeselect-single-value-font-color: #333;
@@ -44,25 +44,25 @@
 @treeselect-multi-value-item-border-width: 1px;
 @treeselect-multi-value-item-border-color: transparent;
 @treeselect-multi-value-item-font-color-disabled: #555;
-@treeselect-multi-value-item-bg-disabled: #fff;
-@treeselect-multi-value-item-border-color-disabled: #e5e5e5;
+@treeselect-multi-value-item-bg-disabled: #FFF;
+@treeselect-multi-value-item-border-color-disabled: #E5E5E5;
 @treeselect-multi-value-remove-color: @treeselect-multi-value-font-color;
 @treeselect-multi-value-remove-color-hover: @palette-Red-600;
-@treeselect-multi-value-remove-border-color: #fff;
+@treeselect-multi-value-remove-border-color: #FFF;
 @treeselect-limit-tip-font-color: @palette-Grey-500;
 @treeselect-limit-tip-font-size: @treeselect-multi-value-font-size;
 @treeselect-limit-tip-font-weight: 600;
 @treeselect-single-input-font-size: inherit;
 @treeselect-multi-input-font-size: @treeselect-multi-value-font-size;
 
-@treeselect-menu-bg: #fff;
+@treeselect-menu-bg: #FFF;
 @treeselect-menu-padding-y: 3px;
 @treeselect-menu-line-height: 180%;
-@treeselect-menu-box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
-@treeselect-control-menu-divider-color: #f2f2f2;
+@treeselect-menu-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+@treeselect-control-menu-divider-color: #F2F2F2;
 
 @treeselect-arrow-size: 5px;
-@treeselect-arrow-color: #ccc;
+@treeselect-arrow-color: #CCC;
 @treeselect-arrow-color-hover: @palette-Grey-700;
 @treeselect-arrow-transition-timing-function: ease-out-expo;
 
@@ -77,21 +77,21 @@
 @treeselect-checkbox-color: @palette-Grey-300;
 @treeselect-checkbox-color-highlight: @palette-Light-Blue-600;
 @treeselect-checkbox-border-color: @treeselect-checkbox-color;
-@treeselect-checkbox-bg: #fff;
+@treeselect-checkbox-bg: #FFF;
 @treeselect-checkbox-border-color-hover: @treeselect-checkbox-color-highlight;
-@treeselect-checkbox-bg-hover: #fff;
+@treeselect-checkbox-bg-hover: #FFF;
 @treeselect-checkbox-indeterminate-border-color: @treeselect-checkbox-color-highlight;
 @treeselect-checkbox-indeterminate-bg: @treeselect-checkbox-color-highlight;
-@treeselect-checkbox-minus-mark-color: #fff;
+@treeselect-checkbox-minus-mark-color: #FFF;
 @treeselect-checkbox-indeterminate-border-color-hover: @treeselect-checkbox-color-highlight;
 @treeselect-checkbox-indeterminate-bg-hover: @treeselect-checkbox-color-highlight;
-@treeselect-checkbox-minus-mark-color-hover: #fff;
+@treeselect-checkbox-minus-mark-color-hover: #FFF;
 @treeselect-checkbox-checked-border-color: @treeselect-checkbox-color-highlight;
 @treeselect-checkbox-checked-bg: @treeselect-checkbox-color-highlight;
-@treeselect-checkbox-check-mark-color: #fff;
+@treeselect-checkbox-check-mark-color: #FFF;
 @treeselect-checkbox-checked-border-color-hover: @treeselect-checkbox-color-highlight;
 @treeselect-checkbox-checked-bg-hover: @treeselect-checkbox-color-highlight;
-@treeselect-checkbox-check-mark-color-hover: #fff;
+@treeselect-checkbox-check-mark-color-hover: #FFF;
 @treeselect-option-label-color: inherit;
 
 @treeselect-loader-color-dark: @palette-Light-Blue-600;
@@ -182,7 +182,7 @@
  */
 
 .vue-treeselect-helper-zoom-effect-off {
-  transform: none !important;
+  transform: none !important; // stylelint-disable-line declaration-no-important
 }
 
 
@@ -243,19 +243,16 @@
 
 .vue-treeselect__multi-value-item--zoom-leave-active {
   transition-timing-function: ease-out-cubic;
+  // trigger animation when element is removed
+  position: absolute;
 }
 
 .vue-treeselect__multi-value-item--zoom-enter,
 .vue-treeselect__multi-value-item--zoom-leave-to {
-  transform: scale(.7);
+  transform: scale(0.7);
   opacity: 0;
 }
 
-.vue-treeselect__multi-value-item--zoom-leave-active {
-  // trigger animation when element is removed
-  position: absolute;
-}
-
 .vue-treeselect__multi-value-item--zoom-move {
   transition: @treeselect-transition-duration transform ease-out-quart;
 }
@@ -491,7 +488,7 @@
   max-width: 100%;
   margin: 0;
   padding: 0;
-  border: none;
+  border: 0;
   outline: none;
   box-sizing: content-box;
   box-shadow: none;
@@ -520,12 +517,12 @@
 
 .vue-treeselect__sizer {
   position: absolute;
-	top: 0;
-	left: 0;
-	visibility: hidden;
-	height: 0;
-	overflow: scroll;
-	white-space: pre;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  height: 0;
+  overflow: scroll;
+  white-space: pre;
 }
 
 .vue-treeselect__clear {
@@ -569,7 +566,7 @@
   }
 
   .vue-treeselect--disabled & {
-    opacity: .35;
+    opacity: 0.35;
   }
 }
 
@@ -644,7 +641,7 @@
   .narrow-cell();
 }
 
-.vue-treeselect__option-arrow-wrapper{
+.vue-treeselect__option-arrow-wrapper {
   .clickable();
 }
 
@@ -666,7 +663,7 @@
   transform: rotateZ(90deg);
 
   &.vue-treeselect__option-arrow--prepare-enter {
-    transform: rotateZ(0) !important;
+    transform: rotateZ(0) !important; // stylelint-disable-line declaration-no-important
   }
 }
 
@@ -804,7 +801,7 @@
 
 .vue-treeselect__count {
   font-weight: 400;
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .vue-treeselect__loading-tip,
@@ -863,7 +860,7 @@
     top: 2.5px;
     width: 2px;
     height: 1px;
-    border: 0 solid #fff;
+    border: 0 solid #FFF;
     border-top-width: 5px;
     border-bottom-width: 1px;
   }
@@ -885,7 +882,7 @@
     display: block;
     position: absolute;
     content: "";
-    background: #fff;
+    background: #FFF;
     transform: rotate(45deg);
   }
 
@@ -924,7 +921,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    opacity: .6;
+    opacity: 0.6;
     animation: @treeselect-loader-animation-duration vue-treeselect-animation-bounce ease-in-out infinite;
   }
 
diff --git a/stylelint.config.js b/stylelint.config.js
new file mode 100644
index 00000000..046d39c6
--- /dev/null
+++ b/stylelint.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  extends: 'stylelint-config-xo-space',
+  rules: {
+    'string-quotes': [ 'double', { avoidEscape: false } ],
+    'declaration-empty-line-before': null,
+    'at-rule-empty-line-before': null,
+    'selector-list-comma-newline-after': null,
+    'rule-empty-line-before': null,
+    'value-keyword-case': null, // [ 'lower', { ignoreProperties: [ 'font', 'font-family' ] } ],
+    'declaration-block-no-duplicate-properties': [ true, { ignore: [ 'consecutive-duplicates' ] } ],
+    'declaration-property-value-blacklist': null,
+    'property-blacklist': null,
+    'no-unknown-animations': null,
+    'font-weight-notation': null,
+    'no-descending-specificity': null,
+  },
+}