Extract padding/margin values to spacing

Author: adamwathan

__tests__/applyAtRule.test.js

@@ -1,10 +1,14 @@
 import postcss from 'postcss'
 import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules'
 import processPlugins from '../src/util/processPlugins'
+import resolveConfig from '../src/util/resolveConfig'
 import corePlugins from '../src/corePlugins'
 import defaultConfig from '../defaultConfig.stub.js'
 
-const { utilities: defaultUtilities } = processPlugins(corePlugins(defaultConfig), defaultConfig)
+const { utilities: defaultUtilities } = processPlugins(
+  corePlugins(resolveConfig([defaultConfig])),
+  defaultConfig
+)
 
 function run(input, config = defaultConfig, utilities = defaultUtilities) {
   return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
@@ -200,10 +204,12 @@ test('you can apply utility classes without using the given prefix', () => {
     .foo { margin-top: 1rem; margin-bottom: 1rem; }
   `
 
-  const config = {
-    ...defaultConfig,
-    prefix: 'tw-',
-  }
+  const config = resolveConfig([
+    {
+      ...defaultConfig,
+      prefix: 'tw-',
+    },
+  ])
 
   return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
     expect(result.css).toEqual(expected)
@@ -220,12 +226,14 @@ test('you can apply utility classes without using the given prefix when using a
     .foo { margin-top: 1rem; margin-bottom: 1rem; }
   `
 
-  const config = {
-    ...defaultConfig,
-    prefix: () => {
-      return 'tw-'
+  const config = resolveConfig([
+    {
+      ...defaultConfig,
+      prefix: () => {
+        return 'tw-'
+      },
     },
-  }
+  ])
 
   return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
     expect(result.css).toEqual(expected)

defaultTheme.js

@@ -85,6 +85,23 @@ module.exports = function() {
       'pink-lighter': '#ffbbca',
       'pink-lightest': '#ffebef',
     },
+    spacing: {
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem',
+    },
     screens: {
       sm: '576px',
       md: '768px',
@@ -264,58 +281,9 @@ module.exports = function() {
       full: '100%',
       screen: '100vh',
     },
-    padding: {
-      px: '1px',
-      '0': '0',
-      '1': '0.25rem',
-      '2': '0.5rem',
-      '3': '0.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '8': '2rem',
-      '10': '2.5rem',
-      '12': '3rem',
-      '16': '4rem',
-      '20': '5rem',
-      '24': '6rem',
-      '32': '8rem',
-    },
-    margin: {
-      auto: 'auto',
-      px: '1px',
-      '0': '0',
-      '1': '0.25rem',
-      '2': '0.5rem',
-      '3': '0.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '8': '2rem',
-      '10': '2.5rem',
-      '12': '3rem',
-      '16': '4rem',
-      '20': '5rem',
-      '24': '6rem',
-      '32': '8rem',
-    },
-    negativeMargin: {
-      px: '1px',
-      '0': '0',
-      '1': '0.25rem',
-      '2': '0.5rem',
-      '3': '0.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '8': '2rem',
-      '10': '2.5rem',
-      '12': '3rem',
-      '16': '4rem',
-      '20': '5rem',
-      '24': '6rem',
-      '32': '8rem',
-    },
+    padding: theme => theme.spacing,
+    margin: theme => ({ auto: 'auto', ...theme.spacing }),
+    negativeMargin: theme => theme.spacing,
     shadows: {
       default: '0 2px 4px 0 rgba(0,0,0,0.10)',
       md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',