Upgrade prettier and stylelint (#2146)

* ⬆️ Upgrade prettier * 💄 Lint and prettify cookbook styles * 🎨 Lint and prettify cookbook ts files * 🎨 Lint and prettify cookbook templates * 🔧 Update prettier and stylelint config * 🎨 Lint and prettify misc project files * 🎨 Lint and prettify designsystem styles * 🤡 Use same line endings across mocks * 🎨 Lint and prettify designsystem spec files * 🎨 Lint and prettify designsystem ts files * 💄 Rename css-class in template * ✅ Fix tab test according to changed css * 🙈 Update ignore files with newline at EOF * ♻️ Increase readability of span * 🔧 Prettify .stylelintrc (whoa, meta!) * ➖ Remove unused depencency * 💄 Replace duplicate ::after with ::before for print * ⏪ Revert unintentional prettier change * 🔥 Remove vendor prefix This is handled by Angular via auto-prefixer. * ⏪ Revert unintentional change to line clamp styles
kirbydesign · Apr 1, 2022 · 6ebc263 · 6ebc263
1 parent a14fea3
commit 6ebc263
Show file tree

Hide file tree

Showing 298 changed files with 3,549 additions and 4,826 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,10 +1,11 @@
-/src/kirby/scss/base/_include-media.scss
 /.github/
 /libs/designsystem/src/lib/components/web-component-proxies.component.ts
 /libs/designsystem/src/lib/components/angular-component-lib/**
+/libs/core/scss/**
 /libs/core/dist/**
 /libs/core/loader/**
 /libs/core/component-docs.d.ts
 /libs/core/component-docs.json
 /libs/core/src/components.d.ts
-/libs/**/readme.md
+/libs/**/readme.md
+/node_modules/
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,12 @@
-/src/kirby/scss/base/_include-media.scss
+libs/core/scss/**
+/.github/
+/libs/designsystem/src/lib/components/web-component-proxies.component.ts
+/libs/designsystem/src/lib/components/angular-component-lib/**
+/libs/core/scss/**
+/libs/core/dist/**
+/libs/core/loader/**
+/libs/core/component-docs.d.ts
+/libs/core/component-docs.json
+/libs/core/src/components.d.ts
+/libs/**/readme.md
+/node_modules/
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,6 +1,25 @@
 {
-  "plugins": ["stylelint-prettier"],
-  "extends": ["stylelint-prettier/recommended"],
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
   "rules": {
+    "scss/at-mixin-pattern": [
+      "^(-?_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Expected mixin name to be kebab-case"
+      }
+    ],
+    "scss/at-function-pattern": [
+      "^(-?_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Expected function name to be kebab-case"
+      }
+    ],
+    "scss/dollar-variable-pattern": [
+      "^(-?_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Expected variable to be kebab-case"
+      }
+    ],
+    "scss/at-extend-no-missing-placeholder": null,
+    "no-descending-specificity": null
   }
 }
diff --git a/apps/cookbook/karma.conf.js b/apps/cookbook/karma.conf.js
@@ -4,7 +4,7 @@
 const { join } = require('path');
 const getBaseKarmaConfig = require('../../karma.conf');
 
