Merge branch 'main' into macandcheese/7677-improve-table-overflow-scr…

…ollbars

package.json

@@ -32,6 +32,7 @@
     "@cspell/eslint-plugin": "7.3.9",
     "@esri/calcite-base": "1.2.0",
     "@esri/calcite-colors": "6.1.0",
+    "@prettier/sync": "0.3.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.5",
     "@storybook/addon-a11y": "6.5.16",
@@ -87,7 +88,7 @@
     "lint-staged": "13.3.0",
     "markdownlint-cli": "0.34.0",
     "postcss": "8.4.32",
-    "prettier": "2.8.8",
+    "prettier": "3.1.1",
     "puppeteer": "21.5.0",
     "quicktype-core": "23.0.80",
     "react": "^16.13.1",

packages/calcite-components/support/generateT9nTypes.ts

@@ -49,14 +49,14 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core
 
       await writeFile(
         declarationFile,
-        format(typingsContent, {
+        await format(typingsContent, {
           filepath: declarationFile,
-        })
+        }),
       );
       const t9nPath = `${bundle.split("/t9n")[0]}/t9n`;
       const relativeT9nPath = `${rootManifestFilePath}${t9nPath}`;
       return relativeT9nPath.replace(/\//g, manifestFilePathSeparator);
-    })
+    }),
   );
 
   console.log("finished generating t9n string typings");

packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap

@@ -2049,9 +2049,11 @@ $calcite-border-width-lg: 4px;
 $calcite-border-width-md: 2px;
 $calcite-border-width-sm: 1px;
 $calcite-border-width-none: 0;
-$calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08),
+$calcite-shadow-md:
+  0 4px 20px 0 rgba(0, 0, 0, 0.08),
   0 12px 30px rgba(0, 0, 0, 0.1);
-$calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04),
+$calcite-shadow-sm:
+  0 2px 8px 0 rgba(0, 0, 0, 0.04),
   0 4px 16px 0 rgba(0, 0, 0, 0.08);
 $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
 $calcite-corner-radius: var(--calcite-corner-radius-sharp);

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts

@@ -1,5 +1,5 @@
 import sd, { Core as StyleDictionary } from "style-dictionary";
-import * as prettier from "prettier";
+import prettierSync from "@prettier/sync";
 
 import { formatTokens } from "./utils/formatTokens.js";
 import { formatExtraOutput } from "./utils/formatExtraOutput.js";
@@ -14,7 +14,7 @@ export const formatCssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return prettier.format(header + `:root {${tokens.join(EOL)}}`, { parser: "css" });
+  return prettierSync.format(header + `:root {${tokens.join(EOL)}}`, { parser: "css" });
 };
 
 export const registerFormatterCss = (sd: StyleDictionary): void => {

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts

@@ -1,5 +1,5 @@
 import { Core as StyleDictionary } from "style-dictionary";
-import * as prettier from "prettier";
+import prettierSync from "@prettier/sync";
 
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments";
 import { dirname, relative, resolve } from "path";
@@ -19,7 +19,7 @@ export const formatDocsPlatform: CalledFormatterFunction = (args) => {
     }),
   };
 
