Make container plugin a core plugin, configured in theme

This commit is contained in:
Adam Wathan 2019-03-13 21:04:45 -04:00
parent adda3e6df9
commit c6449f8fa8
6 changed files with 48 additions and 88 deletions

View file

@ -1,4 +1,5 @@
import preflight from './plugins/preflight'
import container from './plugins/container'
import appearance from './plugins/appearance'
import backgroundAttachment from './plugins/backgroundAttachment'
import backgroundColor from './plugins/backgroundColor'
@ -67,6 +68,7 @@ import configurePlugins from './util/configurePlugins'
export default function({ corePlugins: corePluginConfig }) {
return configurePlugins(corePluginConfig, {
preflight,
container,
appearance,
backgroundAttachment,
backgroundColor,

View file

@ -22,11 +22,9 @@ function extractMinWidths(breakpoints) {
})
}
module.exports = function(options) {
module.exports = function() {
return function({ addComponents, config }) {
const screens = _.get(options, 'screens', config('theme.screens'))
const minWidths = extractMinWidths(screens)
const minWidths = extractMinWidths(config('theme.screens'))
const atRules = _.map(minWidths, minWidth => {
return {
@ -42,9 +40,14 @@ module.exports = function(options) {
{
'.container': Object.assign(
{ width: '100%' },
_.get(options, 'center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
_.has(options, 'padding')
? { paddingRight: options.padding, paddingLeft: options.padding }
config('theme.container.center', false)
? { marginRight: 'auto', marginLeft: 'auto' }
: {},
_.has(config('theme.container', {}), 'padding')
? {
paddingRight: config('theme.container.padding'),
paddingLeft: config('theme.container.padding'),
}
: {}
),
},