Add stylelint

.gitlab-ci.yml

@@ -9,7 +9,15 @@ eslint:
   before_script:
    - npm install
   script:
-    - npm run lint
+    - npm run eslint
+
+stylelint:
+  stage: test
+  image: node:latest
+  before_script:
+   - npm install
+  script:
+    - npm run stylelint
 
 build_master:
   stage: build

.stylelintrc

+{
+  "rules": {
+    "color-no-invalid-hex": true,
+    "font-family-no-duplicate-names": true,
+    "font-family-no-missing-generic-family-keyword": true,
+    "function-calc-no-unspaced-operator": true,
+    "string-no-newline": true,
+    "unit-no-unknown": true,
+    "property-no-unknown": true,
+    "declaration-block-no-duplicate-properties": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "block-no-empty": true,
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-no-unknown": true,
+    "media-feature-name-no-unknown": true,
+    "at-rule-no-unknown": true,
+    "comment-no-empty": true,
+    "no-duplicate-at-import-rules": true,
+    "no-duplicate-selectors": true,
+    "no-empty-source": true,
+    "no-extra-semicolons": true,
+    "color-named": "never",
+    "function-url-no-scheme-relative": true,
+    "function-url-scheme-blacklist": ["ftp"],
+    "function-url-scheme-whitelist": ["data", "/^http/"],
+    "number-max-precision": 2,
+    "shorthand-property-no-redundant-values": true,
+    "value-no-vendor-prefix": true,
+    "property-no-vendor-prefix": true,
+    "declaration-block-no-redundant-longhand-properties": true,
+    "declaration-block-single-line-max-declarations": 1,
+    "selector-max-attribute": 2,
+    "selector-max-empty-lines": 0,
+    "selector-max-id": 2,
+    "selector-max-pseudo-class": 1,
+    "selector-max-universal": 2,
+    "selector-no-vendor-prefix": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "at-rule-no-vendor-prefix": true,
+    "comment-word-blacklist": ["/^TODO/"],
+    "max-nesting-depth": 3,
+    "no-unknown-animations": true,
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "font-family-name-quotes": "always-where-recommended",
+    "font-weight-notation": "named-where-possible",
+    "function-comma-newline-after": "always-multi-line",
+    "function-comma-newline-before": "never-multi-line",
+    "function-comma-space-after": "always",
+    "function-comma-space-before": "never",
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never",
+    "function-url-quotes": ["always", {
+      except: ["empty"]
+    }],
+    "function-whitespace-after": "always",
+    "number-leading-zero": "never",
+    "number-no-trailing-zeros": true,
+    "string-quotes": "single",
+    "length-zero-no-unit": true,
+    "unit-case": "lower",
+    "value-keyword-case": "lower",
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+    "custom-property-empty-line-before": "never",
+    "property-case": "lower",
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-empty-line-before": "never",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-attribute-quotes": "always",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "single",
+    "selector-type-case": "lower",
+    "selector-list-comma-newline-after": "always-multi-line",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-after": "never",
+    "selector-list-comma-space-before": "never",
+    "rule-empty-line-before": ["always", {
+      "except": ["after-single-line-comment", "first-nested"]
+    }],
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-query-list-comma-newline-after": "never-multi-line",
+    "media-query-list-comma-newline-before": "never-multi-line",
+    "media-query-list-comma-space-after": "always",
+    "media-query-list-comma-space-before": "never",
+    "at-rule-empty-line-before": ["always", {
+      "ignore": ["after-comment", "first-nested", "blockless-after-blockless"]
+    }],
+    "at-rule-name-case": "lower",
+    "at-rule-name-newline-after": "always-multi-line",
+    "at-rule-name-space-after": "always-single-line",
+    "at-rule-semicolon-newline-after": "always",
+    "at-rule-semicolon-space-before": "never",
+    "comment-whitespace-inside": "always",
+    "indentation": 2,
+    "max-empty-lines": 1,
+    "no-eol-whitespace": true,
+    "no-missing-end-of-source-newline": true
+  }
+}
\ No newline at end of file

package.json

@@ -10,7 +10,9 @@
     "start": "webpack -d --watch",
     "build": "webpack -p --config webpack.config.prod.js",
     "server": "webpack-dev-server --hot --inline",
-    "lint": "eslint src/**",
+    "lint": "npm run eslint && npm run stylelint",
+    "eslint": "eslint src/**",
+    "stylelint": "stylelint 'src/**/*.less' --synthax less",
     "format": "prettier --write '**/*.{js,jsx}'"
   },
   "repository": {
@@ -47,6 +49,7 @@
     "eslint-import-resolver-webpack": "^0.9.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-prettier": "^2.6.0",
+    "stylelint": "^9.3.0",
     "file-loader": "^1.1.11",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",

src/components/Card.less

@@ -4,7 +4,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background-color: yellow;
+  background-color: #ff0;
   background-size: cover;
   background-position: centre-centre;
 }

src/views/styles/base.less

@@ -11,62 +11,62 @@
 @import './jobofferList.less';
 
 html,body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 16px;