-module.exports = function(config) {
+module.exports = function (config) {
   const baseConfig = getBaseKarmaConfig();
   config.set({
     ...baseConfig,

diff --git a/apps/cookbook/src/app/accessibility/accessibility-guidelines.html b/apps/cookbook/src/app/accessibility/accessibility-guidelines.html
@@ -2,9 +2,7 @@
   <h1>Accessibility in Kirby</h1>
 
   <h2>Can Kirby make an application accessible?</h2>
-  <p>
-    The short answer is no.
-  </p>
+  <p>The short answer is no.</p>
   <p>
     The accessibility of an application largely depends on its markup. In other words, it depends on
     how the components in Kirby are used. The role of the components is to allow for developers to
@@ -32,9 +30,7 @@ <h2>Can Kirby make an application accessible?</h2>
       >exploring new ways of improving your product for everyone</a
     >.
   </p>
-  <p>
-    So where do you begin? Our suggestion is to read on!
-  </p>
+  <p>So where do you begin? Our suggestion is to read on!</p>
 
   <h3>Mindset - what is accessibility?</h3>
   <p>
@@ -43,9 +39,7 @@ <h3>Mindset - what is accessibility?</h3>
   </p>
 
   <h4>Accessibility is not a feature</h4>
-  <p>
-    Accessibility is not something that is tagged onto an application like a feature.
-  </p>
+  <p>Accessibility is not something that is tagged onto an application like a feature.</p>
   <p>
     <strong>All</strong> applications have some degree of accessibility, whether it is considered or
     not. If it is not actively prioritized, the accessibility of an application is most likely poor.
@@ -134,9 +128,7 @@ <h3>Do not be in the way</h3>
     allows for accessibility. On the contrary, it is also possible to use them in a lot of
     completely inaccessible ways.
   </p>
-  <p>
-    But the components in Kirby should never be in the way of making an application accessible.
-  </p>
+  <p>But the components in Kirby should never be in the way of making an application accessible.</p>
   <p>
     If a developer ever experiences that a Kirby component causes problems when working with
     accessibility; do not hesitate to create an issue in the
@@ -231,9 +223,7 @@ <h3>Topics for exploration</h3>
   <h3>Resources</h3>
   <p>
     While a11y.coffee has a
-    <a target="blank" href="https://a11y.coffee/dig-in/">
-      list of resources
-    </a>
+    <a target="blank" href="https://a11y.coffee/dig-in/"> list of resources </a>
     to further explore the field of accessibility, we would like to supplement that with some of our
     own resources:
   </p>

diff --git a/apps/cookbook/src/app/app.component.scss b/apps/cookbook/src/app/app.component.scss
diff --git a/apps/cookbook/src/app/app.component.ts b/apps/cookbook/src/app/app.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'cookbook-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'Kirby design system';

diff --git a/apps/cookbook/src/app/component-status/component-status.component.scss b/apps/cookbook/src/app/component-status/component-status.component.scss
@@ -12,6 +12,7 @@
 
 .github-error {
   font-style: italic;
+
   ion-icon[name='alert'] {
     font-size: 24px;
     vertical-align: text-bottom;
@@ -44,6 +45,7 @@
   tr {
     &.component {
       vertical-align: middle;
+      border-top: 0.1rem solid utils.get-color('medium');
 
       .component {
         ion-icon {
@@ -66,10 +68,6 @@
       }
     }
 
-    &.component {
-      border-top: 0.1rem solid utils.get-color('medium');
-    }
-
     &.subcomponent,
     &.enhancement {
       vertical-align: middle;
@@ -101,6 +99,7 @@
       &-subcomponent td:first-child {
         padding-left: 2rem;
       }
+
       ion-icon[name='add-circle'] {
         font-size: 16px;
         vertical-align: sub;
@@ -126,7 +125,7 @@
     }
   }
 
-  a[href^="https://"] ion-icon {
+  a[href^='https:\/\/'] ion-icon {
     vertical-align: sub;
     font-size: 18px;
 
@@ -140,6 +139,7 @@
 
     &.version {
       margin-left: 0.5rem;
+
       --ion-color-base: #{utils.get-color('semi-dark')};
       --ion-color-contrast: #{utils.get-color('white')};
     }

diff --git a/apps/cookbook/src/app/component-status/component-status.component.ts b/apps/cookbook/src/app/component-status/component-status.component.ts
@@ -198,7 +198,8 @@ export class ComponentStatusComponent implements OnInit, OnDestroy {
     // https://app.zeplin.io/project/5e1f27f01ffb15bd95efc426/screen/5e46809806041da857a4bf49
     // https://app.zeplin.io/styleguide/5e7094006caa6013a71590b8/components?seid=5e466bc4394e31b73d693e4e
     // https://app.zeplin.io/styleguide/5e734ec04ee3d6bac20654e2/components?cseid=5fa2b58acbcb0e8512f515ee
-    const regex = /(https:\/\/(app\.zeplin|zpl)\.io\/)((project\/[a-z,0-9]{24}\/screen\/[a-z,0-9]{24})|(\b(?!project)[a-z,0-9]{7}\b)|(styleguide\/[a-z,0-9]{24}\/components\?(seid|cseid)\=[a-z,0-9]{24}))/i;
+    const regex =
+      /(https:\/\/(app\.zeplin|zpl)\.io\/)((project\/[a-z,0-9]{24}\/screen\/[a-z,0-9]{24})|(\b(?!project)[a-z,0-9]{7}\b)|(styleguide\/[a-z,0-9]{24}\/components\?(seid|cseid)\=[a-z,0-9]{24}))/i;
     let matches = issue.body.match(regex);
     const url = matches ? matches[0] : null;
     return url;

diff --git a/apps/cookbook/src/app/designer/card-designer/card-designer.component.scss b/apps/cookbook/src/app/designer/card-designer/card-designer.component.scss
@@ -12,16 +12,21 @@ cookbook-card-example {
   display: inline-block;
   width: 257px;
   height: 362px;
+
   --kirby-card-background-image: url('/assets/kirby/backgrounds/kirby-card.png');
+
   &.show-background {
-    --kirby-example-wireframe-color: rgba(255, 0, 0, 0.5);
+    --kirby-example-wireframe-color: rgb(255 0 0 / 50%);
+
     background-image: var(--kirby-card-background-image);
     background-position: -1px -1px;
     background-repeat: no-repeat;
     background-size: 257px;
+
     &.dim-background {
       --kirby-example-wireframe-color: red;
-      background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+
+      background-image: linear-gradient(rgb(255 255 255 / 50%), rgb(255 255 255 / 50%)),
         var(--kirby-card-background-image);
 
       footer kirby-button {

diff --git a/apps/cookbook/src/app/examples/avatar-example/examples/badge.scss b/apps/cookbook/src/app/examples/avatar-example/examples/badge.scss
@@ -1,5 +1,5 @@
 @use 'avatar-examples.shared.scss';
-@use "~@kirbydesign/core/src/scss/utils";
+@use '~@kirbydesign/core/src/scss/utils';
 
 :host {
   padding: utils.size('l');

diff --git a/apps/cookbook/src/app/examples/badge-example/badge-example.component.scss b/apps/cookbook/src/app/examples/badge-example/badge-example.component.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use '~@kirbydesign/core/src/scss/utils';
 
 :host {

diff --git a/apps/cookbook/src/app/examples/button-example/button-example.component.html b/apps/cookbook/src/app/examples/button-example/button-example.component.html
@@ -10,8 +10,9 @@ <h2>Sizes</h2>
       *ngFor="let size of buttonSizes"
       value="{{ size.value }}"
       [attr.selected]="buttonSize === size.value ? true : null"
-      >{{ size.text }}</option
     >
+      {{ size.text }}
+    </option>
   </select>
 </fieldset>
 
@@ -96,9 +97,7 @@ <h3>Custom Icon</h3>
   <label>Disabled</label>
 </div>
 
-<h2>
-  Button with icon and text
-</h2>
+<h2>Button with icon and text</h2>
 <button kirby-button [size]="buttonSize">
   <kirby-icon name="edit"></kirby-icon>
   Icon Left

diff --git a/apps/cookbook/src/app/examples/button-example/button-example.component.scss b/apps/cookbook/src/app/examples/button-example/button-example.component.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use '~@kirbydesign/core/src/scss/utils';
 
 kirby-card {

diff --git a/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.scss b/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.scss
@@ -3,7 +3,6 @@
 kirby-card {
   z-index: 3; // Ensure dropdown opens over configuration checkboxes
   overflow: visible; // Ensure dropdown isn't cut off
-
   width: 320px;
   margin-bottom: 20px;
 

diff --git a/apps/cookbook/src/app/examples/card-example/card-example.component.scss b/apps/cookbook/src/app/examples/card-example/card-example.component.scss
@@ -32,7 +32,7 @@ kirby-card.show-size {
   &::before {
     background-color: #ccc;
     color: white;
-    content: '-'; //"\00a0";
+    content: '-'; // "\00a0";
     font-size: 0.8em;
     font-weight: 700;
     letter-spacing: 0.1em;
@@ -45,23 +45,26 @@ kirby-card.show-size {
     width: 6em;
     border-top-left-radius: 25%;
     border-top-right-radius: 25%;
-    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 6px 8px rgb(0 0 0 / 30%);
   }
 
-  --cardSmallBackgroundColor: #8dabee;
-  --cardMediumBackgroundColor: #d2a2ee;
-  --cardLargeBackgroundColor: #d8b280;
+  --card-small-background-color: #8dabee;
+  --card-medium-background-color: #d2a2ee;
+  --card-large-background-color: #d8b280;
+
   &[size='<small']::before,
   &[size='small']::before {
     content: 'SM';
-    background-color: var(--cardSmallBackgroundColor);
+    background-color: var(--card-small-background-color);
   }
+
   &[size='medium']::before {
     content: 'MD';
-    background-color: var(--cardMediumBackgroundColor);
+    background-color: var(--card-medium-background-color);
   }
+
   &[size='large']::before {
     content: 'LG';
-    background-color: var(--cardLargeBackgroundColor);
+    background-color: var(--card-large-background-color);
   }
 }
diff --git a/...amples/card-css-background-image-example/card-css-background-image-example.component.scss b/...amples/card-css-background-image-example/card-css-background-image-example.component.scss
@@ -8,18 +8,19 @@
 kirby-card {
   --kirby-card-background-image: linear-gradient(
       0deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(0, 0, 0, 0.6) 100%
+      rgb(255 255 255 / 0%) 0%,
+      rgb(0 0 0 / 60%) 100%
     ),
     url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750');
 
   @include utils.media('>=medium') {
     --kirby-card-background-image: linear-gradient(
         0deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(0, 0, 0, 0.4) 100%
+        rgb(255 255 255 / 0%) 0%,
+        rgb(0 0 0 / 40%) 100%
       ),
       url('https://images.unsplash.com/photo-1560840067-ddcaeb7831d2');
   }
+
   min-height: 300px;
 }
diff --git a/...amples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts b/...amples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts
@@ -30,29 +30,7 @@ export class ChartDeprecatedExampleAreasplineComponent {
   template = config.template;
 
   data = [
-    1600.9,
-    1710.5,
-    1060.4,
-    1290.2,
-    1440.0,
-    1460.0,
-    1350.6,
-    1480.5,
-    1800.4,
-    1940.1,
-    1950.6,
-    1700.4,
-    1600.9,
-    1710.5,
-    1060.4,
-    1290.2,
-    1440.0,
-    1460.0,
-    1350.6,
-    1480.5,
-    1800.4,
-    1940.1,
-    1950.6,
-    1700.4,
+    1600.9, 1710.5, 1060.4, 1290.2, 1440.0, 1460.0, 1350.6, 1480.5, 1800.4, 1940.1, 1950.6, 1700.4,
+    1600.9, 1710.5, 1060.4, 1290.2, 1440.0, 1460.0, 1350.6, 1480.5, 1800.4, 1940.1, 1950.6, 1700.4,
   ];
 }
diff --git a/.../app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts b/.../app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts
@@ -6,7 +6,7 @@ import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem';
 const getColor = DesignTokenHelper.getColor;
 
 function colorPoints(selectedYear: string) {
-  return function() {
+  return function () {
     var series = this.series;
     for (var i = 0, ie = series.length; i < ie; ++i) {
       var points = series[i].data;

diff --git a/...p/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts b/...p/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts
@@ -5,7 +5,7 @@ import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem';
 
 const getColor = DesignTokenHelper.getColor;
 function colorPoints(selectedIdx) {
-  return function() {
+  return function () {
     var series = this.series;
     for (var i = 0, ie = series.length; i < ie; ++i) {
       var points = series[i].data;

diff --git a/apps/cookbook/src/app/examples/checkbox-radio-sizes-example.scss b/apps/cookbook/src/app/examples/checkbox-radio-sizes-example.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use '~@kirbydesign/core/src/scss/utils';
 
 $height-measure-width: 80px;
@@ -54,6 +54,7 @@ kirby-radio::after {
   }
 }
 
+/* stylelint-disable selector-pseudo-element-no-unknown */
 kirby-checkbox ::ng-deep .wrapper,
 kirby-radio ::ng-deep .wrapper {
   background-color: #f7e0f0;

diff --git a/apps/cookbook/src/app/examples/divider-example/divider-example.component.scss b/apps/cookbook/src/app/examples/divider-example/divider-example.component.scss