fix: replace "\n" to support Windows for tokens output (#8352)

**Related Issue:** #8350

## Summary

Fixes an issue that was causing problems in Windows by handing off
control of formatting to the experts and by experts I mean Prettier.

Author: alisonailea

package-lock.json

@@ -49,6 +49,7 @@
     "@types/jest-axe": "3.5.9",
     "@types/lodash-es": "4.17.12",
     "@types/node": "^18.0.0",
+    "@types/prettier": "2.7.2",
     "@types/react": "^16.7.6",
     "@types/react-dom": "^16.0.9",
     "@types/semver": "7.5.6",

package.json

@@ -1,3 +1,5 @@
+@import "~@esri/calcite-design-tokens/dist/scss/core";
+
 /**
  * CSS Custom Properties
  *
@@ -21,7 +23,7 @@
   transition: visibility 0ms linear var(--calcite-internal-animation-timing-slow),
     opacity var(--calcite-internal-animation-timing-slow) $easing-function;
   // the modal should always use a dark scrim, regardless of light / dark mode - matches value in global.scss
-  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, 0.85)};
+  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};
 }
 
 .content-top[hidden],

packages/calcite-components/src/components/modal/modal.scss

@@ -1,8 +1,10 @@
 import sd, { Core as StyleDictionary } from "style-dictionary";
+import * as prettier from "prettier";
 
 import { formatTokens } from "./utils/formatTokens.js";
 import { formatExtraOutput } from "./utils/formatExtraOutput.js";
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js";
+import { EOL } from "os";
 
 export const formatCssPlatform: CalledFormatterFunction = (args) => {
   const { file, dictionary } = args;
@@ -12,7 +14,7 @@ export const formatCssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return header + `:root {\n\t${tokens.join("\n\t")}\n}\n`;
+  return prettier.format(header + `:root {${tokens.join(EOL)}}`, { parser: "css" });
 };
 
 export const registerFormatterCss = (sd: StyleDictionary): void => {

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

@@ -1,4 +1,6 @@
 import { Core as StyleDictionary } from "style-dictionary";
+import * as prettier from "prettier";
+
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments";
 
 export const formatDocsPlatform: CalledFormatterFunction = (args) => {
@@ -15,7 +17,7 @@ export const formatDocsPlatform: CalledFormatterFunction = (args) => {
     output.tokens[token.type].push(token);
   }
 
-  return JSON.stringify(output, null, 2);
+  return prettier.format(JSON.stringify(output, null, 2), { parser: "json" });
 };
 
 export const registerFormatterDocs = (sd: StyleDictionary): void => {

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

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

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

@@ -2,7 +2,10 @@ 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 { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js";
+import { EOL } from "os";
 
 export const formatScssPlatform: CalledFormatterFunction = (args) => {
   const { file, dictionary } = args;
@@ -12,7 +15,7 @@ export const formatScssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return header + tokens.join("\n");
+  return prettier.format(header + tokens.join(EOL), { parser: "scss" });
 };
 
 export const registerFormatterScss = (sd: StyleDictionary): void => {

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

@@ -35,23 +35,23 @@ export const FormattingRules: Partial<Record<PlatformUnion | "default", Formatte
     commentStyle: "long",
     indentation: "  ",
     separator: ":",
-    join: "\n\t",
+    join: "",
     suffix: ";",
   },
   sass: {
     prefix: "$",
     commentStyle: "short",
     indentation: "",
     separator: ":",
-    join: "\n",
+    join: "",
     suffix: ";",
   },
   scss: {
     prefix: "$",
     commentStyle: "short",
     indentation: "",
     separator: ":",
-    join: "\n",
+    join: "",
     suffix: ";",
   },
 };

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

@@ -1,5 +1,7 @@
 import { writeFileSync } from "fs";
 import { resolve } from "path";
+import * as prettier from "prettier";
+
 import { Platform } from "../../../../types/platform.js";
 import { Options } from "../../../../types/styleDictionary/options.js";
 import { DeepKeyTokenMap } from "../../../../types/tokenStudio/designTokenTypes.js";
@@ -14,6 +16,8 @@ export function formatExtraOutput(
     const ensureIfArray = (x: any) => (Array.isArray(x) ? (x as any[]) : x);
 
     if (index) {
+      let parser;
+      // Set output
       switch (args.platform) {
         case "css":
         case "scss":
@@ -29,14 +33,14 @@ export function formatExtraOutput(
           const classes = index.class
             ? index.class.map((cls) => {
                 const c = ensureIfArray(outputObject[`${cls[1]}.${args.platform}`]);
-                return cls && Array.isArray(c) ? `.${cls[0]} {\n\t${c.join("\n\t")}\n}` : "";
+                return cls && Array.isArray(c) ? `.${cls[0]} {${c.join("")}}` : "";
               })
             : [];
           const mixins = index.mixin
             ? index.mixin.map(([mixinName, output]) => {
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                 return Array.isArray(m)
-                  ? `@mixin ${mixinName} {\n\t${m.map((o) => `${o}`.replaceAll("$", "--")).join("\n\t")}\n}`
+                  ? `@mixin ${mixinName} {${m.map((o) => `${o}`.replaceAll("$", "--")).join("")}}`
                   : "";
               })
             : [];
@@ -45,9 +49,8 @@ export function formatExtraOutput(
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                 const cssProps = m.map((o) => `${o}`.replaceAll("$", "--"));
                 return Array.isArray(m)
-                  ? `${
-                      output === "light" ? `:root {\n\t${cssProps.join("\n\t")}\n}\n` : ""
-                    }@media (${mediaSchemed}) {\n\t.calcite-mode-auto {\n\t\t${cssProps.join("\n\t\t")}\n\t}\n}`
+                  ? `${output === "light" ? `:root {${cssProps.join("")}}` : ""
+                    }@media (${mediaSchemed}) {.calcite-mode-auto {${cssProps.join("")}}}`
                   : "";
               })
             : [];
@@ -72,32 +75,55 @@ export function formatExtraOutput(
           break;
       }
 
-      writeFileSync(resolve(args.buildPath, index.name), `${args.header}${outputFiles[index.name].join("\n\n")}\n`);
+      // Set Parser
+      switch (args.platform) {
+        case "css":
+        case "scss":
+          parser = args.platform;
+          break;
+        case "sass":
+          parser = "scss";
+        case "es6":
+        case "js":
+          parser = "babel";
+          break;
+        case "docs":
+          parser = "json";
+        default:
+          break;
+      }
+
+      writeFileSync(
+        resolve(args.buildPath, index.name),
+        prettier.format(`${args.header}${outputFiles[index.name].join(" ")}`, { parser })
+      );
     }
 
     Object.entries(outputObject).forEach(([fileName, outputList]) => {
       const absoluteFilePath = resolve(args.buildPath, `${fileName}`);
       switch (args.platform) {
         case Platform.CSS:
           if (typeof outputList[0] === "string" && outputList[0].slice(0, 2) === "--") {
-            writeFileSync(absoluteFilePath, `${args.header}:root{\n\t${outputList.join("\n\t")}\n}\n`);
+            writeFileSync(
+              absoluteFilePath,
+              prettier.format(`${args.header}:root{${outputList.join("")}}`, { parser: "css" })
+            );
           } else {
-            writeFileSync(absoluteFilePath, `${args.header}${outputList.join("\n\n")}\n`);
+            writeFileSync(absoluteFilePath, prettier.format(`${args.header}${outputList.join("")}`, { parser: "css" }));
           }
           break;
         case Platform.SCSS:
         case Platform.SASS:
-          if (typeof outputList[0] === "string" && outputList[0][0] === "$") {
-            writeFileSync(absoluteFilePath, `${args.header}${outputList.join("\n")}\n`);
-          } else {
-            writeFileSync(absoluteFilePath, `${args.header}${outputList.join("\n\n")}\n`);
-          }
+          writeFileSync(absoluteFilePath, prettier.format(`${args.header}${outputList.join("")}`, { parser: "scss" }));
           break;
         case Platform.JS:
-          writeFileSync(absoluteFilePath, args.header + "export default " + outputList[0] + "\n");
+          writeFileSync(
+            absoluteFilePath,
+            prettier.format(args.header + "export default " + outputList[0] + "", { parser: "babel" })
+          );
           break;
         case Platform.DOCS:
-          writeFileSync(absoluteFilePath, outputList[0]);
+          writeFileSync(absoluteFilePath, prettier.format(outputList[0].join(""), { parser: "json" }));
           break;
         default:
           break;