chore(deps): update dependency prettier to v3 + stylelint

packages/demo/package.json

@@ -32,7 +32,7 @@
     "highlight.js": "11.8.0",
     "ngx-highlightjs": "8.0.0",
     "ngx-toastr": "16.2.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.0",
     "rxjs": "7.8.1",
     "tslib": "2.6.1",
     "zone.js": "0.13.1"
@@ -53,6 +53,7 @@
     "@types/jasmine": "4.3.5",
     "@types/jasminewd2": "2.0.10",
     "@types/node": "18.17.3",
+    "@types/prettier": "3.0.0",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "eslint": "8.46.0",

packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html

@@ -2,7 +2,7 @@ <h3 class="bold mt-huge-r">Default buttons</h3>
 <section class="mt-regular-r">
   <p class="font-curve-regular light">Use these buttons in most situations. If you don't want the animation, you can leave out the <code>.btn-animated</code> class.</p>
   <app-default-buttons #defaultButtons class="d-flex gap-small-r flex-column"></app-default-buttons>
-  <code class="block mt-regular-r" [highlight]="defaultButtons.templateString | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="defaultButtons.templateString | formatCode | async" [languages]="['html']"></code>
 
   <h3 class="bold mt-huge-r">Disabled buttons</h3>
 <div class="light font-curve-regular mt-regular-r alert alert-warning">
@@ -15,32 +15,32 @@ <h4 class="bold font-curve-regular">Accessibility</h4>
   <p>Try to avoid disabled buttons by displaying an error message for invalid forms or hiding the control if a user cannot perform a certain action.</p>
 </div>
 <app-button-disabled #disabledButtons class="d-flex flex-column gap-small-r"></app-button-disabled>
-<code class="block mt-regular-r" [highlight]="disabledButtons.templateString | formatCode" [languages]="['html']"></code>
+<code class="block mt-regular-r" [highlight]="disabledButtons.templateString | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Animated</h3>
 <section class="mt-regular-r">
   <div class="alert alert-info"><p>The animated buttons need a span around the text!</p></div>
   <app-animated-buttons class="d-flex flex-wrap align-items-center gap-small-r" #animatedButtons></app-animated-buttons>
-  <code class="block mt-regular-r" [highlight]="animatedButtons.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="animatedButtons.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Supported button tags</h3>
 <section class="mt-regular-r">
   <app-button-tags #buttonTags class="d-flex flex-wrap gap-small-r"></app-button-tags>
-  <code class="block mt-regular-r" [highlight]="buttonTags.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="buttonTags.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Sizes</h3>
 <section class="mt-regular-r">
   <app-button-sizes #buttonsizes class="d-flex flex-wrap align-items-center gap-small-r"></app-button-sizes>
-  <code class="block mt-regular-r" [highlight]="buttonsizes.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="buttonsizes.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Icon buttons</h3>
 <section class="mt-regular-r">
   <app-icon-buttons #iconButtons class="d-flex flex-wrap align-items-center gap-small-r"></app-icon-buttons>
-  <code class="block mt-regular-r" [highlight]="iconButtons.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="iconButtons.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Icon buttons with text</h3>
@@ -49,13 +49,13 @@ <h3 class="bold mt-huge-r">Icon buttons with text</h3>
 </div>
 <section class="mt-regular-r">
   <app-icon-buttons-text #iconButtonsText class=""></app-icon-buttons-text>
-  <code class="block mt-regular-r" [highlight]="iconButtonsText.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="iconButtonsText.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Accent colors</h3>
 <section class="mt-regular-r">
   <app-accent-buttons #accentButtons class="d-flex gap-small-r flex-wrap"></app-accent-buttons>
-  <code class="block mt-regular-r" [highlight]="accentButtons.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="accentButtons.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Inverted buttons</h3>
@@ -64,7 +64,7 @@ <h3 class="bold mt-huge-r">Inverted buttons</h3>
   <div class="bg-aubergine p-regular-r">
     <app-inverted-buttons #invertedButtons class="d-flex gap-small-r flex-wrap"></app-inverted-buttons>
   </div>
-  <code class="block mt-regular-r" [highlight]="invertedButtons.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="invertedButtons.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>
 
 <h3 class="bold mt-huge-r">Contextual Buttons</h3>
@@ -73,5 +73,5 @@ <h3 class="bold mt-huge-r">Contextual Buttons</h3>
     <div class="alert alert-danger"><p>These are only allowed for intranet applications! The link button cannot be animated.</p></div>
   </div>
   <app-contextual-buttons #contextualButtons class="d-flex gap-small-r flex-wrap"></app-contextual-buttons>
-  <code class="block mt-regular-r" [highlight]="contextualButtons.elementRef.nativeElement.innerHTML | formatCode" [languages]="['html']"></code>
+  <code class="block mt-regular-r" [highlight]="contextualButtons.elementRef.nativeElement.innerHTML | formatCode | async" [languages]="['html']"></code>
 </section>

packages/demo/src/app/common/format-code.pipe.ts

