Fixes broken CSS selectors and disables prettier for web component st…

…yles. (#18982) * ignore prettier for all styles files due to incorrect selector breaks introduced to template literals * Change files
microsoft · Jul 16, 2021 · ac8bc50 · ac8bc50
1 parent a1f1516
commit ac8bc50
Show file tree

Hide file tree

Showing 12 changed files with 317 additions and 317 deletions.
diff --git 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
@@ -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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/...-components/src/styles/patterns/button.ts → ...ents/src/styles/patterns/button.styles.ts b/...-components/src/styles/patterns/button.ts → ...ents/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
@@ -1,2 +1,2 @@
-export * from './button';
+export * from './button.styles';
 export * from './input';