remove unwanted hypens from padding and margin class names #3

bradlc · Jun 25, 2018 · d48f1d4 · d48f1d4
1 parent 064e58c
commit d48f1d4
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/src/index.js b/src/index.js
@@ -3,22 +3,28 @@ const props = {
   fontWeights: { prefix: 'font', prop: 'font-weight' },
   leading: { prefix: 'leading', prop: 'line-height' },
   tracking: { prefix: 'tracking', prop: 'letter-spacing' },
-  borderWidths: { prefix: 'border', prop: 'border-width', sides: true },
+  borderWidths: {
+    prefix: 'border',
+    prop: 'border-width',
+    sides: true,
+    hyphen: true
+  },
   borderRadius: {
     prefix: 'rounded',
     prop: 'border-radius',
     sides: true,
-    corners: true
+    corners: true,
+    hyphen: true
   },
   width: { prefix: 'w', prop: 'width' },
   height: { prefix: 'h', prop: 'height' },
   minWidth: { prefix: 'min-w', prop: 'min-width' },
   minHeight: { prefix: 'min-h', prop: 'min-height' },
   maxWidth: { prefix: 'max-w', prop: 'max-width' },
   maxHeight: { prefix: 'max-h', prop: 'max-height' },
-  padding: { prefix: 'p', prop: 'padding', sides: true },
-  margin: { prefix: 'm', prop: 'margin', sides: true },
-  negativeMargin: { prefix: '-m', prop: 'margin', sides: true },
+  padding: { prefix: 'p', prop: 'padding', sides: true, hyphen: false },
+  margin: { prefix: 'm', prop: 'margin', sides: true, hyphen: false },
+  negativeMargin: { prefix: '-m', prop: 'margin', sides: true, hyphen: false },
   zIndex: { prefix: 'z', prop: 'z-index' },
   opacity: { prefix: 'opacity', prop: 'opacity' }
 }
@@ -62,7 +68,8 @@ export default function({ suffix = '-fluid', ...properties }) {
 
         variants.forEach(v => {
           const className = `${props[property].prefix}${shorthand(
-            v
+            v,
+            props[property].hyphen
           )}-${id}${suffix}`
           const selector = `.${e(className)}`
           const p = propName(prop, v)
@@ -99,9 +106,9 @@ function makeFluid({ minvw, maxvw, min, max }, negate = false) {
     parseFloat(minvw)})`
 }
 
-function shorthand(longhand) {
+function shorthand(longhand, hyphen = true) {
   if (longhand === '') return ''
-  return '-' + longhand.match(/\b[a-z]/g).join('')
+  return (hyphen ? '-' : '') + longhand.match(/\b[a-z]/g).join('')
 }
 
 function propName(prop, variant) {