Merged in fix/3697-prettier-configs (pull request #3396)

fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood

packages/design-system/generate/generate.ts

@@ -1,14 +1,14 @@
-import { extend } from 'colord'
-import mixPlugin from 'colord/plugins/mix'
-import fs from 'node:fs'
+import { extend } from "colord"
+import mixPlugin from "colord/plugins/mix"
+import fs from "node:fs"
 
 import {
   FALLBACK_THEME,
   getThemeForToken,
   ignoreStyles,
   kebabify,
-} from './utils'
-import json from './variables.json' assert { type: 'json' }
+} from "./utils"
+import json from "./variables.json" assert { type: "json" }
 
 extend([mixPlugin])
 
@@ -26,7 +26,7 @@ themes.set(FALLBACK_THEME, new Map())
 // Collect all real themes
 json.collections
   .find((collection) => {
-    return collection.name === 'Color Theming'
+    return collection.name === "Color Theming"
   })
   ?.modes.forEach((mode) => {
     themes.set(mode.name, new Map())
@@ -42,7 +42,7 @@ const responsiveTokens = new Set()
 
 // Collect responsive tokens
 json.collections
-  .find((collection) => collection.name === 'Responsive')
+  .find((collection) => collection.name === "Responsive")
   ?.modes.forEach((mode) => {
     mode.variables.forEach((variable) => {
       responsiveTokens.add(variable.name)
@@ -60,23 +60,23 @@ json.collections.forEach((collection) => {
         const tokenTheme = getThemeForToken(token, mode, themes)
 
         switch (variable.type) {
-          case 'boolean':
-            if (typeof variable.value === 'boolean') {
+          case "boolean":
+            if (typeof variable.value === "boolean") {
               // Handle text transform
               if (/text transform/i.test(variable.name)) {
                 token = variable.name.replace(
                   /text transform/i,
-                  'Text-Transform'
+                  "Text-Transform"
                 )
-                value = variable.value ? 'uppercase' : 'none'
+                value = variable.value ? "uppercase" : "none"
               }
               // Handle text decoration
               else if (/text decoration/i.test(variable.name)) {
                 token = variable.name.replace(
                   /text decoration/i,
-                  'Text-Decoration'
+                  "Text-Decoration"
                 )
-                value = variable.value ? 'underline' : 'none'
+                value = variable.value ? "underline" : "none"
               }
             } else {
               throw new Error(
@@ -84,8 +84,8 @@ json.collections.forEach((collection) => {
               )
             }
             break
-          case 'number':
-            if (typeof variable.value === 'number') {
+          case "number":
+            if (typeof variable.value === "number") {
               // Only use two decimals for all numbers
               value = Number(variable.value.toFixed(2))
             } else {
@@ -96,7 +96,7 @@ json.collections.forEach((collection) => {
             break
         }
 
-        if (typeof value === 'string' || typeof value === 'number') {
+        if (typeof value === "string" || typeof value === "number") {
           const theme = themes.get(tokenTheme)
           if (theme) {
             theme.set(token, {
@@ -125,11 +125,11 @@ json.collections.forEach((collection) => {
         const tokenTheme = getThemeForToken(token, mode, themes)
 
         switch (variable.type) {
-          case 'color':
-          case 'string':
-          case 'number':
+          case "color":
+          case "string":
+          case "number":
             // Some values are defined as objects, so we need to dig out the real value
-            if (typeof value === 'object' && 'name' in value) {
+            if (typeof value === "object" && "name" in value) {
               value = value.name
             }
 
@@ -139,13 +139,13 @@ json.collections.forEach((collection) => {
               value = `Impl-${value}`
             }
 
-            if (typeof value === 'string') {
+            if (typeof value === "string") {
               const theme = themes.get(tokenTheme)
               if (theme) {
                 theme.set(token, {
                   // We can only resolve aliases after we have collected all
                   // primitives and aliases.
-                  resolved: '',
+                  resolved: "",
                   alias: value,
                 })
               }
@@ -165,8 +165,8 @@ json.collections.forEach((collection) => {
 json.collections.forEach((collection) => {
   collection.modes.forEach((mode) => {
     mode.variables.forEach((variable) => {
-      if (variable.type === 'effect') {
-        if (typeof variable.value === 'object' && 'effects' in variable.value) {
+      if (variable.type === "effect") {
+        if (typeof variable.value === "object" && "effects" in variable.value) {
           if (variable.value.effects.length > 1) {
             console.warn(
               `Unsupported effect declaration with multiple effects.`,
@@ -176,7 +176,7 @@ json.collections.forEach((collection) => {
           // We only support one effect declaration per variable
           const effect = variable.value.effects[0]
           switch (effect.type) {
-            case 'DROP_SHADOW': {
+            case "DROP_SHADOW": {
               const { r, g, b, a } = effect.color
               const { x, y } = effect.offset
               const value = `${x}px ${y}px ${effect.radius}px ${effect.spread}px rgba(${r}, ${g}, ${b}, ${a})`
@@ -240,7 +240,7 @@ themes.forEach((themeTokenValues) => {
 
 // Prepare for output
 const variablesJsOutput = [
-  '/* This file is generated, do not edit manually! */',
+  "/* This file is generated, do not edit manually! */",
 ]
 themes.forEach((themeTokenValues, themeKey) => {
   const cssContentPrimitives: string[] = []
@@ -255,12 +255,12 @@ themes.forEach((themeTokenValues, themeKey) => {
         `  --${outputToken}: var(--${kebabify(outputValue.toString())});`
       )
     } else {
-      if (typeof outputValue === 'string') {
+      if (typeof outputValue === "string") {
         // Check for properties that need quotes
         if (/font(-| )family/gi.test(token)) {
           outputValue = `"${outputValue}"`
         }
-      } else if (typeof outputValue === 'number') {
+      } else if (typeof outputValue === "number") {
         // font-weight is unitless
         if (!/font(-| )weight/gi.test(token)) {
           outputValue = `${outputValue}px`
@@ -278,25 +278,25 @@ themes.forEach((themeTokenValues, themeKey) => {
   const filename = kebabify(themeKey).toLowerCase()
 
   const cssOutput = [
-    '/* This file is generated, do not edit manually! */',
+    "/* This file is generated, do not edit manually! */",
     // The base styles target the :root.
     // All themes require the use of their scoping classname to be used.
-    themeKey === FALLBACK_THEME ? ':root {' : `.${filename} {`,
-    '  /* Values */',
+    themeKey === FALLBACK_THEME ? ":root {" : `.${filename} {`,
+    "  /* Values */",
     ...cssContentPrimitives.sort(),
-    '',
-    '  /* Aliases */',
+    "",
+    "  /* Aliases */",
     ...cssContentAliases.sort(),
-    '}',
-    '', // New line at end of file
+    "}",
+    "", // New line at end of file
   ]
 
-  fs.writeFileSync(`../lib/styles/${filename}.css`, cssOutput.join('\n'), {
-    encoding: 'utf-8',
+  fs.writeFileSync(`../lib/styles/${filename}.css`, cssOutput.join("\n"), {
+    encoding: "utf-8",
   })
 
   const resolvedJsOutput = [
-    '/* This file is generated, do not edit manually! */',
+    "/* This file is generated, do not edit manually! */",
     `export const theme = ${JSON.stringify(
       Array.from(themeTokenValues).reduce(
         (acc, [token, value]) => {
@@ -313,9 +313,9 @@ themes.forEach((themeTokenValues, themeKey) => {
   ]
   fs.writeFileSync(
     `../lib/styles/${filename}.js`,
-    resolvedJsOutput.join('\n'),
+    resolvedJsOutput.join("\n"),
     {
-      encoding: 'utf-8',
+      encoding: "utf-8",
     }
   )
 
@@ -323,14 +323,14 @@ themes.forEach((themeTokenValues, themeKey) => {
   // It is mainly used for the Storybook to show all the variables.
   variablesJsOutput.push(
     `export const ${themeKey
-      .split(' ')
+      .split(" ")
       .map((v, i) => (i === 0 ? v.toLowerCase() : v))
       .join(
-        ''
+        ""
       )} = ${JSON.stringify(Object.fromEntries(themeTokenValues.entries()))} as const`
   )
 })
 
-fs.writeFileSync(`../lib/tokens/index.ts`, variablesJsOutput.join('\n'), {
-  encoding: 'utf-8',
+fs.writeFileSync(`../lib/tokens/index.ts`, variablesJsOutput.join("\n"), {
+  encoding: "utf-8",
 })

packages/design-system/generate/utils.ts

@@ -1,9 +1,9 @@
 export function kebabify(str: string) {
-  return str.replace(/\/|\s/g, '-').replace(/\(|\)|\[|\]/g, '')
+  return str.replace(/\/|\s/g, "-").replace(/\(|\)|\[|\]/g, "")
 }
 
 export function ignoreStyles(mode: { name: string }) {
-  if (mode.name === 'Style') {
+  if (mode.name === "Style") {
     // Ignore Figma Styles, we only want to process variables.
     // But the exported variables.json includes Figma Styles too.
     return false
@@ -12,7 +12,7 @@ export function ignoreStyles(mode: { name: string }) {
 }
 
 // Some tokens are the same for all themes. Group them into this theme.
-export const FALLBACK_THEME = 'base'
+export const FALLBACK_THEME = "base"
 
 // The variables exported from Figma are not grouped by theme.
 // We used this function to help us group by theme.
@@ -24,10 +24,10 @@ export function getThemeForToken(
   themes: Map<string, unknown>
 ) {
   // If the given value is an object and has a name property, use that as comparison value.
-  const compare = typeof token === 'string' ? token : token.name
+  const compare = typeof token === "string" ? token : token.name
   const theme = Array.from(themes.keys()).find((theme) => {
     // Match against "theme/", use that if it matches
-    if (compare.indexOf(theme + '/') >= 0) {
+    if (compare.indexOf(theme + "/") >= 0) {
       return theme
     }