🚀 Feature - Added the ability to define the container padding based off screen name

__tests__/containerPlugin.test.js

@@ -180,6 +180,56 @@ test.only('horizontal padding can be included by default', () => {
   `)
 })
 
+test.only('responsive horizontal padding can be included by default', () => {
+  const { components } = processPlugins(
+    [container()],
+    config({
+      theme: {
+        container: {
+          padding: {
+            default: '1rem',
+            sm: '2rem',
+            lg: '4rem',
+            xl: '5rem',
+          },
+        },
+      },
+    })
+  )
+
+  expect(css(components)).toMatchCss(`
+    .container {
+      width: 100%;
+      padding-right: 1rem;
+      padding-left: 1rem
+    }
+    @media (min-width: 576px) {
+      .container {
+        max-width: 576px;
+        padding-right: 2rem;
+        padding-left: 2rem
+      }
+    }
+    @media (min-width: 768px) {
+      .container { max-width: 768px }
+    }
+    @media (min-width: 992px) {
+      .container {
+        max-width: 992px;
+        padding-right: 4rem;
+        padding-left: 4rem
+      }
+    }
+    @media (min-width: 1200px) {
+      .container {
+        max-width: 1200px;
+        padding-right: 5rem;
+        padding-left: 5rem
+      }
+    }
+  `)
+})
+
 test.only('setting all options at once', () => {
   const { components } = processPlugins(
     [container()],

src/plugins/container.js

@@ -22,9 +22,64 @@ function extractMinWidths(breakpoints) {
   })
 }
 
+function mapMinWidthsToPadding(minWidths, screens, paddings) {
+  if (typeof paddings === 'undefined') {
+    return []
+  }
+
+  if (!_.isObject(paddings)) {
+    return [
+      {
+        screen: 'default',
+        minWidth: 0,
+        padding: paddings,
+      },
+    ]
+  }
+
+  const mapping = []
+
+  if (paddings.default) {
+    mapping.push({
+      screen: 'default',
+      minWidth: 0,
+      padding: paddings.default,
+    })
+  }
+
+  _.each(minWidths, minWidth => {
+    Object.keys(screens).forEach(screen => {
+      if (`${screens[screen]}` === `${minWidth}`) {
+        mapping.push({
+          screen,
+          minWidth,
+          padding: paddings[screen],
+        })
+      }
+    })
+  })
+
+  return mapping
+}
+
 module.exports = function() {
   return function({ addComponents, theme }) {
-    const minWidths = extractMinWidths(theme('container.screens', theme('screens')))
+    const screens = theme('container.screens', theme('screens'))
+    const minWidths = extractMinWidths(screens)
+    const paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'))
+
+    const generatePaddingFor = minWidth => {
+      const paddingConfig = _.find(paddings, padding => `${padding.minWidth}` === `${minWidth}`)
+
+      if (!paddingConfig) {
+        return {}
+      }
+
+      return {
+        paddingRight: paddingConfig.padding,
+        paddingLeft: paddingConfig.padding,
+      }
+    }
 
     const atRules = _(minWidths)
       .sortBy(minWidth => parseInt(minWidth))
@@ -34,6 +89,7 @@ module.exports = function() {
           [`@media (min-width: ${minWidth})`]: {
             '.container': {
               'max-width': minWidth,
+              ...generatePaddingFor(minWidth),
             },
           },
         }
@@ -45,12 +101,7 @@ module.exports = function() {
         '.container': Object.assign(
           { width: '100%' },
           theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
-          _.has(theme('container', {}), 'padding')
-            ? {
-                paddingRight: theme('container.padding'),
-                paddingLeft: theme('container.padding'),
-              }
-            : {}
+          generatePaddingFor(0)
         ),
       },
       ...atRules,