Maintenance: Updated stylelint to version 14 and added prettier as a better preparation for future steps.

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

.stylelintrc.json

@@ -1,21 +1,38 @@
 {
-  "extends": ["stylelint-config-standard"],
-  "plugins": ["stylelint-scss"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
+    "stylelint-prettier/recommended"
+  ],
   "rules": {
-    "at-rule-no-unknown": null,
+    "alpha-value-notation": null,
     "block-no-empty": null,
+    "color-function-notation": "legacy",
     "declaration-block-no-duplicate-properties": null,
-    "declaration-block-no-shorthand-property-overrides":null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "declaration-block-no-shorthand-property-overrides": null,
     "declaration-block-single-line-max-declarations": null,
     "font-family-no-missing-generic-family-keyword": null,
-    "function-calc-no-unspaced-operator":null,
+    "function-calc-no-unspaced-operator": null,
     "function-comma-space-after": null,
+    "hue-degree-notation": null,
+    "keyframes-name-pattern": null,
     "max-empty-lines": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
+    "number-max-precision": null,
+    "selector-class-pattern": null,
     "selector-list-comma-newline-after": null,
+    "selector-no-vendor-prefix": null,
+    "selector-pseudo-element-no-unknown": null,
+    "scss/at-extend-no-missing-placeholder": null,
     "scss/at-rule-no-unknown": null,
-    "property-no-unknown": [true, { "ignoreProperties": ["scroll-snap-mode"] }]
+    "scss/dollar-variable-pattern": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "scss/no-global-function-names": null,
+    "value-no-vendor-prefix": null,
+    "property-no-unknown": [true, { "ignoreProperties": ["scroll-snap-mode"] }],
+    "property-no-vendor-prefix": null
   },
   "ignoreFiles": [
     "public/assets/*.css",

app/assets/stylesheets/custom/chat.css

@@ -6,6 +6,6 @@
 }
 
 #chat .well-chat {
-  padding: 8px 15px 0 15px;
+  padding: 8px 15px 0;
   margin: 0;
 }

app/assets/stylesheets/font.css

