Add more config possibilities

davidhellmann · davidhellmann · commit 0dbaa7c78ee1 · 2021-09-21T16:55:42.000+02:00
- prefix
- extending
- overwriting
diff --git a/README.md b/README.md
@@ -25,8 +25,9 @@ module.exports = {
     theme: {
         // ...
     },
-    // You have to disable the fontSize core 
-    // plugins otherwise it doesn't work
+    // You can disable the fontSize core plugin if you don't need the defaults. 
+    // If you don't disable it, the fluid-type plugin simply overrule the defaults.
+    // Or you can use both alongside when you set an prefix in the settings
     corePlugins: {
         fontSize: false,
         // ...
@@ -60,35 +61,38 @@ As default, we use `rem` for better accessibility, but you can also use `px`.
 // tailwind.config.js
 module.exports = {
     theme: {
-        // your fluid type settings
-        // works only with unitless numbers
-        // This numbers are the defaults settings
-        fluidTypeSettings: {
-            fontSizeMin: 1.125, // 1.125rem === 18px
-            fontSizeMax: 1.25, // 1.25rem === 20px
-            ratioMin: 1.125, // Multiplicator Min
-            ratioMax: 1.2, // Multiplicator Max
-            screenMin: 20, // 20rem === 320px
-            screenMax: 96, // 96rem === 1536px
-            unit: 'rem' // default is rem but it's also possible to use 'px'
-        },
-        // Creates the text-xx classes
-        // This are the default settings and analog to the tailwindcss defaults
-        // Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type. 
         fluidType: {
-            'xs': [-2, 1.6],
-            'sm': [-1, 1.6],
-            'base': [0, 1.6],
-            'lg': [1, 1.6],
-            'xl': [2, 1.2],
-            '2xl': [3, 1.2],
-            '3xl': [4, 1.2],
-            '4xl': [5, 1.1],
-            '5xl': [6, 1.1],
-            '6xl': [7, 1.1],
-            '7xl': [8, 1],
-            '8xl': [9, 1],
-            '9xl': [10, 1],
+            // your fluid type settings
+            // works only with unitless numbers
+            // This numbers are the defaults settings
+            settings: {
+                fontSizeMin: 1.125, // 1.125rem === 18px
+                fontSizeMax: 1.25, // 1.25rem === 20px
+                ratioMin: 1.125, // Multiplicator Min
+                ratioMax: 1.2, // Multiplicator Max
+                screenMin: 20, // 20rem === 320px
+                screenMax: 96, // 96rem === 1536px
+                unit: 'rem', // default is rem but it's also possible to use 'px'
+                prefix: '' // set a prefix to use it alongside the default font sizes
+            },
+            // Creates the text-xx classes
+            // This are the default settings and analog to the tailwindcss defaults
+            // Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.
+            values: {
+                'xs': [-2, 1.6],
+                'sm': [-1, 1.6],
+                'base': [0, 1.6],
+                'lg': [1, 1.6],
+                'xl': [2, 1.2],
+                '2xl': [3, 1.2],
+                '3xl': [4, 1.2],
+                '4xl': [5, 1.1],
+                '5xl': [6, 1.1],
+                '6xl': [7, 1.1],
+                '7xl': [8, 1],
+                '8xl': [9, 1],
+                '9xl': [10, 1],
+            }
         },
     },
     variants: {
@@ -106,9 +110,11 @@ It is also possible to set just the `fontSize` without set the `lineHeight`
 module.exports = {
     theme: {
         fluidType: {
-            // ...
-            'base': 0,
-            // ...
+            values: {
+                // ...
+                'base': 0,
+                // ...
+            }
         }
     }
 };
@@ -124,14 +130,16 @@ documentation. `letterSpacing` can be all values that you like.
 module.exports = {
     theme: {
         fluidType: {
-            // ...
-            'base': [0,
-                {
-                    lineHeight: 1.6,
-                    letterSpacing: '-0.1rem',
-                }
-            ],
-            // ...
+            values: {
+                // ...
+                'base': [0,
+                    {
+                        lineHeight: 1.6,
+                        letterSpacing: '-0.1rem',
+                    }
+                ],
+                // ...
+            }
         }
     }
 };
@@ -145,19 +153,22 @@ module.exports = {
 // tailwind.config.js
 module.exports = {
     theme: {
-        fluidTypeSettings: {
-            fontSizeMin: 1.125,
-            fontSizeMax: 1.25,
-            ratioMin: 1.125,
-            ratioMax: 1.2,
-            screenMin: 20,
-            screenMax: 96,
-            unit: 'rem'
-        },
         fluidType: {
-            // ...
-            'base': 0,
-            // ...
+            settings: {
+                fontSizeMin: 1.125,
+                fontSizeMax: 1.25,
+                ratioMin: 1.125,
+                ratioMax: 1.2,
+                screenMin: 20,
+                screenMax: 96,
+                unit: 'rem',
+                prefix: ''
+            },
+            values: {
+                // ...
+                'base': 0,
+                // ...
+            }
         }
     }
 };
@@ -179,19 +190,22 @@ module.exports = {
 // tailwind.config.js
 module.exports = {
     theme: {
-        fluidTypeSettings: {
-            fontSizeMin: 1.125,
-            fontSizeMax: 1.25,
-            ratioMin: 1.125,
-            ratioMax: 1.2,
-            screenMin: 20,
-            screenMax: 96,
-            unit: 'rem'
-        },
         fluidType: {
-            // ...
-            'base': [0, 1.6],
-            // ...
+            settings: {
+                fontSizeMin: 1.125,
+                fontSizeMax: 1.25,
+                ratioMin: 1.125,
+                ratioMax: 1.2,
+                screenMin: 20,
+                screenMax: 96,
+                unit: 'rem',
+                prefix: ''                
+            },
+            values: {
+                // ...
+                'base': [0, 1.6],
+                // ...
+            }
         }
     }
 };
@@ -214,22 +228,25 @@ module.exports = {
 // tailwind.config.js
 module.exports = {
     theme: {
-        fluidTypeSettings: {
-            fontSizeMin: 1.125,
-            fontSizeMax: 1.25,
-            ratioMin: 1.125,
-            ratioMax: 1.2,
-            screenMin: 20,
-            screenMax: 96,
-            unit: 'rem'
-        },
         fluidType: {
-            // ...
-            'base': [0, {
-                lineHeight: 1.6,
-                letterSpacing: '-0.1rem',
-            }],
-            // ...
+            settings: {
+                fontSizeMin: 1.125,
+                fontSizeMax: 1.25,
+                ratioMin: 1.125,
+                ratioMax: 1.2,
+                screenMin: 20,
+                screenMax: 96,
+                unit: 'rem',
+                prefix: '',
+            },
+            values: {
+                // ...
+                'base': [0, {
+                    lineHeight: 1.6,
+                    letterSpacing: '-0.1rem',
+                }],
+                // ...
+            }
         }
     }
 };
@@ -247,5 +264,36 @@ module.exports = {
 }
 ```
 
+### Set a prefix
+
+```js
+// tailwind.config.js
+module.exports = {
+    theme: {
+        extend: {
+            fluidType: {
+                settings: {
+                    // ...
+                    prefix: 'fluid-',
+                },
+            }
+        }
+    }
+};
+```
+
+```html
+<p class="fluid-text-base">The quick brown fox jumps over the lazy dogs</p>
+```
+
+```css
+.fluid-text-base {
+    font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
+    line-height: 1.6;
+    letter-spacing: -0.1rem;
+}
+```
+
+
 ## 👉🏻 Live Demo
-[Fluid Type Live Demo](https://play.tailwindcss.com/vxnQwJvrQA)
+[Fluid Type Live Demo](https://play.tailwindcss.com/3LDf3gzbhb)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-fluid-type",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Bring fluid type to tailwindcss",
   "main": "src/index.js",
   "license": "MIT",
diff --git a/src/index.js b/src/index.js
@@ -1,24 +1,56 @@
 const plugin = require('tailwindcss/plugin')
+// Defaults
+const DEFAULT_SETTINGS = {
+    fontSizeMin: 1.125,
+    fontSizeMax: 1.25,
+    ratioMin: 1.125,
+    ratioMax: 1.2,
+    screenMin: 20,
+    screenMax: 96,
+    unit: 'rem',
+    prefix: '',
+}
+const DEFAULT_VALUES = {
+    'xs': [-2, 1.6],
+    'sm': [-1, 1.6],
+    'base': [0, 1.6],
+    'lg': [1, 1.6],
+    'xl': [2, 1.2],
+    '2xl': [3, 1.2],
+    '3xl': [4, 1.2],
+    '4xl': [5, 1.1],
+    '5xl': [6, 1.1],
+    '6xl': [7, 1.1],
+    '7xl': [8, 1],
+    '8xl': [9, 1],
+    '9xl': [10, 1],
+}
+const DEFAULT_VARIANTS = ['responsive']
 
 module.exports = plugin(
     function ({addUtilities, theme, variants, e}) {
-        const values = theme('fluidType');
-        const settingsAsArray = Object.entries(theme('fluidTypeSettings'));
-        const settingsAsArrayFiltered = settingsAsArray.filter(([key, value]) => key !== 'unit');
+        const values = theme('fluidType.values', DEFAULT_VALUES);
+        const prefix = theme('fluidType.settings.prefix', DEFAULT_SETTINGS.prefix);
+        const settingsAsArray = Object.entries(theme('fluidType.settings', DEFAULT_SETTINGS));
+        const settingsAsArrayFiltered = settingsAsArray
+            .filter(([key, value]) => key !== 'unit')
+            .filter(([key, value]) => key !== 'prefix');
         const finalSettings = Object.fromEntries(settingsAsArrayFiltered);
         const settingsAreNumbers = Object
             .values(finalSettings)
             .every(value => typeof value === 'number')
 
         const calcModularScale = (value = 0) => {
             if (settingsAreNumbers) {
-                const sFtMin = theme('fluidTypeSettings.fontSizeMin');
-                const sFtMax = theme('fluidTypeSettings.fontSizeMax');
-                const sFtRMin = theme('fluidTypeSettings.ratioMin');
-                const sFtRMax = theme('fluidTypeSettings.ratioMax');
-                const sFtSMin = theme('fluidTypeSettings.screenMin');
-                const sFtSMax = theme('fluidTypeSettings.screenMax');
-                const sFtUnit = typeof theme('fluidTypeSettings.unit') === 'string' ? theme('fluidTypeSettings.unit') : 'rem';
+                const sFtMin = theme('fluidType.settings.fontSizeMin', DEFAULT_SETTINGS.fontSizeMin);
+                const sFtMax = theme('fluidType.settings.fontSizeMax', DEFAULT_SETTINGS.fontSizeMax);
+                const sFtRMin = theme('fluidType.settings.ratioMin', DEFAULT_SETTINGS.ratioMin);
+                const sFtRMax = theme('fluidType.settings.ratioMax', DEFAULT_SETTINGS.ratioMax);
+                const sFtSMin = theme('fluidType.settings.screenMin', DEFAULT_SETTINGS.screenMin);
+                const sFtSMax = theme('fluidType.settings.screenMax', DEFAULT_SETTINGS.screenMax);
+                const sFtUnit = typeof theme('fluidType.settings.unit', DEFAULT_SETTINGS.unit) === 'string'
+                    ? theme('fluidType.settings.unit', DEFAULT_SETTINGS.unit)
+                    : 'rem';
                 const ftMin = sFtMin * Math.pow(sFtRMin, value);
                 const ftMax = sFtMax * Math.pow(sFtRMax, value);
                 return `clamp(${ftMin}${sFtUnit},
@@ -66,42 +98,22 @@ module.exports = plugin(
                     }
 
                     return {
-                        [`.${e(`text-${key}`)}`]: output,
+                        [`.${e(`${prefix}text-${key}`)}`]: output,
                     }
                 }),
             ],
-            variants('fluidType')
+            variants('fluidType', DEFAULT_VARIANTS)
         )
     },
     {
         theme: {
-            fluidTypeSettings: {
-                fontSizeMin: 1.125,
-                fontSizeMax: 1.25,
-                ratioMin: 1.125,
-                ratioMax: 1.2,
-                screenMin: 20,
-                screenMax: 96,
-                unit: 'rem'
-            },
             fluidType: {
-                'xs': [-2, 1.6],
-                'sm': [-1, 1.6],
-                'base': [0, 1.6],
-                'lg': [1, 1.6],
-                'xl': [2, 1.2],
-                '2xl': [3, 1.2],
-                '3xl': [4, 1.2],
-                '4xl': [5, 1.1],
-                '5xl': [6, 1.1],
-                '6xl': [7, 1.1],
-                '7xl': [8, 1],
-                '8xl': [9, 1],
-                '9xl': [10, 1],
+                settings: DEFAULT_SETTINGS,
+                values: DEFAULT_VALUES
             },
         },
         variants: {
-            fluidType: ['responsive'],
+            fluidType: DEFAULT_VARIANTS,
         },
     }
 )

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "tailwindcss-fluid-type",`
`3`		`- "version": "1.2.2",`
	`3`	`+ "version": "1.3.0",`
`4`	`4`	`"description": "Bring fluid type to tailwindcss",`
`5`	`5`	`"main": "src/index.js",`
`6`	`6`	`"license": "MIT",`