From 657a8d4187d79b4167c34e2eda17f399dfbe45c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 3 Oct 2023 11:27:33 +0200 Subject: [PATCH] fixup! Fix(exporter-scss): Fix exporter to make it work again after Supernova token changes #DS-936 --- exporters/scss/generated/functions.js | 18 +++++------ .../__fixtures__/typographyTokens.json | 18 +++++------ .../__snapshots__/typography.test.ts.snap | 30 +++++++++---------- .../generators/__tests__/typography.test.ts | 2 +- exporters/scss/src/js/generators/simple.ts | 22 ++++++++------ .../scss/src/js/generators/typography.ts | 18 +++++------ .../js/normalizers/__tests__/names.test.js | 8 +++-- exporters/scss/src/js/normalizers/names.ts | 21 ++++++++----- exporters/scss/src/js/sorters/localeSort.ts | 6 ++-- 9 files changed, 78 insertions(+), 65 deletions(-) diff --git a/exporters/scss/generated/functions.js b/exporters/scss/generated/functions.js index 28b13a9bb6..10a1489efc 100644 --- a/exporters/scss/generated/functions.js +++ b/exporters/scss/generated/functions.js @@ -1,12 +1,12 @@ -"use strict";function T(t){return t.replace(/\s/g,"-").replace(/\//g,"-").replace(/-\d\d-/g,"-").replace(/--+/g,"-").toLowerCase()}function O(t){return t.slice(-1)==="s"?t.replace(/.$/,""):t}function w(t){return t==="radius"?"radii":t.slice(-1)==="s"?t:`${t}s`}function M(t,n){let r="";return Object.entries(t).forEach(([l,g])=>{r=`${r} -$${n?`${l}-colors`:w(l)}: ( -${g.map(a=>` ${a}: $${l}-${a},`).join(` +"use strict";function T(t){return t.replace(/\s/g,"-").replace(/\//g,"-").replace(/-\d\d-/g,"-").replace(/--+/g,"-").toLowerCase()}function O(t){return t.slice(-1)==="s"?t.replace(/.$/,""):t}function W(t){return t==="radius"?"radii":t.slice(-1)==="s"?t:`${t}s`}function w(t,n){let r="";return Object.entries(t).forEach(([l,d])=>{r=`${r} +$${n?`${l}-colors`:W(l)}: ( +${d.map(a=>` ${a}: $${l}-${a},`).join(` `)} ) !default; -`}),r}function m(t,n){let r=t.toString();return t>0&&(n==="Pixels"&&(r+="px"),n==="rem"&&(r+="rem")),r}function W(t){const n=t.match(/.{1,2}/g);let r=!0;return n&&n.forEach(l=>{r&&(r=/^(.)\1+$/.test(l))}),r?`${t.substring(0,1)}${t.substring(2,3)}${t.substring(4,5)}`:t}function I(t){return t.a<255?`#${t.hex}`:`#${W(t.hex.substring(0,6))}`}function H(t,n){const r=n.y-t.y,l=n.x-t.x;let a=Math.atan2(r,l)*180/Math.PI;return a+=90,(a<0?360+a:a)%360}function j(t,n){const r=T(t.origin?t.origin.name:t.name),l=T(n.origin?n.origin.name:n.name);return r.localeCompare(l)}function z(t,n){return+t.value.text-+n.value.text}function D(t,n,r,l){const g=r.trim().split(",");let a="",p="";if(g.some(d=>((t.origin?t.origin.name:t.name).includes(d)&&(a=d),(n.origin?n.origin.name:n.name).includes(d)&&(p=d),!1)),l&&!a)return-1;let $=g.indexOf(a)-g.indexOf(p);return $===0&&($=j(t,n)),$}function L(t,n=[],r=!1,l=!1,g="",a=""){let p=t.sort((e,s)=>{if(r){const u=e.name.match(/\d+$/),o=s.name.match(/\d+$/);if(u&&o)return parseInt(u[0],10)-parseInt(o[0],10)}return l?z(e,s):j(e,s)});g.length>0&&(p=t.sort((e,s)=>D(e,s,g,l)));const $=[],d={};p.forEach(e=>{if(a.length>0&&!e.name.startsWith(a))return;let s=T(e.name);e.origin&&!e.origin.name.toLowerCase().startsWith("gradients/gradient")&&(s=T(e.origin.name));const u=e.name.match(/ \d$/);let o="";!u&&n.length>0&&n.forEach(f=>{Object.values(f.tokenIds).indexOf(e.id)>-1&&f.isRoot===!1&&(o=O(T(f.name)))});const i=s.split("-"),v=o===""?i[0]:o,h=o===""?s.replace(`${i[0]}-`,""):s.replace(`${o}-`,"");!u&&i[0]!==s&&(d[v]&&d[v].length>0?d[v].push(h):d[v]=[h]);let c="";if(e.tokenType==="Color")c=I(e.value);else if(e.tokenType==="Radius")c=m(e.value.radius.measure,e.value.radius.unit);else if(e.tokenType==="GenericToken")e.propertyValues.unitless?c=e.value.text:c=m(e.value.text,"Pixels");else if(e.tokenType==="Shadow")c=`${m(e.value.x.measure,e.value.x.unit)} ${m(e.value.y.measure,e.value.y.unit)} ${m(e.value.radius.measure,e.value.radius.unit)} ${m(e.value.spread.measure,e.value.spread.unit)} ${I(e.value.color)}`;else if(e.tokenType==="Gradient"){let f="linear-gradient",y=`${Math.round(H(e.value.from,e.value.to)*100)/100}deg`;e.value.type==="Radial"&&(f="radial-gradient",y="circle at center"),c=`${f}(var(--angle, ${y}), ${e.value.stops.map(x=>`${I(x.color)} ${Math.round(x.position*10)/10*100}%`).join(", ")})`}else e.tokenType==="Border"?c=e.propertyValues.style??m(e.value.width.measure,e.value.width.unit):c=m(e.value.measure,e.value.unit);if(u){const f=T(e.name.replace(/ \d$/,"")),y=$.filter(C=>C.startsWith(`$${f}: `))[0],x=$.indexOf(y);x>-1&&($[x]=$[x].replace(/: (.*) !default;/g,`: ${c}, $1 !default;`))}else $.push(`$${s}: ${c} !default;`)});const S=p.length===0||p[0].tokenType==="Border"?"":M(d,p[0].tokenType==="Color");return`${$.join(` +`}),r}function m(t,n){let r=t.toString();return t>0&&(n==="Pixels"&&(r+="px"),n==="rem"&&(r+="rem")),r}function M(t){const n=t.match(/.{1,2}/g);let r=!0;return n&&n.forEach(l=>{r&&(r=/^(.)\1+$/.test(l))}),r?`${t.substring(0,1)}${t.substring(2,3)}${t.substring(4,5)}`:t}function I(t){return t.a<255?`#${t.hex}`:`#${M(t.hex.substring(0,6))}`}function H(t,n){const r=n.y-t.y,l=n.x-t.x;let a=Math.atan2(r,l)*180/Math.PI;return a+=90,(a<0?360+a:a)%360}function j(t,n){const r=T(t.origin?t.origin.name:t.name),l=T(n.origin?n.origin.name:n.name);return r.localeCompare(l)}function z(t,n){return+t.value.text-+n.value.text}function D(t,n,r,l){const d=r.trim().split(",");let a="",p="";if(d.some(g=>((t.origin?t.origin.name:t.name).includes(g)&&(a=g),(n.origin?n.origin.name:n.name).includes(g)&&(p=g),!1)),l&&!a)return-1;let $=d.indexOf(a)-d.indexOf(p);return $===0&&($=j(t,n)),$}function L(t){return t.name.match(/ \d$/)}function b(t,n=[],r=!1,l=!1,d="",a=""){let p=t.sort((e,s)=>{if(r){const u=e.name.match(/\d+$/),o=s.name.match(/\d+$/);if(u&&o)return parseInt(u[0],10)-parseInt(o[0],10)}return l?z(e,s):j(e,s)});d.length>0&&(p=t.sort((e,s)=>D(e,s,d,l)));const $=[],g={};p.forEach(e=>{if(a.length>0&&!e.name.startsWith(a))return;let s=T(e.name);e.origin&&!e.origin.name.toLowerCase().startsWith("gradients/gradient")&&(s=T(e.origin.name));const u=L(e);let o="";!u&&n.length>0&&n.forEach(f=>{Object.values(f.tokenIds).indexOf(e.id)>-1&&f.isRoot===!1&&(o=O(T(f.name)))});const i=s.split("-"),h=o===""?i[0]:o,v=o===""?s.replace(`${i[0]}-`,""):s.replace(`${o}-`,"");!u&&i[0]!==s&&(g[h]&&g[h].length>0?g[h].push(v):g[h]=[v]);let c="";if(e.tokenType==="Color")c=I(e.value);else if(e.tokenType==="Radius")c=m(e.value.radius.measure,e.value.radius.unit);else if(e.tokenType==="GenericToken")e.propertyValues.unitless?c=e.value.text:c=m(e.value.text,"Pixels");else if(e.tokenType==="Shadow")c=`${m(e.value.x.measure,e.value.x.unit)} ${m(e.value.y.measure,e.value.y.unit)} ${m(e.value.radius.measure,e.value.radius.unit)} ${m(e.value.spread.measure,e.value.spread.unit)} ${I(e.value.color)}`;else if(e.tokenType==="Gradient"){let f="linear-gradient",y=`${Math.round(H(e.value.from,e.value.to)*100)/100}deg`;e.value.type==="Radial"&&(f="radial-gradient",y="circle at center"),c=`${f}(var(--angle, ${y}), ${e.value.stops.map(x=>`${I(x.color)} ${Math.round(x.position*10)/10*100}%`).join(", ")})`}else e.tokenType==="Border"?c=e.propertyValues.style??m(e.value.width.measure,e.value.width.unit):c=m(e.value.measure,e.value.unit);if(u){const f=T(e.name.replace(/ \d$/,"")),y=$.filter(C=>C.startsWith(`$${f}: `))[0],x=$.indexOf(y);x>-1&&($[x]=$[x].replace(/: (.*) !default;/g,`: ${c}, $1 !default;`))}else $.push(`$${s}: ${c} !default;`)});const S=p.length===0||p[0].tokenType==="Border"?"":w(g,p[0].tokenType==="Color");return`${$.join(` `)} -${S}`}function b(t,n,r,l=""){const g=t.sort(j),a=l.trim().split(","),p={};g.forEach(e=>{let s=T(e.name);e.origin&&(s=T(e.origin.name));let u=s,o=a[0];a.forEach(P=>{u.includes(P)&&(o=P,u=u.replace(`-${P}`,""))});const i=m(Math.round(e.value.fontSize.measure/n*1e3)/1e3,"rem");let v="normal",h=+e.value.font.subfamily;e.value.font.family==="Ebony"&&(h===400&&(h=300),h===600&&(h=400)),s.includes("italic")&&(v="italic");const c=e.value.lineHeight&&Math.round(e.value.lineHeight.measure/100*1e3)/1e3,f=m(e.value.letterSpacing.measure,e.value.letterSpacing.unit),y=e.value.textDecoration.toLowerCase(),x=m(e.value.paragraphIndent.measure,e.value.paragraphIndent.unit),C=e.value.textCase==="Original"?"none":e.value.textCase.toLowerCase(),E={fontFamily:`'${e.value.font.family}'${r}`,fontSize:i,fontStyle:v,fontWeight:h,lineHeight:c,letterSpacing:f,textDecoration:y,paragraphIndent:x,textTransform:C};typeof p[u]<"u"?p[u][o]=E:p[u]={[o]:E}});const $=[],d=[];Object.entries(p).forEach(([e,s])=>{if(e.includes("-link"))return;d.push(`${e}: $${e},`);const u=[];a.forEach(o=>{const i=s[o];if(typeof i<"u"){const v=i.lineHeight?` - line-height: ${i.lineHeight},`:"",h=i.letterSpacing!=="0"?` +${S}`}const F={400:300,600:400};function G(t,n,r,l=""){const d=t.sort(j),a=l.trim().split(","),p={};d.forEach(e=>{let s=T(e.name);e.origin&&(s=T(e.origin.name));let u=s,o=a[0];a.forEach(P=>{u.includes(P)&&(o=P,u=u.replace(`-${P}`,""))});const i=m(Math.round(e.value.fontSize.measure/n*1e3)/1e3,"rem");let h="normal",v=+e.value.font.subfamily;e.value.font.family==="Ebony"&&(v=F[v]),s.includes("italic")&&(h="italic");const c=e.value.lineHeight&&Math.round(e.value.lineHeight.measure/100*1e3)/1e3,f=m(e.value.letterSpacing.measure,e.value.letterSpacing.unit),y=e.value.textDecoration.toLowerCase(),x=m(e.value.paragraphIndent.measure,e.value.paragraphIndent.unit),C=e.value.textCase==="Original"?"none":e.value.textCase.toLowerCase(),E={fontFamily:`'${e.value.font.family}'${r}`,fontSize:i,fontStyle:h,fontWeight:v,lineHeight:c,letterSpacing:f,textDecoration:y,paragraphIndent:x,textTransform:C};typeof p[u]<"u"?p[u][o]=E:p[u]={[o]:E}});const $=[],g=[];Object.entries(p).forEach(([e,s])=>{if(e.includes("-link"))return;g.push(`${e}: $${e},`);const u=[];a.forEach(o=>{const i=s[o];if(typeof i<"u"){const h=i.lineHeight?` + line-height: ${i.lineHeight},`:"",v=i.letterSpacing!=="0"?` letter-spacing: ${i.letterSpacing},`:"",c=i.textDecoration!=="none"?` text-decoration: ${i.textDecoration},`:"",f=i.paragraphIndent!=="0"?` text-indent: ${i.paragraphIndent},`:"",y=i.textTransform!=="none"?` @@ -14,15 +14,15 @@ ${S}`}function b(t,n,r,l=""){const g=t.sort(j),a=l.trim().split(","),p={};g.forE font-family: "${i.fontFamily}", font-size: ${i.fontSize}, font-style: ${i.fontStyle}, - font-weight: ${i.fontWeight},${v}${h}${c}${f}${y} + font-weight: ${i.fontWeight},${h}${v}${c}${f}${y} ),`)}}),$.push(`$${e}: ( ${u.join(` `)} ) !default; `)});const S=`$styles: ( - ${d.join(` + ${g.join(` `)} ) !default;`;return`${$.join(` `)} ${S} -`}Pulsar.registerFunction("generateSimple",L);Pulsar.registerFunction("generateTypography",b); +`}Pulsar.registerFunction("generateSimple",b);Pulsar.registerFunction("generateTypography",G); diff --git a/exporters/scss/src/js/generators/__fixtures__/typographyTokens.json b/exporters/scss/src/js/generators/__fixtures__/typographyTokens.json index 0cfa4b8688..fa21419982 100644 --- a/exporters/scss/src/js/generators/__fixtures__/typographyTokens.json +++ b/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": { diff --git a/exporters/scss/src/js/generators/__tests__/__snapshots__/typography.test.ts.snap b/exporters/scss/src/js/generators/__tests__/__snapshots__/typography.test.ts.snap index 8e31e3b6fa..3371169dc0 100644 --- a/exporters/scss/src/js/generators/__tests__/__snapshots__/typography.test.ts.snap +++ b/exporters/scss/src/js/generators/__tests__/__snapshots__/typography.test.ts.snap @@ -1,11 +1,11 @@ // 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, @@ -13,24 +13,24 @@ exports[`generateTypography should generate simple output 1`] = ` ), ) !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, @@ -38,9 +38,9 @@ $basepink-italic: ( ) !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; " `; diff --git a/exporters/scss/src/js/generators/__tests__/typography.test.ts b/exporters/scss/src/js/generators/__tests__/typography.test.ts index 6e11055814..625ed6c221 100644 --- a/exporters/scss/src/js/generators/__tests__/typography.test.ts +++ b/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(); }); }); diff --git a/exporters/scss/src/js/generators/simple.ts b/exporters/scss/src/js/generators/simple.ts index aeff12183e..3321333657 100644 --- a/exporters/scss/src/js/generators/simple.ts +++ b/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, 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) { diff --git a/exporters/scss/src/js/generators/typography.ts b/exporters/scss/src/js/generators/typography.ts index 80cd1221b0..ff6987237c 100644 --- a/exporters/scss/src/js/generators/typography.ts +++ b/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, 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 diff --git a/exporters/scss/src/js/normalizers/__tests__/names.test.js b/exporters/scss/src/js/normalizers/__tests__/names.test.js index f375472a36..599d2d9d6b 100644 --- a/exporters/scss/src/js/normalizers/__tests__/names.test.js +++ b/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); }); }); diff --git a/exporters/scss/src/js/normalizers/names.ts b/exporters/scss/src/js/normalizers/names.ts index 1f5ccc8c7e..2d5df1740f 100644 --- a/exporters/scss/src/js/normalizers/names.ts +++ b/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() + ); } diff --git a/exporters/scss/src/js/sorters/localeSort.ts b/exporters/scss/src/js/sorters/localeSort.ts index 29c99c25e6..0f3a0867d6 100644 --- a/exporters/scss/src/js/sorters/localeSort.ts +++ b/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); }