diff --git a/.prettierignore b/.prettierignore
index 52ad238b042f8..f826a869c25f0 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -28,6 +28,7 @@ change
 __snapshots__
 
 # package specific files
+packages/web-components/src/**/*.styles.ts
 packages/web-components/**/*.spec.ts
 packages/web-components/src/default-palette.ts
 
diff --git a/change/@fluentui-web-components-503d403b-8899-41f6-b443-9f2ad0e4d476.json b/change/@fluentui-web-components-503d403b-8899-41f6-b443-9f2ad0e4d476.json
new file mode 100644
index 0000000000000..b5cb40e71d358
--- /dev/null
+++ b/change/@fluentui-web-components-503d403b-8899-41f6-b443-9f2ad0e4d476.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fixe incorrect css selectors introduced by prettier formatting bug related to template literal interpolatin in css files",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 6993e6912a58c..92ef0152edbf9 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -31,8 +31,8 @@
     "prepare": "yarn clean && yarn build",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
-    "prettier": "prettier --config ../../prettier.config.js --write 'src/**/(*.ts|*.html)'",
-    "prettier:diff": "prettier --config ../../prettier.config.js 'src/**/(*.ts|*.html)' --list-different",
+    "prettier": "prettier --config ../../prettier.config.js --write 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
+    "prettier:diff": "prettier --config ../../prettier.config.js 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore --list-different",
     "code-style": "npm run prettier && npm run lint",
     "start": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
index 8ac16a139c11b..3dbc142113348 100644
--- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -79,7 +79,7 @@ export const accordionItemStyles: (
       cursor: pointer;
     }
 