@@ -1,8 +1,7 @@
 @font-face {
   font-family: 'Fira Sans';
   src: url('fonts/FiraSans-Bold.eot');
-  src:
-    url('fonts/FiraSans-Bold.woff2') format('woff2'),
+  src: url('fonts/FiraSans-Bold.woff2') format('woff2'),
     url('fonts/FiraSans-Bold.woff') format('woff'),
     url('fonts/FiraSans-Bold.ttf') format('truetype');
   font-weight: bold;
@@ -12,8 +11,7 @@
 @font-face {
   font-family: 'Fira Sans';
   src: url('fonts/FiraSans-Regular.eot');
-  src:
-    url('fonts/FiraSans-Regular.woff2') format('woff2'),
+  src: url('fonts/FiraSans-Regular.woff2') format('woff2'),
     url('fonts/FiraSans-Regular.woff') format('woff'),
     url('fonts/FiraSans-Regular.ttf') format('truetype');
   font-weight: normal;
@@ -23,8 +21,7 @@
 @font-face {
   font-family: 'Fira Sans';
   src: url('fonts/FiraSans-Medium.eot');
-  src:
-    url('fonts/FiraSans-Medium.woff2') format('woff2'),
+  src: url('fonts/FiraSans-Medium.woff2') format('woff2'),
     url('fonts/FiraSans-Medium.woff') format('woff'),
     url('fonts/FiraSans-Medium.ttf') format('truetype');
   font-weight: 500;
@@ -34,8 +31,7 @@
 @font-face {
   font-family: 'Fira Sans';
   src: url('fonts/FiraSans-Light.eot');
-  src:
-    url('fonts/FiraSans-Light.woff2') format('woff2'),
+  src: url('fonts/FiraSans-Light.woff2') format('woff2'),
     url('fonts/FiraSans-Light.woff') format('woff'),
     url('fonts/FiraSans-Light.ttf') format('truetype');
   font-weight: 300;

app/assets/stylesheets/highlighter-github.css

@@ -10,7 +10,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
   padding: 0.5em;
   color: #333;
   background: #f8f8f8;
-  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
 }
 
 .hljs-comment,

app/assets/stylesheets/knowledge_base.scss

@@ -1,16 +1,16 @@
-@import "svg-dimensions";
-@import "font";
-
-$highlight-color: hsl(205,90%,60%);
-$color: hsl(207,7%,29%);
-$light-color: hsl(206,8%,50%);
-$dark-color: hsl(207,7%,19%);
-$subtle-color: hsl(207,14%,67%);
-$dropshadow: 0 2px 10px hsla(0,0%,0%,0.13);
-$light-bg: hsl(209,26%,98%);
-$dark-bg: hsl(209,22%,96%);
-$border: hsl(209,13%,95%);
-$dark-border: hsl(210,14%,91%);
+@import 'svg-dimensions';
+@import 'font';
+
+$highlight-color: hsl(205, 90%, 60%);
+$color: hsl(207, 7%, 29%);
+$light-color: hsl(206, 8%, 50%);
+$dark-color: hsl(207, 7%, 19%);
+$subtle-color: hsl(207, 14%, 67%);
+$dropshadow: 0 2px 10px hsla(0, 0%, 0%, 0.13);
+$light-bg: hsl(209, 26%, 98%);
+$dark-bg: hsl(209, 22%, 96%);
+$border: hsl(209, 13%, 95%);
+$dark-border: hsl(210, 14%, 91%);
 
 @mixin desktop {
   @media screen and (min-width: 1260px) {
@@ -40,7 +40,7 @@ $dark-border: hsl(210,14%,91%);
 @mixin bidi-style($prop, $value, $inverse-prop, $default-value) {
   #{$prop}: $value;
 
-  html[dir=rtl] & {
+  html[dir='rtl'] & {
     #{$inverse-prop}: $value;
     #{$prop}: $default-value;
   }
@@ -48,14 +48,14 @@ $dark-border: hsl(210,14%,91%);
 
 /* adds a property only in RTL */
 @mixin rtl($prop, $value) {
-  html[dir=rtl] & {
+  html[dir='rtl'] & {
     #{$prop}: $value;
   }
 }
 
 /* adds a property only in LTR */
 @mixin ltr($prop, $value) {
-  html[dir=ltr] & {
+  html[dir='ltr'] & {
     #{$prop}: $value;
   }
 }
@@ -84,7 +84,7 @@ $dark-border: hsl(210,14%,91%);
 }
 
 html {
-  font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
   color: $light-color;
@@ -173,30 +173,30 @@ b {
   font-size: 0.875em;
   display: flex;
   align-items: center;
-  background: hsl(200,87%,45%);
+  background: hsl(200, 87%, 45%);
   color: #fff;
   height: 45px;
   padding: 0 17px;
-  box-shadow: 0 -1px hsla(0,0%,0%,0.1) inset;
+  box-shadow: 0 -1px hsla(0, 0%, 0%, 0.1) inset;
 
-  &[data-color="yellow"] {
-    color: hsl(45,98%,17%);
-    background: hsl(45,98%,63%);
+  &[data-color='yellow'] {
+    color: hsl(45, 98%, 17%);
+    background: hsl(45, 98%, 63%);
   }
 
-  &[data-color="green"] {
+  &[data-color='green'] {
     color: white;
-    background: hsl(145,52%,45%);
+    background: hsl(145, 52%, 45%);
   }
 
-  &[data-color="red"] {
+  &[data-color='red'] {
     color: white;
-    background: hsl(19,90%,51%);
+    background: hsl(19, 90%, 51%);
   }
 
-  &[data-color="grey"] {
-    color: hsl(45,98%,17%);
-    background: hsl(0,0%,80%);
+  &[data-color='grey'] {
+    color: hsl(45, 98%, 17%);
+    background: hsl(0, 0%, 80%);
   }
 
   &-tag {
@@ -227,7 +227,7 @@ b {
     border-radius: 4px;
     height: 30px;
     padding: 0 11px;
-    border: 1px solid hsla(0,0%,0%,0.1);
+    border: 1px solid hsla(0, 0%, 0%, 0.1);
 
     & + & {
       margin-left: 10px;
@@ -280,7 +280,7 @@ b {
 }
 
 .menu {
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -308,7 +308,7 @@ b {
     position: relative;
     font-size: 17px;
 
-    input[type="search"] {
+    input[type='search'] {
       appearance: none;
       width: 100%;
       font-size: inherit;
@@ -377,7 +377,7 @@ b {
     position: relative;
 
     &:hover {
-      border-color: hsl(209,13%,93%);
+      border-color: hsl(209, 13%, 93%);
       background: $dark-bg;
     }
   }
@@ -388,7 +388,7 @@ b {
     @include bidi-style(left, 0.6em, right, 0);
 
     top: 0.6em;
-    color: hsl(210,22%,84%);
+    color: hsl(210, 22%, 84%);
 
     .icon {
       width: 1.5em;
@@ -406,7 +406,7 @@ b {
   &-title {
     font-size: inherit;
     font-weight: 500;
-    color: hsl(206,8%,38%);
+    color: hsl(206, 8%, 38%);
     margin: 0 0 0.25em;
   }
 
@@ -415,7 +415,7 @@ b {
     display: inline-block;
 
     &::after {
-      content: " — ";
+      content: ' — ';
     }
   }
 
@@ -425,7 +425,7 @@ b {
   }
 
   &-preview {
-    color: hsl(207,12%,50%);
+    color: hsl(207, 12%, 50%);
   }
 }
 
@@ -467,7 +467,7 @@ b {
     color: $dark-color;
 
     .icon-hashtag {
-      fill: hsl(208,13%,81%);
+      fill: hsl(208, 13%, 81%);
       width: 0.7em;
       height: 0.7em;
     }
@@ -491,7 +491,7 @@ b {
   .icon {
     width: 120px;
     height: 118px;
-    fill: hsl(41,100%,49%);
+    fill: hsl(41, 100%, 49%);
 
     + h1 {
       margin-top: 0.66em;
@@ -555,7 +555,7 @@ b {
 
   &::after,
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     width: 1px;
     height: 40%;
@@ -638,7 +638,7 @@ b {
 
   & + hr {
     border: none;
-    border-top: 1px solid hsl(219,13%,95%);
+    border-top: 1px solid hsl(219, 13%, 95%);
     margin: 28px 0 13px;
   }
 }
@@ -798,7 +798,7 @@ b {
 
     &-preview {
       &::before {
-        content: " — ";
+        content: ' — ';
         color: initial;
       }
     }
@@ -822,7 +822,7 @@ b {
   font-family: inherit;
   font-size: 16px;
   border: none;
-  background: hsl(210,14%,97%);
+  background: hsl(210, 14%, 97%);
   margin: 0;
   padding: 5px 10px;
   min-width: 62px;
@@ -836,7 +836,8 @@ b {
   }
 }
 
-.sections--list, .sections--compact-text {
+.sections--list,
+.sections--compact-text {
   .icon,
   [data-font] {
     @include ltr(margin, 4px 9px 0 3px);
@@ -888,7 +889,9 @@ b {
     margin: 0 0 1em;
   }
 
-  table, pre, blockquote {
+  table,
+  pre,
+  blockquote {
     margin-bottom: 16px;
 
     &:first-child {
@@ -906,9 +909,7 @@ b {
     border-style: hidden;
     border-collapse: collapse;
     font-variant-numeric: lining-nums tabular-nums;
-    box-shadow:
-      0 0 0 1px hsl(210,5%,92%),
-      0 2px hsl(210,5%,92%);
+    box-shadow: 0 0 0 1px hsl(210, 5%, 92%), 0 2px hsl(210, 5%, 92%);
     border-radius: 2px;
   }
 
@@ -936,17 +937,18 @@ b {
     }
   }
 
-  td, th {
+  td,
+  th {
     padding: 6px 10px;
-    border: 1px solid hsl(210,5%,92%);
+    border: 1px solid hsl(210, 5%, 92%);
   }
 
   th {
-    background: hsl(210,5%,96%);
+    background: hsl(210, 5%, 96%);
   }
 
   td {
-    text-align: "." center;
+    text-align: '.' center;
   }
 
   table col {
@@ -960,7 +962,7 @@ b {
 
   code {
     border: none;
-    background: hsl(0,0%,97%);
+    background: hsl(0, 0%, 97%);
     white-space: pre-wrap;
   }
 
@@ -968,7 +970,7 @@ b {
     padding: 12px 15px;
     font-size: 13px;
     line-height: 1.45;
-    background: hsl(0,0%,97%);
+    background: hsl(0, 0%, 97%);
     white-space: pre-wrap;
     border-radius: 3px;
     border: none;
@@ -979,7 +981,7 @@ b {
     margin-top: 13px;
     margin-bottom: 13px;
     border: none;
-    border-top: 1px solid hsl(210,14%,91%);
+    border-top: 1px solid hsl(210, 14%, 91%);
   }
 }
 
@@ -1004,7 +1006,7 @@ b {
     top: 2rem;
     width: 2rem;
     height: 2rem;
-    fill: hsl(208,13%,81%);
+    fill: hsl(208, 13%, 81%);
 
     @include phone {
       left: 0.5rem;
@@ -1077,7 +1079,7 @@ b {
   margin-top: auto;
   border-top: 1px solid $dark-border;
   background: $light-bg;
-  color: hsl(210,8%,50%);
+  color: hsl(210, 8%, 50%);
   font-size: 12px;
 
   &-menu {
@@ -1100,13 +1102,13 @@ b {
 .not-published-note {
   margin: 0.1em 0 0;
   font-size: 0.65em;
-  color: hsl(0,0,50%);
+  color: hsl(0, 0, 50%);
 }
 
 .btn {
   display: inline-block;
   padding: 10px 24px 9px;
-  border: 1px solid hsla(0,0%,0%,0.1);
+  border: 1px solid hsla(0, 0%, 0%, 0.1);
   color: inherit;
   outline: none !important;
   border-radius: 4px;
@@ -1117,7 +1119,7 @@ b {
   @extend %clickable;
 
   &--onDark {
-    border-color: hsla(0,0%,100%,0.3);
+    border-color: hsla(0, 0%, 100%, 0.3);
     color: white;
   }
 
@@ -1172,7 +1174,7 @@ b {
   }
 }
 
-.btn[data-toggle="dropdown"] {
+.btn[data-toggle='dropdown'] {
   text-decoration: none;
 }
 
@@ -1188,10 +1190,8 @@ b {
     list-style: none;
     font-size: 14px;
     border-radius: 3px;
-    box-shadow:
-      0 50px 100px hsla(200,30%,30%,0.1),
-      0 15px 35px hsla(200,30%,30%,0.15),
-      0 5px 15px hsla(0,0%,0%,0.1);
+    box-shadow: 0 50px 100px hsla(200, 30%, 30%, 0.1),
+      0 15px 35px hsla(200, 30%, 30%, 0.15), 0 5px 15px hsla(0, 0%, 0%, 0.1);
     background: white;
     padding: 10px;
 
@@ -1200,7 +1200,7 @@ b {
     }
 
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       top: -6px;
       left: 30px;
@@ -1208,7 +1208,7 @@ b {
       height: 20px;
       -webkit-transform: rotate(45deg);
       transform: rotate(45deg);
-      border-radius: 3px 0 20px 0;
+      border-radius: 3px 0 20px;
       background: white;
     }
 
@@ -1231,7 +1231,7 @@ b {
       &::before {
         top: auto;
         bottom: -6px;
-        border-radius: 20px 0 3px 0;
+        border-radius: 20px 0 3px;
       }
     }
 
@@ -1254,7 +1254,7 @@ b {
         cursor: default;
 
         a {
-          color: hsl(0,0%,72%);
+          color: hsl(0, 0%, 72%);
 
           &:hover,
           &:focus {
@@ -1275,7 +1275,7 @@ b {
 
       &:hover,
       &:focus {
-        background: hsl(200,5%,95%);
+        background: hsl(200, 5%, 95%);
       }
     }
 
@@ -1294,8 +1294,8 @@ b {
 }
 
 .language-banner {
-  background: hsl(234,10%,19%);
-  color: hsl(234,5%,80%);
+  background: hsl(234, 10%, 19%);
+  color: hsl(234, 5%, 80%);
   display: flex;
 
   &-text {

app/assets/stylesheets/print.scss

@@ -4,11 +4,11 @@
 }
 
 .table {
-  border: 1px solid hsl(0,0%,90%);
+  border: 1px solid hsl(0, 0%, 90%);
 }
 
 .table thead tr {
-  border-bottom: 1px solid hsl(0,0%,90%);
+  border-bottom: 1px solid hsl(0, 0%, 90%);
 }
 
 html {
@@ -65,7 +65,14 @@ main {
   padding: 0;
 }
 
-h1, .popover-notificationsHeader .popover-title, .ticket-title-update, h2, h3, h4, h5, h6 {
+h1,
+.popover-notificationsHeader .popover-title,
+.ticket-title-update,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: inherit;
 }
 
@@ -88,7 +95,7 @@ td a {
   display: none;
 }
 
-th.js-tableHead:not([data-column-key="icon"]) {
+th.js-tableHead:not([data-column-key='icon']) {
   width: auto !important;
 }
 
@@ -158,7 +165,7 @@ th.js-tableHead:not([data-column-key="icon"]) {
 .article-meta {
   color: black;
   background: none;
-  border: 1px dashed hsl(240,2%,60%);
+  border: 1px dashed hsl(240, 2%, 60%);
   padding: 11px 10px 1px;
 
   &.top {
@@ -232,8 +239,6 @@ th.js-tableHead:not([data-column-key="icon"]) {
   }
 }
 
-
-
 /*
 
   Modal

package.json

@@ -1,13 +1,16 @@
 {
-  "name": "zammad",
-  "version": "1.0.0",
   "scripts": {
     "lint:css": "stylelint \"**/*.{css,scss}\"",
     "lint:css:fix": "stylelint \"**/*.{css,scss}\" --fix"
   },
   "devDependencies": {
-    "stylelint": "13.x",
-    "stylelint-config-standard": "22.x",
-    "stylelint-scss": "3.x"
+    "postcss": "^8.3.9",
+    "postcss-html": "^1.0.1",
+    "prettier": "2.4.1",
+    "stylelint": "^14.0.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^23.0.0",
+    "stylelint-config-standard-scss": "^2.0.0",
+    "stylelint-prettier": "^1.2.0"
   }
 }

public/assets/chat/chat.css

@@ -63,7 +63,8 @@
   color: white;
   line-height: 2.5em;
   height: 3.5em;
-  box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset, 0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
+  box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset,
+    0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
   position: relative;
   border-radius: 5px 5px 0 0;
   overflow: hidden;
@@ -96,7 +97,7 @@
 }
 
 .zammad-chat-header-icon::before {
-  content: "";
+  content: '';
   display: inline-block;
 }
 
@@ -151,7 +152,7 @@
 }
 
 .zammad-chat-agent-status::before {
-  content: "";
+  content: '';
   background: #f35912;
   display: inline-block;
   height: 0.9em;
@@ -163,11 +164,11 @@
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
 }
 
-.zammad-chat-agent-status[data-status="online"]::before {
+.zammad-chat-agent-status[data-status='online']::before {
   background: #52c782;
 }
 
-.zammad-chat-agent-status[data-status="connecting"]::before {
+.zammad-chat-agent-status[data-status='connecting']::before {
   animation: linear connect-fade 600ms infinite alternate;
   background: #faab00;
 }
@@ -299,7 +300,8 @@
   background: #ededed;
   display: inline-block;
   max-width: 70%;
-  box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
+  box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset,
+    0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
 }
 
 .zammad-chat-status-inner {
@@ -346,7 +348,9 @@
   animation-delay: 0.13s;
 }
 
-.zammad-chat-loading-circle + .zammad-chat-loading-circle + .zammad-chat-loading-circle {
+.zammad-chat-loading-circle
+  + .zammad-chat-loading-circle
+  + .zammad-chat-loading-circle {
   animation-delay: 0.26s;
 }
 
@@ -421,7 +425,8 @@
   cursor: pointer;
   border: none;
   border-radius: 1.5em;
-  box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset,
+    0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
   display: inline-block;
 }