diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index cce5e2572..d0b20e4fc 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -218,6 +218,33 @@ test('variants are generated in the order specified', () => { }) }) +test('the default variant can be generated in a specified position', () => { + const input = ` + @variants focus, active, default, hover { + .banana { color: yellow; } + .chocolate { color: brown; } + } + ` + + const output = ` + .focus\\:banana:focus { color: yellow; } + .focus\\:chocolate:focus { color: brown; } + .active\\:banana:active { color: yellow; } + .active\\:chocolate:active { color: brown; } + .banana { color: yellow; } + .chocolate { color: brown; } + .hover\\:banana:hover { color: yellow; } + .hover\\:chocolate:hover { color: brown; } + ` + + return run(input, { + ...config, + }).then(result => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('plugin variants can modify rules using the raw PostCSS API', () => { const input = ` @variants important { diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 01704da04..a586a66ec 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -10,7 +10,12 @@ function generatePseudoClassVariant(pseudoClass) { }) } +function ensureIncludesDefault(variants) { + return variants.includes('default') ? variants : ['default', ...variants] +} + const defaultVariantGenerators = { + default: generateVariantFunction(() => {}), 'group-hover': generateVariantFunction(({ modifySelectors, separator }) => { return modifySelectors(({ className }) => { return `.group:hover .group-hover${separator}${className}` @@ -38,9 +43,7 @@ export default function(config, { variantGenerators: pluginVariantGenerators }) responsiveParent.append(atRule) } - atRule.before(atRule.clone().nodes) - - _.forEach(_.without(variants, 'responsive'), variant => { + _.forEach(_.without(ensureIncludesDefault(variants), 'responsive'), variant => { variantGenerators[variant](atRule, config) })