generate negative marging values

domchristie · Sep 17, 2021 · 817e1c8 · 817e1c8
1 parent 318ff04
commit 817e1c8
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/lib/fluidSpacing.js b/lib/fluidSpacing.js
@@ -143,8 +143,13 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
                     let properties = {}; 
                     let fallbackProperties = {}; 
                     attributes.forEach( (attribute) => {
-                        properties[`${attribute}`] = `var(--fs-${size})`;
-                        fallbackProperties[`${attribute}`] = `${fallbackScale[size]}`;
+                        if( className.startsWith('-') ){
+                            properties[`${attribute}`] = `calc( var(--fs-${size}) * -1)`;
+                            fallbackProperties[`${attribute}`] = `-${fallbackScale[size]}`;
+                        } else {
+                            properties[`${attribute}`] = `var(--fs-${size})`;
+                            fallbackProperties[`${attribute}`] = `${fallbackScale[size]}`;
+                        }
                     });
 
                     result.push( {
@@ -159,8 +164,13 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
                     let properties = {}; 
                     let fallbackProperties = {}; 
                     attributes.forEach( (attribute) => {
-                        properties[`${attribute}`] = `var(--fs-${fromSize}-${toSize})`;
-                        fallbackProperties[`${attribute}`] = `${fallbackScale[fromSize+'-'+toSize]}`;
+                        if( className.startsWith('-') ){
+                            properties[`${attribute}`] = `calc( var(--fs-${fromSize}-${toSize}) * -1)`;
+                            fallbackProperties[`${attribute}`] = `-${fallbackScale[fromSize + '-' + toSize]}`;
+                        } else {
+                            properties[`${attribute}`] = `var(--fs-${fromSize}-${toSize})`;
+                            fallbackProperties[`${attribute}`] = `${fallbackScale[fromSize + '-' + toSize]}`;
+                        }
                     });
 
                     result.push( {
@@ -175,8 +185,13 @@ module.exports = function( { addBase, addUtilities, e, theme, options } ) {
                         let properties = {}; 
                         let fallbackProperties = {}; 
                         attributes.forEach( (attribute) => {
-                            properties[`${attribute}`] = `var(--fs-${fromSize}-${toSize})`;
-                            fallbackProperties[`${attribute}`] = `${fallbackScale[fromSize+'-'+toSize]}`;
+                            if( className.startsWith('-') ){
+                                properties[`${attribute}`] = `calc(var(--fs-${fromSize}-${toSize}) * -1)`;
+                                fallbackProperties[`${attribute}`] = `-${fallbackScale[fromSize + '-' + toSize]}`;
+                            } else {
+                                properties[`${attribute}`] = `var(--fs-${fromSize}-${toSize})`;
+                                fallbackProperties[`${attribute}`] = `${fallbackScale[fromSize + '-' + toSize]}`;
+                            }
                         });
 
                         result.push( {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind-utopia",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A Tailwind CSS plugin to generate utility classes for interpolated fluid type and space scales.  ",
   "main": "index.js",
   "directories": {

diff --git a/util/spacingClasses.js b/util/spacingClasses.js
@@ -7,6 +7,13 @@ module.exports = {
         'ml': ['margin-left'],
         'mx': ['margin-left', 'margin-right'],
         'my': ['margin-top', 'margin-bottom'],
+        '-m': ['margin'],
+        '-mt': ['margin-top'],
+        '-mr': ['margin-right'],
+        '-mb': ['margin-bottom'],
+        '-ml': ['margin-left'],
+        '-mx': ['margin-left', 'margin-right'],
+        '-my': ['margin-top', 'margin-bottom'],
     },
     padding: {
         'p': ['padding'],