@@ -1,16 +1,17 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import prettier from 'prettier';
-import htmlParser from 'prettier/parser-html';
-import babelParser from 'prettier/parser-babel';
+import babelParser from 'prettier/plugins/babel';
+import htmlParser from 'prettier/plugins/html';
+import prettier from 'prettier/standalone';
+import { Observable, from, of } from 'rxjs';
 
 @Pipe({
   name: 'formatCode'
 })
 export class FormatCodePipe implements PipeTransform {
 
-  transform(value: string, parser: prettier.BuiltInParserName | prettier.CustomParser = 'html'): string {
-    if (!value || !value.length) { return value; }
-    return prettier.format(value, { parser, plugins: [htmlParser, babelParser], htmlWhitespaceSensitivity: 'ignore' });
+  transform(value: string): Observable<string> {
+    if (!value || !value.length) { return of(value); }
+    return from(prettier.format(value, { parser: 'html', plugins: [htmlParser, babelParser], htmlWhitespaceSensitivity: 'ignore'}));
   }
 
 }

packages/demo/src/app/intranet-layout/intranet-layout.component.html

@@ -12,7 +12,7 @@ <h2 class="bold">Installation</h2>
   </p>
   <code
     class="block mt-regular-r bash"
-    [highlight]="'npm install @swisspost/design-system-intranet-header' | formatCode"
+    [highlight]="'npm install @swisspost/design-system-intranet-header' | formatCode | async"
     [languages]="['shell']"
   ></code>
 

packages/documentation-v7/.storybook/helpers/prettier-options.ts

@@ -1,5 +1,5 @@
 import { Options } from 'prettier';
-import * as htmlParser from 'prettier/parser-html';
+import * as htmlParser from 'prettier/plugins/html';
 
 export const prettierOptions: Options = {
   parser: 'html',

packages/documentation-v7/.storybook/preview.ts

@@ -1,3 +1,4 @@
+import { format } from '@prettier/sync';
 import type { Preview } from '@storybook/web-components';
 
 import {
@@ -6,7 +7,6 @@ import {
   setStencilDocJson,
 } from '@pxtrn/storybook-addon-docs-stencil';
 import { StencilJsonDocs } from '@pxtrn/storybook-addon-docs-stencil/dist/types';
-import { format } from 'prettier';
 import DocsLayout from './blocks/layout';
 import { badgesConfig, prettierOptions, resetComponents } from './helpers';
 import './helpers/register-web-components';

packages/documentation-v7/package.json

@@ -33,6 +33,7 @@
     "bootstrap": "5.3.1"
   },
   "devDependencies": {
+    "@prettier/sync": "^0.3.0",
     "@geometricpanda/storybook-addon-badges": "1.1.1",
     "@open-wc/lit-helpers": "0.6.0",
     "@percy/cli": "1.26.3",
@@ -56,7 +57,7 @@
     "@types/react-syntax-highlighter": "15.5.7",
     "cypress": "12.17.3",
     "lit": "2.8.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "15.5.0",

packages/documentation/.storybook/preview.js

@@ -1,24 +1,24 @@
-import JsxParser from 'react-jsx-parser';
-import { renderToStaticMarkup } from 'react-dom/server';
 import * as prettier from 'prettier';
 import * as htmlParser from 'prettier/parser-html';
+import { renderToStaticMarkup } from 'react-dom/server';
+import JsxParser from 'react-jsx-parser';
 
 import DocsLayout from './components/docs/layout';
 import postThemes from './post-themes';
 import './preview.scss';
 
-import { defineCustomElements as defineInternetHeader } from '@swisspost/internet-header';
-import docJson from '@swisspost/design-system-components/dist/docs.json';
 import {
   extractArgTypesFactory,
   extractComponentDescription,
   setStencilDocJson,
 } from '@pxtrn/storybook-addon-docs-stencil';
+import docJson from '@swisspost/design-system-components/dist/docs.json';
+import { defineCustomElements as defineInternetHeader } from '@swisspost/internet-header';
 
-import React from 'react';
-import 'cypress-storybook/react';
-import * as Components from '@swisspost/design-system-components-react';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import * as Components from '@swisspost/design-system-components-react';
+import 'cypress-storybook/react';
+import React from 'react';
 
 if (docJson) setStencilDocJson(docJson);
 defineInternetHeader();

packages/documentation/package.json

@@ -29,7 +29,7 @@
     "@swisspost/design-system-styles": "workspace:6.2.6",
     "@swisspost/internet-header": "workspace:1.8.3",
     "html-react-parser": "4.2.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-jsx-parser": "1.29.0"

packages/styles/.stylelintrc

@@ -5,12 +5,11 @@
     "stylelint-prettier/recommended"
   ],
   "rules": {
-    "order/properties-alphabetical-order": null,
-    "order/order": null,
     "max-nesting-depth": 5,
     "selector-max-compound-selectors": 5,
     "selector-max-id": 1,
     "selector-no-qualifying-type": [true, { "ignore": ["attribute", "class"] }],
-    "function-url-quotes": null
+    "function-url-quotes": null,
+    "scss/dollar-variable-colon-space-after": "always-single-line"
   }
 }

packages/styles/package.json

@@ -38,7 +38,7 @@
     "@popperjs/core": "2.11.8",
     "bootstrap": "5.3.1",
     "cheerio": "1.0.0-rc.12",
-    "prettier": "2.8.8"
+    "prettier": "3.0.0"
   },
   "devDependencies": {
     "@angular/compiler": "=15.0.4",
@@ -62,8 +62,8 @@
     "sass": "1.64.2",
     "stylelint": "15.10.2",
     "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-sass-guidelines": "9.0.1",
-    "stylelint-prettier": "2.0.0",
+    "stylelint-config-sass-guidelines": "10.0.0",
+    "stylelint-prettier": "4.0.0",
     "stylelint-scss": "5.0.1",
     "typescript": "4.9.5"
   },

