Merge pull request #16 from davidhellmann/v2

🔀 merge: v2 > master

Author: davidhellmann

README.md

@@ -22,8 +22,8 @@ Then add the plugin to your tailwind.config.js file and do your settings if you'
 
 // tailwind.config.js
 module.exports = {
-    // 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.
+    // You can disable the fontSize core plugin if you don't need non fluid font sizes. 
+    // If you don't disable it, the fluid-type plugin simply overrule the default font-sizes if the keys are the same.
     // Or you can use both alongside when you set an prefix in the settings
     corePlugins: {
         fontSize: false,
@@ -52,6 +52,11 @@ Nothing changed here to the default tailwindcss configuration:
 The plugin comes with a default configuration (see below) but it's possible to customize this config for your project.
 As default, we use `rem` for better accessibility, but you can also use `px`.
 
+---
+> **_Important Note:_**  
+> If you set values you have to set all values that you need for your `font-sizes`. There is no value merging here.
+---
+
 ### Default configuration
 
 ```js
@@ -70,7 +75,8 @@ module.exports = {
                 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
+                prefix: '', // set a prefix to use it alongside the default font sizes
+                extendValues: true, // When you set values it will extend the default values. Set this to false to overwrite the values.
             },
             // Creates the text-xx classes
             // This are the default settings and analog to the tailwindcss defaults

src/config/defaults.js

@@ -12,6 +12,7 @@ module.exports = {
         screenMax: 96,
         unit: 'rem',
         prefix: '',
+        extendValues: true,
     },
     values: {
         'xs': [-2, 1.6],

src/index.js

@@ -7,13 +7,13 @@ module.exports = plugin.withOptions(
     function (options) {
         return function ({addUtilities, variants, e}) {
             addUtilities(createClasses(options, e),
-                variants('fontSize', defaults.variants));
+                variants('fontSizeFluid', defaults.variants));
         };
     },
     function (options) {
         return {
             theme: {
-                fontSize: createThemeOptions(options, defaults)
+                fontSizeFluid: createThemeOptions(options, defaults)
             }
         };
     },

src/utils/createData.js

@@ -5,10 +5,23 @@ module.exports = (options, data) => {
         // Add settings
         data.settings = Object.fromEntries(Object.entries({
             ...defaults.settings, ...options?.settings
-        }).filter(([key]) => key !== 'unit').filter(([key]) => key !== 'prefix'));
+        }));
+
+        // Save extendValues
+        const extendValues = data.settings.extendValues
+
+        // Remove settings from object
+        delete data.settings.unit
+        delete data.settings.prefix
+        delete data.settings.extendValues
 
         // Add values
-        data.values = {...defaults.values, ...options?.values }
+        if (extendValues) {
+            data.values = {...defaults.values, ...options?.values }
+        } else {
+            const values = options?.values ? options?.values : defaults.values;
+            data.values = { ...values }
+        }
 
         // Add prefix
         data.prefix = options?.settings?.prefix || defaults.settings?.prefix || ''