feature: add sass lint

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

package.json

@@ -98,6 +98,8 @@
     "source-map-loader": "0.2.1",
     "style-loader": "0.18.2",
     "styled-components": "2.1.1",
+    "stylelint": "7.13.0",
+    "stylelint-config-standard": "16.0.0",
     "url-loader": "0.5.8",
     "webpack": "3.2.0",
     "webpack-dev-server": "2.5.0"
@@ -121,6 +123,7 @@
     "test-travis": "npm run test:coverage",
     "test-only": "mocha ./test/functional ./test/unit",
     "lint": "eslint .",
+    "lint:css": "stylelint 'src/**/*.scss' --syntax scss",
     "build-docker": "docker build -t verdaccio .",
     "build:webui": "rimraf static/* && webpack --config src/webui/scripts/webpack.prod.config.babel.js",
     "dev:webui": "babel-node src/webui/scripts/dev.server.js",

src/webui/src/components/Header/header.scss

@@ -11,6 +11,7 @@ .header {
 .headerWrap {
   display: flex;
   align-items: center;
+
   @include container-size();
 }
 

src/webui/src/components/Package/package.scss

@@ -12,7 +12,7 @@ .package {
     font-size: 18px;
     color: $primary-color;
 
-    :global{
+    :global {
       .el-tag {
         margin-left: 5px;
       }
@@ -39,7 +39,7 @@ .package {
       filter: blur(5px);
     }
 
-    &:before {
+    &::before {
       display: block;
       position: absolute;
       top: 0;
@@ -49,7 +49,8 @@ .package {
       background: rgba(255, 255, 255, 0.7);
       content: '';
     }
-    &:after {
+
+    &::after {
       display: block;
       position: absolute;
       top: 50%;

src/webui/src/index.js

@@ -20,7 +20,7 @@ let renderApp = (Component) => {
 renderApp(App);
 
 if (module.hot) {
-  module.hot.accept('./App', () => {
+  module.hot.accept('./app', () => {
     renderApp(App);
   });
 }

src/webui/src/styles/global.scss

@@ -1,12 +1,17 @@
 @import "variable";
 
+body {
+  font-family: $font;
+}
+
 :global {
   .container {
     margin-top: $space-lg;
+
     @include container-size();
 
-      .el-loading-spinner {
-        margin-top: 0 !important;
-      }
+    .el-loading-spinner {
+      margin-top: 0 !important;
+    }
   }
 }

src/webui/src/styles/variable.scss

@@ -8,6 +8,7 @@ @mixin container-size {
 }
 
 $space-lg: 30px;
+$font: "'Source Sans Pro', 'Lucida Grande', sans-serif";
 
 /* Colors */
 $primary-color: #de4136;