packages/styles/schematics/utils/dom-migration/get-dom-migration-rule.ts

@@ -6,7 +6,7 @@ import { canMigrateFile, createMigrationProgram } from '@angular/core/schematics
 import * as cheerio from 'cheerio/lib/slim';
 import { relative } from 'path';
 import * as prettier from 'prettier';
-import * as htmlParser from 'prettier/parser-html';
+import * as htmlParser from 'prettier/plugins/html';
 import { SourceFile } from 'typescript';
 import { DomUpdate } from './dom-update';
 
@@ -103,7 +103,7 @@ export function getDomMigrationRule(...updates: DomUpdate[]): Rule {
           const treeUpdateRecorder = tree.beginUpdate(treeFilePath);
 
           sourceElements
-            .forEach(source => {
+            .forEach(async source => {
               // get corresponding outputelement by cheerio-id
               const distElement = $outputElements.filter((_i, element) => $(element).data('cheerio-id') === source.id)
                 .first()
@@ -117,9 +117,14 @@ export function getDomMigrationRule(...updates: DomUpdate[]): Rule {
               // remove old "element" out of tree file
               treeUpdateRecorder.remove(source.start, source.end - source.start);
               // write new "element" into the tree file
+
+
+              const content = await prettier.format(distElement, PRETTIER_OPTIONS);
+              const contentWithoutBreak = content.replace(/(\n|\r\n)$/, '');
+
               treeUpdateRecorder.insertLeft(
                 source.start,
-                prettier.format(distElement, PRETTIER_OPTIONS).replace(/(\n|\r\n)$/, ''),
+                contentWithoutBreak
               );
             });
 

packages/styles/src/components/button-group.scss

@@ -17,7 +17,9 @@
 
     // added a transition delay on the "z-index" so the button only moves back after all other transitions
     z-index: 0;
-    transition: z-index 0s ease (0.5 * button.$btn-transition-duration), button.$btn-transition;
+    transition:
+      z-index 0s ease (0.5 * button.$btn-transition-duration),
+      button.$btn-transition;
 
     @include utilities.high-contrast-mode() {
       transition: none !important;

packages/styles/src/components/button.scss

@@ -144,7 +144,9 @@
     transform: rotateZ(315deg)
       translate(button.$btn-border-width * -1, button.$btn-border-width * -1);
     transform-origin: center center;
-    transition: opacity 250ms, transform 250ms;
+    transition:
+      opacity 250ms,
+      transform 250ms;
     border-right: button.$btn-border-width solid currentColor;
     border-bottom: button.$btn-border-width solid currentColor;
     opacity: 0;

packages/styles/src/components/carousel.scss

@@ -14,7 +14,10 @@
 .carousel {
   &:focus-visible {
     outline: transparent;
-    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 12px 5px rgba(0, 0, 0, 0.24);
+    box-shadow:
+      0 0 0 2px #fff,
+      0 0 0 4px #000,
+      0 0 12px 5px rgba(0, 0, 0, 0.24);
   }
 
   @include utilities.high-contrast-mode() {

packages/styles/src/components/datatable.scss

@@ -72,7 +72,9 @@
 
   &.datatable-icon-sort-unset {
     background-image: datatable.$datatable-sort-unset-icon;
-    background-position: center top, center bottom;
+    background-position:
+      center top,
+      center bottom;
   }
 
   &.datatable-icon-up {

packages/styles/src/components/fonts.scss

@@ -6,7 +6,8 @@
   font-display: swap;
   font-family: 'Frutiger Neue For Post';
   font-weight: 700;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff') format('woff');
 }
 
@@ -15,15 +16,17 @@
   font-family: 'Frutiger Neue For Post';
   font-weight: 700;
   font-style: italic;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff') format('woff');
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Frutiger Neue For Post';
   font-weight: 400;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff') format('woff');
 }
 
@@ -32,15 +35,17 @@
   font-family: 'Frutiger Neue For Post';
   font-weight: 400;
   font-style: italic;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff') format('woff');
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Frutiger Neue For Post';
   font-weight: 300;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff') format('woff');
 }
 
@@ -49,6 +54,7 @@
   font-family: 'Frutiger Neue For Post';
   font-weight: 300;
   font-style: italic;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-LtIt.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-LtIt.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-LtIt.woff') format('woff');
 }