diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index 790907e25..4e5183e72 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -254,6 +254,33 @@ test('plugins can create components with object syntax', () => { `) }) +test('plugins can add base styles with object syntax', () => { + const { base } = processPlugins( + [ + function({ addBase }) { + addBase({ + 'img': { + maxWidth: '100%', + }, + 'button': { + fontFamily: 'inherit', + }, + }) + }, + ], + makeConfig() + ) + + expect(css(base)).toMatchCss(` + img { + max-width: 100% + } + button { + font-family: inherit + } + `) +}) + test('plugins can create components with raw PostCSS nodes', () => { const { components, utilities } = processPlugins( [ diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index 7122016ae..fe11f5bb4 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -16,6 +16,7 @@ function parseStyles(styles) { } export default function(plugins, config) { + const pluginBaseStyles = [] const pluginComponents = [] const pluginUtilities = [] const pluginVariantGenerators = {} @@ -63,6 +64,9 @@ export default function(plugins, config) { pluginComponents.push(...styles.nodes) }, + addBase: (baseStyles) => { + pluginBaseStyles.push(...parseStyles(baseStyles)) + }, addVariant: (name, generator) => { pluginVariantGenerators[name] = generateVariantFunction(generator) }, @@ -70,6 +74,7 @@ export default function(plugins, config) { }) return { + base: pluginBaseStyles, components: pluginComponents, utilities: pluginUtilities, variantGenerators: pluginVariantGenerators,