fixup! Fix(exporter-scss): Fix exporter to make it work again after S…

…upernova token changes #DS-936

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

@@ -1,13 +1,13 @@
 [
   {
     "id": "149fc92b-8586-11eb-a324-c7f25166e00c",
-    "name": "10",
-    "description": "10",
+    "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": {
@@ -33,13 +33,13 @@
   },
   {
     "id": "149fc92c-8586-11eb-a324-c7f25166e00c",
-    "name": "20",
-    "description": "20",
+    "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": {
@@ -65,13 +65,13 @@
   },
   {
     "id": "149fc92c-8586-11eb-a324-c7f25166e00c",
-    "name": "30",
-    "description": "30",
+    "name": "Text-Italic",
+    "description": "Text-Italic",
     "tokenType": "Typography",
     "origin": {
       "source": "Figma",
       "id": "S:5642100401a4019c765b51f22f0f203de2cd1a02,",
-      "name": "Base/Pink/30/italic"
+      "name": "Body/Medium/Text-Italic"
     },
     "value": {
       "font": {

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

@@ -1,46 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`generateTypography should generate simple output 1`] = `
-"$basepink-10: (
-    : (
-        font-family: "'Test', sans-serif",
+"$body-medium-text-italic: (
+    mobile: (
+        font-family: "'Ebony', sans-serif",
         font-size: 1rem,
-        font-style: normal,
+        font-style: italic,
         font-weight: 300,
         line-height: 0.1,
         letter-spacing: 10,
         text-indent: 10,
     ),
 ) !default;
 
-$basepink-20: (
-    : (
+$body-medium-text-light: (
+    mobile: (
         font-family: "'Test', sans-serif",
         font-size: 1rem,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 300,
         line-height: 0.1,
         letter-spacing: 10,
         text-indent: 10,
     ),
 ) !default;
 
-$basepink-italic: (
-    : (
-        font-family: "'Ebony', sans-serif",
+$body-medium-text-regular: (
+    mobile: (
+        font-family: "'Test', sans-serif",
         font-size: 1rem,
-        font-style: italic,
-        font-weight: 300,
+        font-style: normal,
+        font-weight: 400,
         line-height: 0.1,
         letter-spacing: 10,
         text-indent: 10,
     ),
 ) !default;
 
 $styles: (
-    basepink-10: $basepink-10,
-    basepink-20: $basepink-20,
-    basepink-italic: $basepink-italic,
+    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,13 +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 = '',
-  limitByName = '',
+  skipByName = '',
 ): string {
   let tokens = allTokens.sort((a, b) => {
     if (sortByNum) {
@@ -47,26 +52,25 @@ export function generateSimple(
   const vars: string[] = [];
   const types = {};
   tokens.forEach((token) => {
-    if (limitByName.length > 0 && !token.name.startsWith(limitByName)) {
+    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);
     }
 
-    // Check if token is a group token, because it has a single digit at the end of the name
-    const groupToken = token.name.match(/ \d$/);
+    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));
         }
       });
     }
@@ -122,7 +126,7 @@ export function generateSimple(
     }
 
     if (groupToken) {
-      const nameWithoutGroup = cleanName(token.name.replace(/ \d$/, ''));
+      const nameWithoutGroup = slugifyName(token.name.replace(/ \d$/, ''));
       const groupOriginal = vars.filter((item) => item.startsWith(`$${nameWithoutGroup}: `))[0];
       const index = vars.indexOf(groupOriginal);
       if (index > -1) {

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

@@ -2,11 +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 { localeSort } from '../sorters/localeSort';
 import { Token } from '..';
 
+const ebonyFontWeights = {
+  400: 300,
+  600: 400,
+};
+
 export function generateTypography(
   allTokens: Array<Token>,
   defaultFontSize: string,
@@ -18,9 +23,9 @@ export function generateTypography(
   const breakpoints = breakpointsString.trim().split(',');
   const styles = {};
   tokens.forEach((token) => {
-    let name = cleanName(token.name);
+    let name = slugifyName(token.name);
     if (token.origin) {
-      name = cleanName(token.origin.name);
+      name = slugifyName(token.origin.name);
     }
     let nameWithoutBreakpoint = name;
     let breakpoint = breakpoints[0];
@@ -37,12 +42,7 @@ export function generateTypography(
 
     // Font Ebony has a different font weight mapping, so we remap these values directly
     if (token.value.font.family === 'Ebony') {
-      if (fontWeight === 400) {
-        fontWeight = 300;
-      }
-      if (fontWeight === 600) {
-        fontWeight = 400;
-      }
+      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

exporters/scss/src/js/normalizers/__tests__/names.test.js

@@ -1,11 +1,13 @@
-import { cleanName } from '../names';
+import { slugifyName } from '../names';
 
-describe('cleanName', () => {
+describe('slugifyName', () => {
   it.each([
     // name, expected
     ['test', 'test'],
     ['test--test', 'test-test'],
+    ['test test', 'test-test'],
+    ['test--12--TEST', 'test-test'],
   ])('should clean name', (name, expected) => {
-    expect(cleanName(name)).toBe(expected);
+    expect(slugifyName(name)).toBe(expected);
   });
 });

exporters/scss/src/js/normalizers/names.ts

@@ -1,8 +1,15 @@
-export function cleanName(name: string): string {
-  return name
-    .replace(/\s/g, '-')
-    .replace(/\//g, '-')
-    .replace(/-\d\d-/g, '-')
-    .replace(/--+/g, '-')
-    .toLowerCase();
+export function slugifyName(name: string): string {
+  return (
+    name
+      // Replace all white space characters with dashes, `Text Primary` -> `Text-Primary`
+      .replace(/\s/g, '-')
+      // Replace all forward slashes with dashes, `Text/Primary` -> `Text-Primary`
+      .replace(/\//g, '-')
+      // Replace `dash number number dash` with single dash, `Text-01-Primary` -> `Text-Primary`
+      .replace(/-\d\d-/g, '-')
+      // Replace all double dashes with single dashes, `Text--Primary` -> `Text-Primary`
+      .replace(/--+/g, '-')
+      // Make all characters lowercase, `Text-Primary` -> `text-primary`
+      .toLowerCase()
+  );
 }

exporters/scss/src/js/sorters/localeSort.ts

@@ -1,9 +1,9 @@
-import { cleanName } from '../normalizers/names';
+import { slugifyName } from '../normalizers/names';
 import type { Token } from '../index';
 
 export function localeSort(a: Token, b: Token) {
-  const aCompare = cleanName(a.origin ? a.origin.name : a.name);
-  const bCompare = cleanName(b.origin ? b.origin.name : b.name);
+  const aCompare = slugifyName(a.origin ? a.origin.name : a.name);
+  const bCompare = slugifyName(b.origin ? b.origin.name : b.name);
 
   return aCompare.localeCompare(bCompare);
 }