Fix(exporter-scss): Fix exporter to make it work again after Supernov…

…a token changes #DS-936

Changes:
- Split Radius tokens to separate file
- Remove font weight normalization as it is not needed anymore
- Add temporary hack to make font style italic based on name, until
Supernova makes it clear how to do it in JS
- Fix token grouping

exporters/scss/exporter.json

@@ -5,7 +5,7 @@
   "author": "Jan Kryšpín <[email protected]>",
   "organization": "LMC s.r.o.",
   "source_dir": "src",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "usesBrands": true,
   "config": {
     "sources": "sources.json",

exporters/scss/src/js/generators/__fixtures__/typographyTokens.json

@@ -1,18 +1,18 @@
 [
   {
     "id": "149fc92b-8586-11eb-a324-c7f25166e00c",
-    "name": "10",
-    "description": "10",
-    "tokenType": "Color",
+    "name": "Text-Light",
+    "description": "Text-Light",
+    "tokenType": "Typography",
     "origin": {
       "source": "Figma",
       "id": "S:494296a45a5072718577cc0faae3bd89e6c47207,",
-      "name": "Base/Pink/10"
+      "name": "Body/Medium/Text-Light"
     },
     "value": {
       "font": {
         "family": "Test",
-        "subfamily": "Test"
+        "subfamily": "300"
       },
       "fontSize": {
         "measure": 10
@@ -33,18 +33,50 @@
   },
   {
     "id": "149fc92c-8586-11eb-a324-c7f25166e00c",
-    "name": "20",
-    "description": "20",
-    "tokenType": "Color",
+    "name": "Text-Regular",
+    "description": "Text-Regular",
+    "tokenType": "Typography",
     "origin": {
       "source": "Figma",
       "id": "S:5642100401a4019c765b51f22f0f203de2cd1a02,",
-      "name": "Base/Pink/20"
+      "name": "Body/Medium/Text-Regular"
     },
     "value": {
       "font": {
         "family": "Test",
-        "subfamily": "Test"
+        "subfamily": "400"
+      },
+      "fontSize": {
+        "measure": 10
+      },
+      "lineHeight": {
+        "measure": 10
+      },
+      "letterSpacing": {
+        "measure": 10
+      },
+      "textDecoration": "none",
+      "paragraphIndent": {
+        "measure": 10
+      },
+      "textCase": "Original",
+      "referencedToken": null
+    }
+  },
+  {
+    "id": "149fc92c-8586-11eb-a324-c7f25166e00c",
+    "name": "Text-Italic",
+    "description": "Text-Italic",
+    "tokenType": "Typography",
+    "origin": {
+      "source": "Figma",
+      "id": "S:5642100401a4019c765b51f22f0f203de2cd1a02,",
+      "name": "Body/Medium/Text-Italic"
+    },
+    "value": {
+      "font": {
+        "family": "Ebony",
+        "subfamily": "400"
       },
       "fontSize": {
         "measure": 10

exporters/scss/src/js/generators/__tests__/__snapshots__/typography.test.ts.snap

@@ -1,33 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`generateTypography should generate simple output 1`] = `
-"$basepink-10: (
-    : (
+"$body-medium-text-italic: (
+    mobile: (
+        font-family: "'Ebony', sans-serif",
+        font-size: 1rem,
+        font-style: italic,
+        font-weight: 300,
+        line-height: 0.1,
+        letter-spacing: 10,
+        text-indent: 10,
+    ),
+) !default;
+
+$body-medium-text-light: (
+    mobile: (
         font-family: "'Test', sans-serif",
         font-size: 1rem,
         font-style: normal,
-        font-weight: test,
+        font-weight: 300,
         line-height: 0.1,
         letter-spacing: 10,
         text-indent: 10,
     ),
 ) !default;
 
-$basepink-20: (
-    : (
+$body-medium-text-regular: (
+    mobile: (
         font-family: "'Test', sans-serif",
         font-size: 1rem,
         font-style: normal,
-        font-weight: test,
+        font-weight: 400,
         line-height: 0.1,
         letter-spacing: 10,
         text-indent: 10,
     ),
 ) !default;
 
 $styles: (
-    basepink-10: $basepink-10,
-    basepink-20: $basepink-20,
+    body-medium-text-italic: $body-medium-text-italic,
+    body-medium-text-light: $body-medium-text-light,
+    body-medium-text-regular: $body-medium-text-regular,
 ) !default;
 "
 `;

exporters/scss/src/js/generators/__tests__/typography.test.ts

@@ -3,6 +3,6 @@ import typographyTokens from '../__fixtures__/typographyTokens.json';
 
 describe('generateTypography', () => {
   it.each([[typographyTokens]])('should generate simple output', (allTokens) => {
-    expect(generateTypography(allTokens, '10', ', sans-serif')).toMatchSnapshot();
+    expect(generateTypography(allTokens, '10', ', sans-serif', 'mobile,tablet,desktop')).toMatchSnapshot();
   });
 });

exporters/scss/src/js/generators/simple.ts

@@ -2,7 +2,7 @@
 // @TODO: https://github.com/lmc-eu/spirit-design-system/issues/470
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import { cleanName } from '../normalizers/names';
+import { slugifyName } from '../normalizers/names';
 import { singular } from '../normalizers/singular';
 import { printTypes } from '../printers/types';
 import { printUnit } from '../printers/unit';
@@ -13,12 +13,18 @@ import { valueSort } from '../sorters/valueSort';
 import { breakpointSort } from '../sorters/breakpointSort';
 import { Token } from '..';
 
+function isGroupToken(token: Token): boolean {
+  // Check if token is a group token, because it has a single digit at the end of the name
+  return token.name.match(/ \d$/);
+}
+
 export function generateSimple(
   allTokens: Array<Token>,
   groups = [],
   sortByNum = false,
   sortByValue = false,
   breakpointsString = '',
+  skipByName = '',
 ): string {
   let tokens = allTokens.sort((a, b) => {
     if (sortByNum) {
@@ -45,30 +51,26 @@ export function generateSimple(
 
   const vars: string[] = [];
   const types = {};
-  const names: string[] = [];
   tokens.forEach((token) => {
+    if (skipByName.length > 0 && !token.name.startsWith(skipByName)) {
+      return;
+    }
     // Get correct name of token
-    let name = cleanName(token.name);
+    let name = slugifyName(token.name);
 
     // The Gradients exception is temporary, until JDS fix their naming
     if (token.origin && !token.origin.name.toLowerCase().startsWith('gradients/gradient')) {
-      name = cleanName(token.origin.name);
+      name = slugifyName(token.origin.name);
     }
 
-    let groupToken = false;
-
-    if (names.indexOf(name) > -1) {
-      groupToken = true;
-    } else {
-      names.push(name);
-    }
+    const groupToken = isGroupToken(token);
 
     // Set token types
     let groupName = '';
     if (!groupToken && groups.length > 0) {
       groups.forEach((group: Token) => {
         if (Object.values(group.tokenIds).indexOf(token.id) > -1 && group.isRoot === false) {
-          groupName = singular(cleanName(group.name));
+          groupName = singular(slugifyName(group.name));
         }
       });
     }
@@ -124,7 +126,8 @@ export function generateSimple(
     }
 
     if (groupToken) {
-      const groupOriginal = vars.filter((item) => item.startsWith(`$${name}: `))[0];
+      const nameWithoutGroup = slugifyName(token.name.replace(/ \d$/, ''));
+      const groupOriginal = vars.filter((item) => item.startsWith(`$${nameWithoutGroup}: `))[0];
       const index = vars.indexOf(groupOriginal);
       if (index > -1) {
         vars[index] = vars[index].replace(/: (.*) !default;/g, `: ${value}, $1 !default;`);

exporters/scss/src/js/generators/typography.ts

@@ -2,12 +2,16 @@
 // @TODO: https://github.com/lmc-eu/spirit-design-system/issues/470
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import { cleanName } from '../normalizers/names';
+import { slugifyName } from '../normalizers/names';
 import { printUnit } from '../printers/unit';
-import { normalizeWeight } from '../normalizers/weight';
 import { localeSort } from '../sorters/localeSort';
 import { Token } from '..';
 
+const ebonyFontWeights = {
+  400: 300,
+  600: 400,
+};
+
 export function generateTypography(
   allTokens: Array<Token>,
   defaultFontSize: string,
@@ -19,10 +23,7 @@ export function generateTypography(
   const breakpoints = breakpointsString.trim().split(',');
   const styles = {};
   tokens.forEach((token) => {
-    let name = cleanName(token.name);
-    if (token.origin) {
-      name = cleanName(token.origin.name);
-    }
+    const name = slugifyName(token.origin?.name || token.name);
     let nameWithoutBreakpoint = name;
     let breakpoint = breakpoints[0];
     breakpoints.forEach((bp) => {
@@ -32,15 +33,20 @@ export function generateTypography(
       }
     });
 
-    const subfamily = token.value.font.subfamily.toLowerCase();
     const fontSize = printUnit(Math.round((token.value.fontSize.measure / defaultFontSize) * 1000) / 1000, 'rem');
     let fontStyle = 'normal';
-    let fontWeight = 'normal';
-    if (subfamily === 'italic') {
+    let fontWeight = +token.value.font.subfamily;
+
+    // Font Ebony has a different font weight mapping, so we remap these values directly
+    if (token.value.font.family === 'Ebony') {
+      fontWeight = ebonyFontWeights[fontWeight];
+    }
+
+    // TODO: This is a hack to get around the fact that I don't know how to check if font is italic in JS
+    if (name.includes('italic')) {
       fontStyle = 'italic';
-    } else {
-      fontWeight = subfamily;
     }
+
     const lineHeight = token.value.lineHeight && Math.round((token.value.lineHeight.measure / 100) * 1000) / 1000;
     const letterSpacing = printUnit(token.value.letterSpacing.measure, token.value.letterSpacing.unit);
     const textDecoration = token.value.textDecoration.toLowerCase();
@@ -50,7 +56,7 @@ export function generateTypography(
       fontFamily: `'${token.value.font.family}'${fontFamilyFallback}`,
       fontSize,
       fontStyle,
-      fontWeight: normalizeWeight(fontWeight, token.value.font.family),
+      fontWeight,
       lineHeight,
       letterSpacing,
       textDecoration,