-    box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  box-sizing: border-box;
 
-    @media @tablet, @mobile {
-        font-size: 18px;
-    }
+  @media @tablet, @mobile {
+    font-size: 18px;
+  }
 
-    > div {
-        width: 100%;
-        min-height: 100%;
-        display: grid;
-        grid-template-rows: auto 1fr auto;
-        grid-template-areas:
-          "header"
-          "content"
-          "footer";
-    }
+  > div {
+    width: 100%;
+    min-height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+      'header'
+      'content'
+      'footer';
+  }
 }
 
 section {
-    width: 100%;
+  width: 100%;
 
-    &.blue {
-        background-color: @color-dark-blue;
-    }
+  &.blue {
+    background-color: @color-dark-blue;
+  }
 
-    &.grey {
-        background-color: @color-grey;
-    }
+  &.grey {
+    background-color: @color-grey;
+  }
 
-    > * {
-        max-width: @dimension-max-content-width;
-        padding: 0 1em;
-        margin: 0 auto;
-    }
+  > * {
+    max-width: @dimension-max-content-width;
+    padding: 0 1em;
+    margin: 0 auto;
+  }
 }
 
 main {
-    width: 100%;
-    min-height: 100%;
+  width: 100%;
+  min-height: 100%;
 
-    > * {
-        max-width: @dimension-max-content-width;
-        padding: 0 1em;
-        margin: 0 auto;
-    }
+  > * {
+    max-width: @dimension-max-content-width;
+    padding: 0 1em;
+    margin: 0 auto;
+  }
 }
 
 #amiv-container {
-    max-width: @dimension-max-content-width;
-    display: block;
-    margin: 0 auto;
-    font-family: Arial, Helvetica, sans-serif;
+  max-width: @dimension-max-content-width;
+  display: block;
+  margin: 0 auto;
+  font-family: Arial, Helvetica, sans-serif;
 }

src/views/styles/eventDetails.less

@@ -2,4 +2,4 @@
   button {
     margin-right: 1em;
   }
-}
\ No newline at end of file
+}

src/views/styles/eventList.less

 @import './listview.less';
 
 #event-list {
-    .listview;
-    div {
-      border: none;
-    }
+  .listview;
 
-    .registration {
-      background-color: #FFF;
-    }
+  div {
+    border: none;
+  }
 
-    .upcoming {
-      background-color: #BBB;
-    }
+  .registration {
+    background-color: #fff;
+  }
 
-    .past {
-      background-color: #777;
-    }
-}
\ No newline at end of file
+  .upcoming {
+    background-color: #bbb;
+  }
+
+  .past {
+    background-color: #777;
+  }
+}

src/views/styles/frontpage.less

 #frontpage-container {
