add stylelint

.stylelintignore

@@ -0,0 +1,3 @@
+src/assets
+public
+dist

.stylelintrc.json

@@ -0,0 +1,27 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "property-no-vendor-prefix": null,
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-property-value-blacklist": null,
+    "selector-no-qualifying-type": null,
+    "selector-pseudo-element-no-unknown": null,
+    "selector-no-vendor-prefix": null,
+    "media-feature-name-no-vendor-prefix": null,
+    "scss/at-import-partial-extension-blacklist": null,
+    "scss/selector-no-redundant-nesting-selector": null,
+    "scss/at-mixin-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "order/properties-alphabetical-order": null,
+    "selector-max-id": null,
+    "property-no-unknown": null,
+    "color-named": null,
+    "value-no-vendor-prefix": null,
+    "selector-class-pattern": null,
+    "max-nesting-depth": 10,
+    "selector-max-compound-selectors": 10
+  }
+}

package.json

@@ -9,7 +9,9 @@
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src",
+    "lint": "eslint --ext .js,.vue src && stylelint --aei .vue,.html.scss src",
+    "lint:js": "eslint --ext .js,.vue src",
+    "lint:style": "stylelint --aei .vue,.html.scss src",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
@@ -24,6 +26,10 @@
     "src/**/*.{js,vue}": [
       "eslint --fix",
       "git add"
+    ],
+    "src/**/*.{css,scss}": [
+      "stylelint",
+      "git add"
     ]
   },
   "keywords": [
@@ -86,6 +92,7 @@
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
+    "core-js": "^2.6.11",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
@@ -98,6 +105,9 @@
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "serve-static": "^1.13.2",
+    "stylelint": "^13.6.0",
+    "stylelint-config-sass-guidelines": "7.0.0",
+    "stylelint-order": "4.1.0",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.0",
     "vue-template-compiler": "2.6.10"

src/components/BackToTop/index.vue

@@ -1,7 +1,7 @@
 <template>
   <transition :name="transitionName">
     <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
-      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px;width: 16px;"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
     </div>
   </transition>
 </template>
@@ -96,12 +96,12 @@ export default {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity .5s;
+  transition: opacity 0.5s;
 }
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0
+  opacity: 0;
 }
 
 .back-to-ceiling .Icon {

src/components/DndList/index.vue

@@ -7,9 +7,9 @@
           <div class="list-complete-item-handle">
             {{ element.id }}[{{ element.author }}] {{ element.title }}
           </div>
-          <div style="position:absolute;right:0px;">
-            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
-              <i style="color:#ff4949" class="el-icon-delete" />
+          <div style="position: absolute;right: 0;">
+            <span style="float: right;margin-top: -20px;margin-right: 5px;" @click="deleteEle(element)">
+              <i style="color: #ff4949;" class="el-icon-delete" />
             </span>
           </div>
         </div>
@@ -108,17 +108,21 @@ export default {
 .dndList {
   background: #fff;
   padding-bottom: 40px;
-  &:after {
-    content: "";
+
+  &::after {
+    content: '';
     display: table;
     clear: both;
   }
+
   .dndList-list {
     float: left;
     padding-bottom: 30px;
+
     &:first-of-type {
       margin-right: 2%;
     }
+
     .dragArea {
       margin-top: 15px;
       min-height: 50px;
@@ -152,11 +156,11 @@ export default {
 }
 
 .list-complete-item.sortable-chosen {
-  background: #4AB7BD;
+  background: #4ab7bd;
 }
 
 .list-complete-item.sortable-ghost {
-  background: #30B08F;
+  background: #30b08f;
 }
 
 .list-complete-enter,

src/components/DragSelect/index.vue

@@ -52,7 +52,7 @@ export default {
 .drag-select {
   ::v-deep {
     .sortable-ghost {
-      opacity: .8;
+      opacity: 0.8;
       color: #fff !important;
       background: #42b983 !important;
     }

src/components/Dropzone/index.vue

@@ -207,91 +207,94 @@ export default {
 
 <style scoped>
     .dropzone {
-        border: 2px solid #E5E5E5;
-        font-family: 'Roboto', sans-serif;
-        color: #777;
-        transition: background-color .2s linear;
-        padding: 5px;
+      border: 2px solid #e5e5e5;
+      font-family: 'Roboto', sans-serif;
+      color: #777;
+      transition: background-color 0.2s linear;
+      padding: 5px;
     }
 
     .dropzone:hover {
-        background-color: #F6F6F6;
+      background-color: #f6f6f6;
     }
 
     i {
-        color: #CCC;
+      color: #ccc;
     }
 
     .dropzone .dz-image img {
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
     }
 
     .dropzone input[name='file'] {
-        display: none;
+      display: none;
     }
 
     .dropzone .dz-preview .dz-image {
-        border-radius: 0px;
+      border-radius: 0;
     }
 
     .dropzone .dz-preview:hover .dz-image img {
-        transform: none;
-        filter: none;
-        width: 100%;
-        height: 100%;
+      transform: none;
+      filter: none;
+      width: 100%;
+      height: 100%;
     }
 
     .dropzone .dz-preview .dz-details {
-        bottom: 0px;
-        top: 0px;
-        color: white;
-        background-color: rgba(33, 150, 243, 0.8);
-        transition: opacity .2s linear;
-        text-align: left;
+      bottom: 0;
+      top: 0;
+      color: white;
+      background-color: rgba(33, 150, 243, 0.8);
+      transition: opacity 0.2s linear;
+      text-align: left;
     }
 
-    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
-        background-color: transparent;
+    .dropzone .dz-preview .dz-details .dz-filename span,
+    .dropzone .dz-preview .dz-details .dz-size span {
+      background-color: transparent;
     }
 
     .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
-        border: none;
+      border: none;
     }
 
     .dropzone .dz-preview .dz-details .dz-filename:hover span {
-        background-color: transparent;
-        border: none;
+      background-color: transparent;
+      border: none;
     }
 
     .dropzone .dz-preview .dz-remove {
-        position: absolute;
-        z-index: 30;
-        color: white;
-        margin-left: 15px;
-        padding: 10px;
-        top: inherit;
-        bottom: 15px;
-        border: 2px white solid;
-        text-decoration: none;
-        text-transform: uppercase;
-        font-size: 0.8rem;
-        font-weight: 800;
-        letter-spacing: 1.1px;
-        opacity: 0;
+      position: absolute;
+      z-index: 30;
+      color: white;
+      margin-left: 15px;
+      padding: 10px;
+      top: inherit;
+      bottom: 15px;
+      border: 2px white solid;
+      text-decoration: none;
+      text-transform: uppercase;
+      font-size: 0.8rem;
+      font-weight: 800;
+      letter-spacing: 1.1px;
+      opacity: 0;
     }
 
     .dropzone .dz-preview:hover .dz-remove {
-        opacity: 1;
+      opacity: 1;
     }
 
-    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
-        margin-left: -40px;
-        margin-top: -50px;
+    .dropzone .dz-preview .dz-success-mark,
+    .dropzone .dz-preview .dz-error-mark {
+      margin-left: -40px;
+      margin-top: -50px;
     }
 
-    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
-        color: white;
-        font-size: 5rem;
+    .dropzone .dz-preview .dz-success-mark i,
+    .dropzone .dz-preview .dz-error-mark i {
+      color: white;
+      font-size: 5rem;
     }
 </style>

src/components/GithubCorner/index.vue

@@ -4,7 +4,7 @@
       width="80"
       height="80"
       viewBox="0 0 250 250"
-      style="fill:#40c9c6; color:#fff;"
+      style="fill: #40c9c6; color: #fff;"
       aria-hidden="true"
     >
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
@@ -25,30 +25,33 @@
 
 <style scoped>
 .github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
+  animation: octocat-wave 560ms ease-in-out;
 }
 
 @keyframes octocat-wave {
   0%,
   100% {
-    transform: rotate(0)
+    transform: rotate(0);
   }
+
   20%,
   60% {
-    transform: rotate(-25deg)
+    transform: rotate(-25deg);
   }
+
   40%,
   80% {
-    transform: rotate(10deg)
+    transform: rotate(10deg);
   }
 }
 
 @media (max-width:500px) {
   .github-corner:hover .octo-arm {
-    animation: none
+    animation: none;
   }
+
   .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
+    animation: octocat-wave 560ms ease-in-out;
   }
 }
 </style>