-  return prettier.format(JSON.stringify(output, null, 2), { parser: "json" });
+  return prettierSync.format(JSON.stringify(output, null, 2), { parser: "json" });
 };
 
 export const registerFormatterDocs = (sd: StyleDictionary): void => {

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts

@@ -1,15 +1,15 @@
 import styleDictionary, { Core as StyleDictionary } from "style-dictionary";
-import * as prettier from "prettier";
+import prettierSync from "@prettier/sync";
 
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments";
 
 export const formatJsPlatform: CalledFormatterFunction = (args) => {
-  return prettier.format(
+  return prettierSync.format(
     styleDictionary.formatHelpers.fileHeader({ file: args.file }) +
       "export default " +
       JSON.stringify(args.dictionary.properties, null, 2) +
       ";",
-    { parser: "babel" }
+    { parser: "babel" },
   );
 };
 

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts

@@ -2,7 +2,7 @@ import sd, { Core as StyleDictionary } from "style-dictionary";
 
 import { formatTokens } from "./utils/formatTokens.js";
 import { formatExtraOutput } from "./utils/formatExtraOutput.js";
-import * as prettier from "prettier";
+import prettierSync from "@prettier/sync";
 
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js";
 import { EOL } from "os";
@@ -15,7 +15,7 @@ export const formatScssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return prettier.format(header + tokens.join(EOL), { parser: "scss" });
+  return prettierSync.format(header + tokens.join(EOL), { parser: "scss" });
 };
 
 export const registerFormatterScss = (sd: StyleDictionary): void => {

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts

@@ -1,14 +1,14 @@
 import { writeFileSync } from "fs";
 import { resolve } from "path";
-import * as prettier from "prettier";
+import prettierSync from "@prettier/sync";
 
 import { Platform } from "../../../../types/platform.js";
 import { Options } from "../../../../types/styleDictionary/options.js";
 import { DeepKeyTokenMap } from "../../../../types/tokenStudio/designTokenTypes.js";
 
 export function formatExtraOutput(
   outputObject: Record<string, (string | Record<string, string>)[]> | DeepKeyTokenMap,
-  args: Options & { header: string; buildPath: string }
+  args: Options & { header: string; buildPath: string },
 ): void {
   if (Object.keys(outputObject).length > 0) {
     const { index } = args.expandFiles[args.platform];
@@ -26,7 +26,9 @@ export function formatExtraOutput(
             ? index.import.map((imp) =>
                 typeof imp === "string"
                   ? `@import ${imp.includes(".css") ? `url("${imp}")` : `"${imp}"`};`
-                  : `@import ${imp[0].includes(".css") ? `url("${imp[0]}")` : `"${imp[0]}"`} ${imp.slice(1).join(" ")};`
+                  : `@import ${imp[0].includes(".css") ? `url("${imp[0]}")` : `"${imp[0]}"`} ${imp
+                      .slice(1)
+                      .join(" ")};`,
               )
             : [];
           const forwards = index.forward ? index.forward.map((fwd) => `@forwards "${fwd}";`) : [];
@@ -68,7 +70,7 @@ export function formatExtraOutput(
         case "js":
         case "es6":
           const exports = index.export?.map((exp) =>
-            typeof exp === "string" ? `export * from "${exp}";` : `export * as ${exp[1]} from "${exp[0]}";`
+            typeof exp === "string" ? `export * from "${exp}";` : `export * as ${exp[1]} from "${exp[0]}";`,
           );
           outputFiles[index.name] = [...exports].filter((t) => t);
           break;
@@ -96,7 +98,7 @@ export function formatExtraOutput(
 
       writeFileSync(
         resolve(args.buildPath, index.name),
-        prettier.format(`${args.header}${outputFiles[index.name].join(" ")}`, { parser })
+        prettierSync.format(`${args.header}${outputFiles[index.name].join(" ")}`, { parser }),
       );
     }
 
@@ -107,24 +109,30 @@ export function formatExtraOutput(
           if (typeof outputList[0] === "string" && outputList[0].slice(0, 2) === "--") {
             writeFileSync(
               absoluteFilePath,
-              prettier.format(`${args.header}:root{${outputList.join("")}}`, { parser: "css" })
+              prettierSync.format(`${args.header}:root{${outputList.join("")}}`, { parser: "css" }),
             );
           } else {
-            writeFileSync(absoluteFilePath, prettier.format(`${args.header}${outputList.join("")}`, { parser: "css" }));
+            writeFileSync(
+              absoluteFilePath,
+              prettierSync.format(`${args.header}${outputList.join("")}`, { parser: "css" }),
+            );
           }
           break;
         case Platform.SCSS:
         case Platform.SASS:
-          writeFileSync(absoluteFilePath, prettier.format(`${args.header}${outputList.join("")}`, { parser: "scss" }));
+          writeFileSync(
+            absoluteFilePath,
+            prettierSync.format(`${args.header}${outputList.join("")}`, { parser: "scss" }),
+          );
           break;
         case Platform.JS:
           writeFileSync(
             absoluteFilePath,
-            prettier.format(args.header + "export default " + outputList[0] + "", { parser: "babel" })
+            prettierSync.format(args.header + "export default " + outputList[0] + "", { parser: "babel" }),
           );
           break;
         case Platform.DOCS:
-          writeFileSync(absoluteFilePath, prettier.format(outputList[0].join(""), { parser: "json" }));
+          writeFileSync(absoluteFilePath, prettierSync.format(outputList[0].join(""), { parser: "json" }));
           break;
         default:
           break;