diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index b26a0e996..7433a90cb 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -240,6 +240,30 @@ test('it can generate group-hover variants', () => { }) }) +test('group-hover variants respect any configured prefix', () => { + const input = ` + @variants group-hover { + .tw-banana { color: yellow; } + .tw-chocolate { color: brown; } + } + ` + + const output = ` + .tw-banana { color: yellow; } + .tw-chocolate { color: brown; } + .tw-group:hover .group-hover\\:tw-banana { color: yellow; } + .tw-group:hover .group-hover\\:tw-chocolate { color: brown; } + ` + + return run(input, { + ...config, + prefix: 'tw-', + }).then(result => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('it can generate hover, active and focus variants', () => { const input = ` @variants group-hover, hover, focus, active { diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index f2af0b207..6cfca755d 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -2,6 +2,7 @@ import _ from 'lodash' import postcss from 'postcss' import selectorParser from 'postcss-selector-parser' import generateVariantFunction from '../util/generateVariantFunction' +import prefixSelector from '../util/prefixSelector' function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) { return generateVariantFunction(({ modifySelectors, separator }) => { @@ -20,14 +21,17 @@ function ensureIncludesDefault(variants) { return variants.includes('default') ? variants : ['default', ...variants] } -const defaultVariantGenerators = { +const defaultVariantGenerators = config => ({ default: generateVariantFunction(() => {}), 'group-hover': generateVariantFunction(({ modifySelectors, separator }) => { return modifySelectors(({ selector }) => { return selectorParser(selectors => { selectors.walkClasses(sel => { sel.value = `group-hover${separator}${sel.value}` - sel.parent.insertBefore(sel, selectorParser().astSync('.group:hover ')) + sel.parent.insertBefore( + sel, + selectorParser().astSync(prefixSelector(config.prefix, '.group:hover ')) + ) }) }).processSync(selector) }) @@ -42,12 +46,12 @@ const defaultVariantGenerators = { last: generatePseudoClassVariant('last-child', 'last'), odd: generatePseudoClassVariant('nth-child(odd)', 'odd'), even: generatePseudoClassVariant('nth-child(even)', 'even'), -} +}) export default function(config, { variantGenerators: pluginVariantGenerators }) { return function(css) { const variantGenerators = { - ...defaultVariantGenerators, + ...defaultVariantGenerators(config), ...pluginVariantGenerators, }