diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index e39c8eeda..0a22544a9 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -616,7 +616,7 @@ test('plugins respect prefix and important options by default when adding utilit `) }) -test("component declarations are not affected by the 'prefix' option", () => { +test("component declarations respect the 'prefix' option by default", () => { const [components] = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { @@ -632,6 +632,32 @@ test("component declarations are not affected by the 'prefix' option", () => { }, }) + expect(css(components)).toMatchCss(` + .tw-btn-blue { + background-color: blue + } + `) +}) + +test("component declarations can optionally ignore 'prefix' option", () => { + const [components] = processPluginsWithValidConfig({ + plugins: [ + function({ addComponents }) { + addComponents( + { + '.btn-blue': { + backgroundColor: 'blue', + }, + }, + { respectPrefix: false } + ) + }, + ], + options: { + prefix: 'tw-', + }, + }) + expect(css(components)).toMatchCss(` .btn-blue { background-color: blue @@ -672,7 +698,8 @@ test("plugins can apply the user's chosen prefix to components manually", () => backgroundColor: 'blue', }, }, - }) + { respectPrefix: false } + ) }, ], options: { @@ -792,7 +819,8 @@ test('prefix will prefix all classes in a selector', () => { backgroundColor: 'blue', }, }, - }) + { respectPrefix: false } + ) }, ], options: { diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index 72bfddc3f..0701751f0 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -46,8 +46,18 @@ export default function(config) { pluginUtilities.push(wrapWithVariants(styles.nodes, options.variants)) }, - addComponents: components => { - pluginComponents.push(...parseStyles(components)) + addComponents: (components, options) => { + options = Object.assign({ respectPrefix: true }, options) + + const styles = postcss.root({ nodes: parseStyles(components) }) + + styles.walkRules(rule => { + if (options.respectPrefix) { + rule.selector = prefixSelector(config.options.prefix, rule.selector) + } + }) + + pluginComponents.push(...styles.nodes) }, }) })