-    .button: ${focusVisible}::before {
+    .button:${focusVisible}::before {
       outline: none;
       border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
       box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
@@ -134,7 +134,7 @@ export const accordionItemStyles: (
   `.withBehaviors(
     forcedColorsStylesheetBehavior(
       css`
-        .button: ${focusVisible}::before {
+        .button:${focusVisible}::before {
           border-color: ${SystemColors.Highlight};
           box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight};
         }
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
index be0eb667ef1ea..61481a2420fe2 100644
--- a/packages/web-components/src/card/card.styles.ts
+++ b/packages/web-components/src/card/card.styles.ts
@@ -9,42 +9,40 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevation } from '../styles';
 import { fillColor, layerCornerRadius } from '../design-tokens';
 
-export const cardStyles: (
-  context: ElementDefinitionContext,
-  definition: FoundationElementDefinition,
-) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
-  css`
-    ${display('block')} :host {
-      --elevation: 4;
-      display: block;
-      contain: content;
-      height: var(--card-height, 100%);
-      width: var(--card-width, 100%);
-      box-sizing: border-box;
-      background: ${fillColor};
-      border-radius: calc(${layerCornerRadius} * 1px);
-      ${elevation}
-    }
+export const cardStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles =
+  (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
+    css`
+      ${display('block')} :host {
+        --elevation: 4;
+        display: block;
+        contain: content;
+        height: var(--card-height, 100%);
+        width: var(--card-width, 100%);
+        box-sizing: border-box;
+        background: ${fillColor};
+        border-radius: calc(${layerCornerRadius} * 1px);
+        ${elevation}
+      }
 
-    :host(:hover) {
-      --elevation: 8;
-    }
+      :host(:hover) {
+        --elevation: 8;
+      }
 
-    :host(:focus-within) {
-      --elevation: 8;
-    }
+      :host(:focus-within) {
+        --elevation: 8;
+      }
 
-    :host {
-      content-visibility: auto;
-    }
-  `.withBehaviors(
-    forcedColorsStylesheetBehavior(
-      css`
-        :host {
-          forced-color-adjust: none;
-          background: ${SystemColors.Canvas};
-          box-shadow: 0 0 0 1px ${SystemColors.CanvasText};
-        }
-      `,
-    ),
-  );
+      :host {
+        content-visibility: auto;
+      }
+    `.withBehaviors(
+      forcedColorsStylesheetBehavior(
+        css`
+          :host {
+            forced-color-adjust: none;
+            background: ${SystemColors.Canvas};
+            box-shadow: 0 0 0 1px ${SystemColors.CanvasText};
+          }
+        `,
+      ),
+    );
diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts
index 27b06bc57554c..e436e1e706f39 100644
--- a/packages/web-components/src/menu/menu.styles.ts
+++ b/packages/web-components/src/menu/menu.styles.ts
@@ -10,34 +10,32 @@ import {
   strokeWidth,
 } from '../design-tokens';
 
-export const menuStyles: (
-  context: ElementDefinitionContext,
-  definition: FoundationElementDefinition,
-) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
-  css`
-    ${display('block')} :host {
-      --elevation: 11;
-      background: ${neutralLayerFloating};
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      border-radius: ${layerCornerRadius};
-      ${elevation}
-      margin: 0;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      padding: calc(${designUnit} * 1px) 0;
-      max-width: 368px;
-      min-width: 64px;
-    }
+export const menuStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles =
+  (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
+    css`
+      ${display('block')} :host {
+        --elevation: 11;
+        background: ${neutralLayerFloating};
+        border: calc(${strokeWidth} * 1px) solid transparent;
+        border-radius: ${layerCornerRadius};
+        ${elevation}
+        margin: 0;
+        border-radius: calc(${controlCornerRadius} * 1px);
+        padding: calc(${designUnit} * 1px) 0;
+        max-width: 368px;
+        min-width: 64px;
+      }
 
-    :host([slot='submenu']) {
-      width: max-content;
-      margin: 0 calc(${designUnit} * 1px);
-    }
+      :host([slot='submenu']) {
+        width: max-content;
+        margin: 0 calc(${designUnit} * 1px);
+      }
 
-    ::slotted(hr) {
-      box-sizing: content-box;
-      height: 0;
-      margin: 0;
-      border: none;
-      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
-    }
-  `;
+      ::slotted(hr) {
+        box-sizing: content-box;
+        height: 0;
+        margin: 0;
+        border: none;
+        border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
+      }
+    `;
diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
index 9011c0561d8b3..6542155c880eb 100644
--- a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
+++ b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
@@ -9,90 +9,88 @@ import {
 import { heightNumber } from '../../styles';
 import { accentForegroundRest, neutralFillRest, neutralForegroundHint } from '../../design-tokens';
 
-export const progressRingStyles: (
-  context: ElementDefinitionContext,
-  definition: ProgressRingOptions,
-) => ElementStyles = (context: ElementDefinitionContext, definition: ProgressRingOptions) =>
-  css`
-    ${display('flex')} :host {
-      align-items: center;
-      outline: none;
-      height: calc(${heightNumber} * 1px);
-      width: calc(${heightNumber} * 1px);
-      margin: calc(${heightNumber} * 1px) 0;
-    }
-
-    .progress {
-      height: 100%;
-      width: 100%;
-    }
-
-    .background {
-      stroke: ${neutralFillRest};
-      fill: none;
-      stroke-width: 2px;
-    }
-
-    .determinate {
-      stroke: ${accentForegroundRest};
-      fill: none;
-      stroke-width: 2px;
-      stroke-linecap: round;
-      transform-origin: 50% 50%;
-      transform: rotate(-90deg);
-      transition: all 0.2s ease-in-out;
-    }
+export const progressRingStyles: (context: ElementDefinitionContext, definition: ProgressRingOptions) => ElementStyles =
+  (context: ElementDefinitionContext, definition: ProgressRingOptions) =>
+    css`
+      ${display('flex')} :host {
+        align-items: center;
+        outline: none;
+        height: calc(${heightNumber} * 1px);
+        width: calc(${heightNumber} * 1px);
+        margin: calc(${heightNumber} * 1px) 0;
+      }
 
-    .indeterminate-indicator-1 {
-      stroke: ${accentForegroundRest};
-      fill: none;
-      stroke-width: 2px;
-      stroke-linecap: round;
-      transform-origin: 50% 50%;
-      transform: rotate(-90deg);
-      transition: all 0.2s ease-in-out;
-      animation: spin-infinite 2s linear infinite;
-    }
+      .progress {
+        height: 100%;
+        width: 100%;
+      }
 
-    :host(.paused) .indeterminate-indicator-1 {
-      animation-play-state: paused;
-      stroke: ${neutralFillRest};
-    }
+      .background {
+        stroke: ${neutralFillRest};
+        fill: none;
+        stroke-width: 2px;
+      }
 
-    :host(.paused) .determinate {
-      stroke: ${neutralForegroundHint};
-    }
+      .determinate {
+        stroke: ${accentForegroundRest};
+        fill: none;
+        stroke-width: 2px;
+        stroke-linecap: round;
+        transform-origin: 50% 50%;
+        transform: rotate(-90deg);
+        transition: all 0.2s ease-in-out;
+      }
 
-    @keyframes spin-infinite {
-      0% {
-        stroke-dasharray: 0.01px 43.97px;
-        transform: rotate(0deg);
+      .indeterminate-indicator-1 {
+        stroke: ${accentForegroundRest};
+        fill: none;
+        stroke-width: 2px;
+        stroke-linecap: round;
+        transform-origin: 50% 50%;
+        transform: rotate(-90deg);
+        transition: all 0.2s ease-in-out;
+        animation: spin-infinite 2s linear infinite;
       }
-      50% {
-        stroke-dasharray: 21.99px 21.99px;
-        transform: rotate(450deg);
+
+      :host(.paused) .indeterminate-indicator-1 {
+        animation-play-state: paused;
+        stroke: ${neutralFillRest};
       }
-      100% {
-        stroke-dasharray: 0.01px 43.97px;
-        transform: rotate(1080deg);
+
+      :host(.paused) .determinate {
+        stroke: ${neutralForegroundHint};
       }
-    }
-  `.withBehaviors(
-    forcedColorsStylesheetBehavior(
-      css`
-        .indeterminate-indicator-1,
-        .determinate {
-          stroke: ${SystemColors.FieldText};
-        }
-        .background {
-          stroke: ${SystemColors.Field};
+
+      @keyframes spin-infinite {
+        0% {
+          stroke-dasharray: 0.01px 43.97px;
+          transform: rotate(0deg);
         }
-        :host(.paused) .indeterminate-indicator-1 {
-          stroke: ${SystemColors.Field};
+        50% {
+          stroke-dasharray: 21.99px 21.99px;
+          transform: rotate(450deg);
         }
-        :host(.paused) .determinate {
-          stroke: ${SystemColors.GrayText};
+        100% {
+          stroke-dasharray: 0.01px 43.97px;
+          transform: rotate(1080deg);
         }
-      `,
-    ),
-  );
+      }
+    `.withBehaviors(
+      forcedColorsStylesheetBehavior(
+        css`
+          .indeterminate-indicator-1,
+          .determinate {
+            stroke: ${SystemColors.FieldText};
+          }
+          .background {
+            stroke: ${SystemColors.Field};
+          }
+          :host(.paused) .indeterminate-indicator-1 {
+            stroke: ${SystemColors.Field};
+          }
+          :host(.paused) .determinate {
+            stroke: ${SystemColors.GrayText};
+          }
+        `,
+      ),
+    );
diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.styles.ts
similarity index 99%
rename from packages/web-components/src/styles/patterns/button.ts
rename to packages/web-components/src/styles/patterns/button.styles.ts
index a9d5c8a439523..4e7fb43c3fd75 100644
--- a/packages/web-components/src/styles/patterns/button.ts
+++ b/packages/web-components/src/styles/patterns/button.styles.ts
@@ -92,7 +92,7 @@ export const baseButtonStyles = (context, definition) =>
       background-color: ${neutralFillActive};
     }
 
-    .control: ${focusVisible} {
+    .control:${focusVisible} {
       border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
       box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
     }
diff --git a/packages/web-components/src/styles/patterns/index.ts b/packages/web-components/src/styles/patterns/index.ts
index 55d208255f55e..5775895a9f1a7 100644
--- a/packages/web-components/src/styles/patterns/index.ts
+++ b/packages/web-components/src/styles/patterns/index.ts
@@ -1,2 +1,2 @@
-export * from './button';
+export * from './button.styles';
 export * from './input';
diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts
index 33813076f7499..1b13b36e956bf 100644
--- a/packages/web-components/src/tabs/tab/tab.styles.ts
+++ b/packages/web-components/src/tabs/tab/tab.styles.ts
@@ -21,88 +21,86 @@ import {
   typeRampBaseLineHeight,
 } from '../../design-tokens';
 
-export const tabStyles: (
-  context: ElementDefinitionContext,
-  definition: FoundationElementDefinition,
-) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
-  css`
-    ${display('inline-flex')} :host {
-      box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      font-weight: 400;
-      line-height: ${typeRampBaseLineHeight};
-      height: calc(${heightNumber} * 1px);
-      padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
-      color: ${neutralForegroundRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      align-items: center;
-      justify-content: center;
-      grid-row: 1;
-      cursor: pointer;
-    }
+export const tabStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles =
+  (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
+    css`
+      ${display('inline-flex')} :host {
+        box-sizing: border-box;
+        font-family: ${bodyFont};
+        font-size: ${typeRampBaseFontSize};
+        font-weight: 400;
+        line-height: ${typeRampBaseLineHeight};
+        height: calc(${heightNumber} * 1px);
+        padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
+        color: ${neutralForegroundRest};
+        border-radius: calc(${controlCornerRadius} * 1px);
+        border: calc(${strokeWidth} * 1px) solid transparent;
+        align-items: center;
+        justify-content: center;
+        grid-row: 1;
+        cursor: pointer;
+      }
 
-    :host([aria-selected='true']) {
-      z-index: 2;
-    }
+      :host([aria-selected='true']) {
+        z-index: 2;
+      }
 
-    :host(:hover),
-    :host(:active) {
-      color: ${neutralForegroundRest};
-    }
+      :host(:hover),
+      :host(:active) {
+        color: ${neutralForegroundRest};
+      }
 
-    :host(:${focusVisible}) {
-      outline: none;
-      border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
-    }
+      :host(:${focusVisible}) {
+        outline: none;
+        border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
+        box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
+      }
 
-    :host(:focus) {
-      outline: none;
-    }
+      :host(:focus) {
+        outline: none;
+      }
 
-    :host(.vertical) {
-      justify-content: end;
-      grid-column: 2;
-    }
+      :host(.vertical) {
+        justify-content: end;
+        grid-column: 2;
+      }
 
-    :host(.vertical[aria-selected='true']) {
-      z-index: 2;
-    }
+      :host(.vertical[aria-selected='true']) {
+        z-index: 2;
+      }
 
-    :host(.vertical:hover),
-    :host(.vertical:active) {
-      color: ${neutralForegroundRest};
-    }
+      :host(.vertical:hover),
+      :host(.vertical:active) {
+        color: ${neutralForegroundRest};
+      }
 
-    :host(.vertical:hover[aria-selected='true']) {
-    }
-  `.withBehaviors(
-    forcedColorsStylesheetBehavior(
-      css`
-        :host {
-          forced-color-adjust: none;
-          border-color: transparent;
-          color: ${SystemColors.ButtonText};
-          fill: currentcolor;
-        }
-        :host(:hover),
-        :host(.vertical:hover),
-        :host([aria-selected='true']:hover) {
-          background: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-        :host([aria-selected='true']) {
-          background: ${SystemColors.HighlightText};
-          color: ${SystemColors.Highlight};
-          fill: currentcolor;
-        }
-        :host(:${focusVisible}) {
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: none;
-        }
-      `,
-    ),
-  );
+      :host(.vertical:hover[aria-selected='true']) {
+      }
+    `.withBehaviors(
+      forcedColorsStylesheetBehavior(
+        css`
+          :host {
+            forced-color-adjust: none;
+            border-color: transparent;
+            color: ${SystemColors.ButtonText};
+            fill: currentcolor;
+          }
+          :host(:hover),
+          :host(.vertical:hover),
+          :host([aria-selected='true']:hover) {
+            background: ${SystemColors.Highlight};
+            color: ${SystemColors.HighlightText};
+            fill: currentcolor;
+          }
+          :host([aria-selected='true']) {
+            background: ${SystemColors.HighlightText};
+            color: ${SystemColors.Highlight};
+            fill: currentcolor;
+          }
+          :host(:${focusVisible}) {
+            border-color: ${SystemColors.ButtonText};
+            box-shadow: none;
+          }
+        `,
+      ),
+    );
diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts
index 5a33561d3d455..3e876fa34b480 100644
--- a/packages/web-components/src/tabs/tabs.styles.ts
+++ b/packages/web-components/src/tabs/tabs.styles.ts
@@ -15,104 +15,102 @@ import {
   typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const tabsStyles: (
-  context: ElementDefinitionContext,
-  definition: FoundationElementDefinition,
-) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
-  css`
-    ${display('grid')} :host {
-      box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-      color: ${neutralForegroundRest};
-      grid-template-columns: auto 1fr auto;
-      grid-template-rows: auto 1fr;
-    }
+export const tabsStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles =
+  (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
+    css`
+      ${display('grid')} :host {
+        box-sizing: border-box;
+        font-family: ${bodyFont};
+        font-size: ${typeRampBaseFontSize};
+        line-height: ${typeRampBaseLineHeight};
+        color: ${neutralForegroundRest};
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: auto 1fr;
+      }
 
-    .tablist {
-      display: grid;
-      grid-template-rows: auto auto;
-      grid-template-columns: auto;
-      position: relative;
-      width: max-content;
-      align-self: end;
-    }
+      .tablist {
+        display: grid;
+        grid-template-rows: auto auto;
+        grid-template-columns: auto;
+        position: relative;
+        width: max-content;
+        align-self: end;
+      }
 
-    .start,
-    .end {
-      align-self: center;
-    }
+      .start,
+      .end {
+        align-self: center;
+      }
 
-    .activeIndicator {
-      grid-row: 2;
-      grid-column: 1;
-      width: 20px;
-      height: 3px;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      justify-self: center;
-      background: ${accentFillRest};
-    }
+      .activeIndicator {
+        grid-row: 2;
+        grid-column: 1;
+        width: 20px;
+        height: 3px;
+        border-radius: calc(${controlCornerRadius} * 1px);
+        justify-self: center;
+        background: ${accentFillRest};
+      }
 
-    .activeIndicatorTransition {
-      transition: transform 0.2s ease-in-out;
-    }
+      .activeIndicatorTransition {
+        transition: transform 0.2s ease-in-out;
+      }
 
-    .tabpanel {
-      grid-row: 2;
-      grid-column-start: 1;
-      grid-column-end: 4;
-      position: relative;
-    }
+      .tabpanel {
+        grid-row: 2;
+        grid-column-start: 1;
+        grid-column-end: 4;
+        position: relative;
+      }
 
-    :host(.vertical) {
-      grid-template-rows: auto 1fr auto;
-      grid-template-columns: auto 1fr;
-    }
+      :host(.vertical) {
+        grid-template-rows: auto 1fr auto;
+        grid-template-columns: auto 1fr;
+      }
 
-    :host(.vertical) .tablist {
-      grid-row-start: 2;
-      grid-row-end: 2;
-      display: grid;
-      grid-template-rows: auto;
-      grid-template-columns: auto 1fr;
-      position: relative;
-      width: max-content;
-      justify-self: end;
-      width: 100%;
-    }
+      :host(.vertical) .tablist {
+        grid-row-start: 2;
+        grid-row-end: 2;
+        display: grid;
+        grid-template-rows: auto;
+        grid-template-columns: auto 1fr;
+        position: relative;
+        width: max-content;
+        justify-self: end;
+        width: 100%;
+      }
 
-    :host(.vertical) .tabpanel {
-      grid-column: 2;
-      grid-row-start: 1;
-      grid-row-end: 4;
-    }
+      :host(.vertical) .tabpanel {
+        grid-column: 2;
+        grid-row-start: 1;
+        grid-row-end: 4;
+      }
 
-    :host(.vertical) .end {
-      grid-row: 3;
-    }
+      :host(.vertical) .end {
+        grid-row: 3;
+      }
 
-    :host(.vertical) .activeIndicator {
-      grid-column: 1;
-      grid-row: 1;
-      width: 3px;
-      height: 20px;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      align-self: center;
-      background: ${accentFillRest};
-    }
+      :host(.vertical) .activeIndicator {
+        grid-column: 1;
+        grid-row: 1;
+        width: 3px;
+        height: 20px;
+        border-radius: calc(${controlCornerRadius} * 1px);
+        align-self: center;
+        background: ${accentFillRest};
+      }
 
-    :host(.vertical) .activeIndicatorTransition {
-      transition: transform 0.2s linear;
-    }
-  `.withBehaviors(
-    forcedColorsStylesheetBehavior(
-      css`
-        .activeIndicator,
-        :host(.vertical) .activeIndicator {
-          forced-color-adjust: none;
-          background: ${SystemColors.Highlight};
-        }
-      `,
-    ),
-  );
+      :host(.vertical) .activeIndicatorTransition {
+        transition: transform 0.2s linear;
+      }
+    `.withBehaviors(
+      forcedColorsStylesheetBehavior(
+        css`
+          .activeIndicator,
+          :host(.vertical) .activeIndicator {
+            forced-color-adjust: none;
+            background: ${SystemColors.Highlight};
+          }
+        `,
+      ),
+    );
diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
index 1a04d34682f11..62cc26bfdadb7 100644
--- a/packages/web-components/src/tree-item/tree-item.styles.ts
+++ b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -185,8 +185,10 @@ export const treeItemStyles: (context: ElementDefinitionContext, definition: Tre
     }
 
     ::slotted(svg) {
-      ${/* Glyph size is temporary -
-            replace when glyph-size var is added */ ''} width: 16px;
+      ${
+        /* Glyph size is temporary -
+            replace when glyph-size var is added */ ''
+      } width: 16px;
       height: 16px;
     }