Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix(variables-scss): Fix SCSS typography font family export #1673

Merged
merged 1 commit into from
Oct 2, 2024
Merged

Fix(variables-scss): Fix SCSS typography font family export #1673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion exporters/variables-scss/generated/exporter.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ ${a.join(`,
}`,Rt=a=>`(
${a.join(`,
`)},
)`,Bt=(a,i)=>`${a}: ${/\s/.test(i)?`"${i}"`:i}`,jt=(a,i)=>`${It(a)}: ${Et(i)?i:Dt(i)}`,Le=(a,i)=>Object.entries(a).map(u=>{const[n,T]=u;return i(n,T)}),xt=({fontFamily:a,fontSize:i,fontWeight:u,lineHeight:n},T,m)=>{const f={fontFamily:`'${a.text}', sans-serif`,fontSize:`'${i.measure}${i.unit==="Pixels"?"px":i.unit}'`,fontStyle:`'${T?"italic":"normal"}'`,fontWeight:u.text};n&&n.measure&&(f.lineHeight=n.measure/100);const r=Le(f,jt),t=Le(f,Bt);return m?Nt(t):Rt(r)},Ne="-colors",qe="Colors",j="colors",Fe="styles",Lt=(a,i,u,n)=>{const T=i,m=a.slice(0,2),f=Vt(a).toLowerCase(),r=Yt(a).toLowerCase();let t=u;m.forEach((o,e)=>{const c=n?C(f):`$${f}`,y=e===0?c:o;e===m.length-1?t[r]=xt(T.value,f.includes("italic"),n):(t[y]=t[y]||{},t=t[y])})},Ft=(a,i,u,n,T,m=!1)=>{let f=T;a.forEach((r,t)=>{const o=t===0?Kt(r,i.tokenType,m):r;if(t===a.length-1){const e=m?`${C(D(i,u,n))}`:`$${D(i,u,n)}`,c=Gt(i,m);f[c]=e}else f[m?C(o):o]=f[o]||{},f=f[m?C(o):o]})},At=(a,i,u,n,T)=>{var r,t;const{tokenType:m}=a,f=(t=(r=a.origin)==null?void 0:r.name)==null?void 0:t.split("/");return f&&(m===v.TokenType.typography?Lt(f,a,n,T):Ft(f,a,i,u,n,T)),n},Ze=(a,i)=>{const u=i?qe:Ne;return a.replace(u,"").replace("$","")},Mt=(a,i)=>({...a,[Ze(i,!1)]:i}),$t=(a,i)=>a.reduce((u,n)=>({...u,[Ze(n,i)]:n}),{}),wt=a=>a.reduce(Mt,{}),Ht=(a,i,u,n,T)=>{const m=a.reduce((t,o)=>{const e=At(o,u,n,t,T);return{...t,...e}},{}),f=Object.keys(m).filter(t=>t.endsWith(T?qe:Ne));if(f.length>0){const t=$t(f,T),o=T?j:`$${j}`;return{...m,[o]:t}}const r=Object.keys(m).filter(t=>t.includes("heading")||t.includes("body"));if(r.length>0){const t=wt(r),o=T?Fe:`$${Fe}`;return{...m,[o]:{...t,moveToTheEnd:"true"}}}return m},Ae={"radius-full":"full"},Ut=new Map([["breakpoint-mobile",0]]),De=(a,i)=>{const u=Ut.get(a);return typeof u==typeof i?u:i},Wt=a=>Ae[a]?Ae[a]:a,Xe=(a,i)=>{const u=Object.entries(i).reduce((m,[f,r])=>{let t;return typeof r=="object"&&r!==null&&typeof m[f]=="object"?t=Xe(m[f],r):t=r,{...m,[f]:t}},{...a}),n={},T={};return Object.entries(u).forEach(([m,f])=>{typeof f=="object"&&f!==null&&f.moveToTheEnd==="true"?(delete f.moveToTheEnd,T[m]=f):n[m]=f}),{...n,...T}};function Qe(a){return Object.entries(a).map(([i,u])=>{if(typeof u=="object"&&u!==null){const n=Qe(u);return`${i}: (
)`,Bt=(a,i)=>`${a}: ${/\s/.test(i)?`"${i}"`:i}`,jt=(a,i)=>{const u=It(a);let n;return typeof i=="string"&&i.includes(", ")?n=`"${i}"`:Et(i)?n=i:n=Dt(i),`${u}: ${n}`},Le=(a,i)=>Object.entries(a).map(u=>{const[n,T]=u;return i(n,T)}),xt=({fontFamily:a,fontSize:i,fontWeight:u,lineHeight:n},T,m)=>{const f={fontFamily:`'${a.text}', sans-serif`,fontSize:`'${i.measure}${i.unit==="Pixels"?"px":i.unit}'`,fontStyle:`'${T?"italic":"normal"}'`,fontWeight:u.text};n&&n.measure&&(f.lineHeight=n.measure/100);const r=Le(f,jt),t=Le(f,Bt);return m?Nt(t):Rt(r)},Ne="-colors",qe="Colors",j="colors",Fe="styles",Lt=(a,i,u,n)=>{const T=i,m=a.slice(0,2),f=Vt(a).toLowerCase(),r=Yt(a).toLowerCase();let t=u;m.forEach((o,e)=>{const c=n?C(f):`$${f}`,y=e===0?c:o;e===m.length-1?t[r]=xt(T.value,f.includes("italic"),n):(t[y]=t[y]||{},t=t[y])})},Ft=(a,i,u,n,T,m=!1)=>{let f=T;a.forEach((r,t)=>{const o=t===0?Kt(r,i.tokenType,m):r;if(t===a.length-1){const e=m?`${C(D(i,u,n))}`:`$${D(i,u,n)}`,c=Gt(i,m);f[c]=e}else f[m?C(o):o]=f[o]||{},f=f[m?C(o):o]})},At=(a,i,u,n,T)=>{var r,t;const{tokenType:m}=a,f=(t=(r=a.origin)==null?void 0:r.name)==null?void 0:t.split("/");return f&&(m===v.TokenType.typography?Lt(f,a,n,T):Ft(f,a,i,u,n,T)),n},Ze=(a,i)=>{const u=i?qe:Ne;return a.replace(u,"").replace("$","")},Mt=(a,i)=>({...a,[Ze(i,!1)]:i}),$t=(a,i)=>a.reduce((u,n)=>({...u,[Ze(n,i)]:n}),{}),wt=a=>a.reduce(Mt,{}),Ht=(a,i,u,n,T)=>{const m=a.reduce((t,o)=>{const e=At(o,u,n,t,T);return{...t,...e}},{}),f=Object.keys(m).filter(t=>t.endsWith(T?qe:Ne));if(f.length>0){const t=$t(f,T),o=T?j:`$${j}`;return{...m,[o]:t}}const r=Object.keys(m).filter(t=>t.includes("heading")||t.includes("body"));if(r.length>0){const t=wt(r),o=T?Fe:`$${Fe}`;return{...m,[o]:{...t,moveToTheEnd:"true"}}}return m},Ae={"radius-full":"full"},Ut=new Map([["breakpoint-mobile",0]]),De=(a,i)=>{const u=Ut.get(a);return typeof u==typeof i?u:i},Wt=a=>Ae[a]?Ae[a]:a,Xe=(a,i)=>{const u=Object.entries(i).reduce((m,[f,r])=>{let t;return typeof r=="object"&&r!==null&&typeof m[f]=="object"?t=Xe(m[f],r):t=r,{...m,[f]:t}},{...a}),n={},T={};return Object.entries(u).forEach(([m,f])=>{typeof f=="object"&&f!==null&&f.moveToTheEnd==="true"?(delete f.moveToTheEnd,T[m]=f):n[m]=f}),{...n,...T}};function Qe(a){return Object.entries(a).map(([i,u])=>{if(typeof u=="object"&&u!==null){const n=Qe(u);return`${i}: (
${n}
),
`}return`${i}: ${u},
Expand Down
12 changes: 6 additions & 6 deletions exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ describe('stylesObjectGenerator', () => {
'$heading-xlarge-bold': {
desktop:
// eslint-disable-next-line quotes -- we are handling special characters
"(\nfont-family: 'Inter', sans-serif,\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)",
'(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
},
'$heading-xlarge-bold-underline': {
desktop:
// eslint-disable-next-line quotes -- we are handling special characters
"(\nfont-family: 'Inter', sans-serif,\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)",
'(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
},
$styles: {
'heading-xlarge-bold': '$heading-xlarge-bold',
Expand Down Expand Up @@ -157,18 +157,18 @@ describe('stylesObjectGenerator', () => {
'$heading-xlarge-bold': {
desktop:
// eslint-disable-next-line quotes -- we are handling special characters
"(\nfont-family: 'Inter', sans-serif,\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)",
'(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
tablet:
// eslint-disable-next-line quotes -- we are handling special characters
"(\nfont-family: 'Inter', sans-serif,\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)",
'(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
},
},
description: 'should create object structure from typography token',
stylesObjectRef: {
'$heading-xlarge-bold': {
tablet:
// eslint-disable-next-line quotes -- we are handling special characters
"(\nfont-family: 'Inter', sans-serif,\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)",
'(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
},
} as StylesObjectType,
hasJsOutput: false,
Expand Down Expand Up @@ -216,7 +216,7 @@ describe('stylesObjectGenerator', () => {
'$heading-xlarge-bold': {
desktop:
// eslint-disable-next-line quotes -- we are handling special characters
"(\nfont-family: 'Inter', sans-serif,\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)",
'(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
},
exampleRef: 'exampleRef',
},
Expand Down
13 changes: 12 additions & 1 deletion exporters/variables-scss/src/helpers/tokenHelper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,18 @@ const jsKeyValueTemplate: KeyValueTemplateCallback = (key, value) => {
};

const scssKeyValueTemplate: KeyValueTemplateCallback = (key, value) => {
return `${toKebabCase(key)}: ${isNumber(value) ? value : removePairQuotes(value as string)}`;
const formattedKey = toKebabCase(key);
let formattedValue;

if (typeof value === 'string' && value.includes(', ')) {
pavelklibani marked this conversation as resolved.
Show resolved Hide resolved
formattedValue = `"${value}"`;
} else if (isNumber(value)) {
formattedValue = value;
} else {
formattedValue = removePairQuotes(value as string);
}

return `${formattedKey}: ${formattedValue}`;
};

const passObjectKeyValueToCallback = <Shape>(object: Shape, callback: KeyValueTemplateCallback) => {
Expand Down
2 changes: 1 addition & 1 deletion exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ exampleTypographyTokens.set('typographyRef2', {
} as TypographyToken);

export const expectedTypographyValue = `(
font-family: 'Inter', sans-serif,
font-family: "'Inter', sans-serif",
font-size: 64px,
font-style: italic,
font-weight: 700,
Expand Down
Loading