-    // Grid general settings
+  // Grid general settings
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: 30px;
+  align-content: center;
+  text-align: center;
+  border: none;
+
+  h2 {
+    text-align: center;
+    color: #00f;
+    grid-column: ~'1 / 13';
+  }
+
+  // Hot sector on the frontpage
+  .hot-row {
+    // Grid of 12 frame colums
+    grid-column: ~'1 / 13';
+    grid-row-start: 2;
+
+    // Grid declaration for sub items, 2 frame columns
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     grid-gap: 30px;
-    align-content: center;
-    text-align: center;
     border: none;
 
-    h2 {
-        text-align: center;
-        color: blue;
-        grid-column-start: 1;
-        grid-column-end: 13;
+    .hot-first-card {
+      background-color: #f00;
+      grid-column: ~'1 / 3';
+      grid-row: ~'1 / 3';
+      padding-top: (9 / 16) * 100%;
+      position: relative;
+      height: 0;
     }
-    
-    // Hot sector on the frontpage
-    .hot-row {
-        // Grid of 12 frame colums
-        grid-column-start: 1;
-        grid-column-end: 13;
-        grid-row-start: 2;
-
-        // Grid declaration for sub items, 2 frame columns
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 30px;
-        border: none;
-
-        .hot-first-card {
-            background-color: red;
-            grid-column-start: 1;
-            grid-column-end: 3;
-            grid-row-start: 1;
-            grid-row-end: 3;
-            padding-top: (9 / 16) * 100%;
-            position: relative; 
-            height: 0;
-        }
-
-        .hot-card {
-            grid-column: 3 / 4;
-            position: relative; 
-        }
+
+    .hot-card {
+      grid-column: ~'3 / 4';
+      position: relative;
     }
+  }
 
-    .frontpage-row{
-        grid-column-start: 1;
-        grid-column-end: 13;
+  .frontpage-row {
+    grid-column: ~'1 / 13';
 
-        // Grid declaration for sub items, 3 frame columns
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 30px;
+    // Grid declaration for sub items, 3 frame columns
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 30px;
 
-        .frontpage-row-card{
-            padding-top: (9 / 16) * 100%;
-            position: relative; 
-            height: 0;
-        }
+    .frontpage-row-card {
+      padding-top: (9 / 16) * 100%;
+      position: relative;
+      height: 0;
     }
+  }
 }

src/views/styles/header.less

@@ -34,231 +34,224 @@ header {
   font-size: 1.2em;
   z-index: 1000;
 
-  section.blue > nav {
-    display: grid;
-    grid-area: navigation;
-    height: @dimension-desktop-header-height;
-
-    @media @wide, @desktop {
-      grid-template-columns: auto 1fr auto auto auto;
-      grid-template-areas:
-          'logo main-navigation profile language-switcher';
-    }
+  section.grey {
+    height: @dimension-desktop-submenu-height;
 
-    @media @tablet {
-      grid-template-columns: auto 1fr auto auto;
-      grid-template-areas:
-          'logo main-navigation language-switcher';
+    @media @mobile {
+      display: none;
     }
+  }
+}
 
-    @media @mobile {
-      grid-template-columns: 1fr auto auto;
-      grid-template-areas:
-          'logo language-switcher mobile-menu'
-          'main-navigation main-navigation main-navigation'
-          'profile profile profile';
-      height: auto;
-      max-height: @dimension-mobile-header-height;
-      overflow: hidden;
+header nav {
+  display: grid;
+  grid-area: navigation;
+  height: @dimension-desktop-header-height;
 
-      &.expanded {
-        max-height: 1000px;
-      }
-    }
+  @media @wide, @desktop {
+    grid-template-columns: auto 1fr auto auto auto;
+    grid-template-areas: 'logo main-navigation profile language-switcher';
+  }
 
-    .logo {
-      grid-area: logo;
-      height: @dimension-desktop-header-height;
+  @media @tablet {
+    grid-template-columns: auto 1fr auto auto;
+    grid-template-areas: 'logo main-navigation language-switcher';
+  }
 
-      @media @mobile {
-        height: @dimension-mobile-header-height;
-      }
+  @media @mobile {
+    grid-template-columns: 1fr auto auto;
+    grid-template-areas:
+      'logo language-switcher mobile-menu'
+      'main-navigation main-navigation main-navigation'
+      'profile profile profile';
+    height: auto;
+    max-height: @dimension-mobile-header-height;
+    overflow: hidden;
+
+    &.expanded {
+      max-height: 1000px;
     }
+  }
+}
 
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      height: 100%;
+header .logo {
+  grid-area: logo;
+  height: @dimension-desktop-header-height;
 
-      @media @mobile {
-        width: 100%;
-      }
+  @media @mobile {
+    height: @dimension-mobile-header-height;
+  }
+}
 
-      li {
-        display: inline-block;
-        height: 100%;
+header ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100%;
 
-        @media @mobile {
-          width: 100%;
-          height: auto;
-          text-align: center;
-          border-bottom: 1px solid @color-grey;
-        }
-      }
-    }
+  @media @mobile {
+    width: 100%;
+  }
 
-    ul.mainmenu {
-      .mainmenu-template;
-      grid-area: main-navigation;
-
-      li {
-        &.active {
-          background-color: @color-grey;
-          ul.submenu {
-            display: block;
-            visibility: visible;
-            z-index: 1005;
-          }
-        }
-
-        @media @wide, @desktop, @tablet {
-          &:hover {
-            ul.submenu {
-              visibility: visible;
-            }
-          }
-        }
-
-        > a {
-          display: block;
-          height: 100%;
-          line-height: @dimension-desktop-header-height;
-          padding: 0 1.3em;
-          color: #fff;
-          text-decoration: none;
-
-          &:hover {
-            color: @color-red;
-          }
-        }
-      }
+  li {
+    display: inline-block;
+    height: 100%;
+
+    @media @mobile {
+      width: 100%;
+      height: auto;
+      text-align: center;
+      border-bottom: 1px solid @color-grey;
     }
+  }
+}
+
+header ul.mainmenu {
+  .mainmenu-template;
+  grid-area: main-navigation;
+
+  li.active {
+    background-color: @color-grey;
 
     ul.submenu {
       display: block;
-      visibility: hidden;
-
-      @media @wide, @desktop, @tablet {
-        position: absolute;
-        top: @dimension-desktop-header-height;
-        left: 0;
-        width: 100%;
-        height: @dimension-desktop-submenu-height;
-        text-align: center;
-        background-color: @color-grey;
-        z-index: 1010;
-        transition-delay: 150ms;
-        transition-property: visibility;
-      }
+      visibility: visible;
+      z-index: 1005;
+    }
+  }
 
-      @media @tablet {
-        // NOTE: Adjust this value when profile menu changes!
-        width: calc(100% - 190px);
-      }
+  @media @wide, @desktop, @tablet {
+    li:hover ul.submenu {
+      visibility: visible;
+    }
+  }
+
+  li > a {
+    display: block;
+    height: 100%;
+    line-height: @dimension-desktop-header-height;
+    padding: 0 1.3em;
+    color: #fff;
+    text-decoration: none;
+  }
+
+  li > a:hover {
+    color: @color-red;
+  }
+}