generate fallback spacings

DarkSymm · Jun 14, 2021 · b1d3a7c · b1d3a7c
1 parent 652ca66
commit b1d3a7c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/lib/fluidSpacing.js b/lib/fluidSpacing.js
@@ -21,6 +21,11 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
     let css = {
         ':root': root,
     }
+    let fallbackScale = {};
+
+    let fallbackSpacings = {};
+
+
 
     Object.entries( classes ).forEach( (section, classes) => {
 
@@ -29,8 +34,10 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
             const minSize = theme('utopia.minSize') * multiplier;
             const maxSize = theme('utopia.maxSize') * multiplier;
 
+
             root[`--fs-${size}`] = `calc( ${minSize/16}rem + (${maxSize} - ${minSize}) * var(--fluid-bp) )`,
-                generatedScale[`${size}`] = `var(--fs-${size})`;
+            generatedScale[`${size}`] = `var(--fs-${size})`;
+            fallbackScale[`${size}`] = `${minSize}px`;
         });
 
         Object.entries( pairs ).map( ([fromSize, toSize], index) => {
@@ -48,7 +55,7 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
 
             root[`--fs-${fromSize}-${toSize}`] = `calc( ${minSize/16}rem + (${maxSize} - ${minSize}) * var(--fluid-bp) )`,
             generatedScale[`${fromSize}-${toSize}`] = `var(--fs-${fromSize}-${toSize})`;
-
+            fallbackScale[`${fromSize}-${toSize}`] = `${minSize}px`; 
         });
 
         customPairs.forEach( (pair) => {
@@ -67,6 +74,7 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
 
                 root[`--fs-${fromSize}-${toSize}`] = `calc( ${minSize/16}rem + (${maxSize} - ${minSize}) * var(--fluid-bp) )`,
                 generatedScale[`${fromSize}-${toSize}`] = `var(--fs-${fromSize}-${toSize})`;
+                fallbackScale[`${fromSize}-${toSize}`] = `${minSize}px`; 
             });
         });
 
@@ -89,7 +97,8 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
                         'margin-top': `calc(var(--fs-${size}) * calc(1 - var(--tw-space-y-reverse)))`,
                         'margin-bottom': `calc(var(--fs-${size}) * var(--tw-space-y-reverse))`,
                     },
-                })
+                });
+
             });
 
             Object.entries( pairs ).map( ([fromSize, toSize], index) => {
@@ -133,38 +142,49 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
                 Object.entries( scale ).map( ([size, multiplier], index) => {
 
                     let properties = {}; 
+                    let fallbackProperties = {}; 
                     attributes.forEach( (attribute) => {
                         properties[`${attribute}`] = `var(--fs-${size})`;
+                        fallbackProperties[`${attribute}`] = `${fallbackScale[size]}`;
                     });
 
                     result.push( {
                         [`.${e(fluidPrefix)}${className}-${e(size)}`]: properties
-                    })
+                    });
+                    fallbackSpacings[`.${e(fluidPrefix)}${className}-${e(size)}`] = fallbackProperties;
+
                 });
 
                 Object.entries( pairs ).map( ([fromSize, toSize], index) => {
 
                     let properties = {}; 
+                    let fallbackProperties = {}; 
                     attributes.forEach( (attribute) => {
                         properties[`${attribute}`] = `var(--fs-${fromSize}-${toSize})`;
+                        fallbackProperties[`${attribute}`] = `${fallbackScale[fromSize+'-'+toSize]}`;
                     });
 
                     result.push( {
                         [`.${e(fluidPrefix)}${className}-${e(fromSize)}-${e(toSize)}`]: properties
                     })
+                    fallbackSpacings[`.${e(fluidPrefix)}${className}-${e(fromSize)}-${e(toSize)}`] = fallbackProperties;
                 });
 
                 customPairs.forEach( (pair) => {
                     Object.entries( pair ).map( ([fromSize, toSize], index) => {
 
                         let properties = {}; 
+                        let fallbackProperties = {}; 
                         attributes.forEach( (attribute) => {
                             properties[`${attribute}`] = `var(--fs-${fromSize}-${toSize})`;
+                            fallbackProperties[`${attribute}`] = `${fallbackScale[fromSize+'-'+toSize]}`;
                         });
 
                         result.push( {
                             [`.${e(fluidPrefix)}${className}-${e(fromSize)}-${e(toSize)}`]: properties
-                        })                    
+                        })
+                        fallbackSpacings[`.${e(fluidPrefix)}${className}-${e(fromSize)}-${e(toSize)}`] = fallbackProperties;
+
                     });
                 });
 
@@ -174,6 +194,7 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
         return result;
     }, []);
 
+    addUtilities(fallbackSpacings);
     addUtilities(utopianSpacings);
 } 
 
diff --git a/lib/textSizes.js b/lib/textSizes.js
@@ -26,6 +26,10 @@ module.exports = function({addUtilities, addBase, e, theme, options}) {
                 const stepNum = index - baseIndex;
                 const negativeStep = stepNum < 0;
                 const absStep = Math.abs(stepNum);    
+
+                if(baseIndex === -1) {
+                    throw `Could not find baseStep: '${option.baseTextSize}' in the textSizes config.`;
+                }
 
                 if( stepNum == 0 ) {
                     var stepMin = minSize;
@@ -75,6 +79,10 @@ module.exports = function({addUtilities, addBase, e, theme, options}) {
                 const stepNum = index - baseIndex;
                 const negativeStep = stepNum < 0;
                 const absStep = Math.abs(stepNum);    
+
+                if(baseIndex === -1) {
+                    throw `Could not find baseStep: '${option.baseTextSize}' in the textSizes config.`;
+                }
 
 
                 if( stepNum == 0 ) {