perf: exclude unused tokens and splitted helpers form base style

baloise · Nov 7, 2022 · 4e4710e · 4e4710e
1 parent f66d5d8
commit 4e4710e
Show file tree

Hide file tree

Showing 33 changed files with 756 additions and 452 deletions.
diff --git a/.build/generate-css-utils.js b/.build/generate-css-utils.js
@@ -27,21 +27,21 @@ async function generateBackgroundColors() {
 
   lines.push(`.has-background-transparent`)
   lines.push(`  background: transparent !important`)
-  lines.push(`.has-fill-transparent`)
-  lines.push(`  fill: transparent !important`)
-  lines.push(`  @include fillSvg(transparent)`)
-  lines.push(``)
+  // lines.push(`.has-fill-transparent`)
+  // lines.push(`  fill: transparent !important`)
+  // lines.push(`  @include fillSvg(transparent)`)
+  // lines.push(``)
 
   for (const color in colors) {
     lines.push(`.has-background-${color}`)
     lines.push(`  background: var(--bal-color-${color}) !important`)
-    lines.push(`.has-background-${color}-inverted`)
-    lines.push(`  background: var(--bal-color-${color}-inverted) !important`)
-    lines.push(`.has-fill-${color}`)
-    lines.push(`  fill: var(--bal-color-${color}) !important`)
-    lines.push(`  @include fillSvg(var(--bal-color-${color}))`)
-    lines.push(`.has-text-${color}-inverted`)
-    lines.push(`  color: var(--bal-color-${color}-inverted) !important`)
+    // lines.push(`.has-background-${color}-inverted`)
+    // lines.push(`  background: var(--bal-color-${color}-inverted) !important`)
+    // lines.push(`.has-fill-${color}`)
+    // lines.push(`  fill: var(--bal-color-${color}) !important`)
+    // lines.push(`  @include fillSvg(var(--bal-color-${color}))`)
+    // lines.push(`.has-text-${color}-inverted`)
+    // lines.push(`  color: var(--bal-color-${color}-inverted) !important`)
   }
 
   await file.write(path.join(SASS_PATH, 'color.background.helpers.sass'), [...lines, ''].join('\n'))
@@ -145,35 +145,35 @@ async function generateTypography() {
   const spacing = BaloiseDesignToken.spacing
   const lines = []
 
-  function createCssClasses(key, fontSize, lineHeight, space, indent = '') {
-    return `${indent}.title.is-${key},
-${indent}.title.is-size-${key},
-${indent}.subtitle.is-${key},
-${indent}.subtitle.is-size-${key},
-${indent}.is-size-${key}
-  ${indent}+typography(${fontSize}, ${lineHeight}, ${space})`
+  function createCssClasses(key, fontSize, lineHeight, space, legacy, indent = '') {
+    return `${indent}.is-size-${key},
+  ${indent}.is-size-${legacy}
+    ${indent}+typography(${fontSize}, ${lineHeight}, ${space})`
   }
 
   for (const k in sizes) {
     const sizeMobile = sizes[k].mobile
     const spaceMobile = spacing[sizeMobile.spacing].mobile
-    lines.push(createCssClasses(k, sizeMobile.fontSize, sizeMobile.lineHeight, spaceMobile))
+    const legacy = sizes[k].legacy
+    lines.push(createCssClasses(k, sizeMobile.fontSize, sizeMobile.lineHeight, spaceMobile, legacy))
   }
 
   lines.push('')
   lines.push('+tablet')
   for (const k in sizes) {
     const sizeTablet = sizes[k].tablet
     const spaceTablet = spacing[sizeTablet.spacing].tablet
-    lines.push(createCssClasses(k, sizeTablet.fontSize, sizeTablet.lineHeight, spaceTablet, '  '))
+    const legacy = sizes[k].legacy
+    lines.push(createCssClasses(k, sizeTablet.fontSize, sizeTablet.lineHeight, spaceTablet, legacy, '  '))
   }
 
   lines.push('')
   lines.push('+desktop')
   for (const k in sizes) {
     const sizeDesktop = sizes[k].desktop
     const spaceDesktop = spacing[sizeDesktop.spacing].desktop
-    lines.push(createCssClasses(k, sizeDesktop.fontSize, sizeDesktop.lineHeight, spaceDesktop, '  '))
+    const legacy = sizes[k].legacy
+    lines.push(createCssClasses(k, sizeDesktop.fontSize, sizeDesktop.lineHeight, spaceDesktop, legacy, '  '))
   }
 
   await file.write(path.join(SASS_PATH, 'typography.helpers.sass'), [...lines, ''].join('\n'))

diff --git a/.build/tokens-generator.js b/.build/tokens-generator.js
@@ -19,6 +19,10 @@ const spaceVariables = []
 const spaceTabletVariables = []
 const spaceDesktopVariables = []
 
+const spaceVariablesLegacy = []
+const spaceTabletVariablesLegacy = []
+const spaceDesktopVariablesLegacy = []
+
 async function main() {
   log.title('design-tokens - generate')
 
@@ -129,6 +133,10 @@ const toSass = () => [
     sassVariable(sassKey('spacing-values-tablet'), '(' + spaceTabletVariables.join(', ') + ')'),
     sassVariable(sassKey('spacing-values-desktop'), '(' + spaceDesktopVariables.join(', ') + ')'),
     '',
+    sassVariable(sassKey('legacy-spacing-values'), '(' + spaceVariablesLegacy.join(', ') + ')'),
+    sassVariable(sassKey('legacy-spacing-values-tablet'), '(' + spaceTabletVariablesLegacy.join(', ') + ')'),
+    sassVariable(sassKey('legacy-spacing-values-desktop'), '(' + spaceDesktopVariablesLegacy.join(', ') + ')'),
+    '',
   ].join(NEWLINE)
 
 const toLess = () => [
@@ -256,6 +264,12 @@ function generateSpacings() {
     spaceTabletVariables.push(`"${r}": ${sassKey(`space-tablet-${r}`)}`)
     spaceDesktopVariables.push(`"${r}": ${sassKey(`space-desktop-${r}`)}`)
   }
+
+  for (const r in spacing) {
+    spaceVariablesLegacy.push(`"${spacing[r].legacy}": ${sassKey(`space-${r}`)}`)
+    spaceTabletVariablesLegacy.push(`"${spacing[r].legacy}": ${sassKey(`space-tablet-${r}`)}`)
+    spaceDesktopVariablesLegacy.push(`"${spacing[r].legacy}": ${sassKey(`space-desktop-${r}`)}`)
+  }
 }
 
 main()