diff --git a/__tests__/mergeConfigWithDefaults.test.js b/__tests__/mergeConfigWithDefaults.test.js index c748ecd01..f3545579a 100644 --- a/__tests__/mergeConfigWithDefaults.test.js +++ b/__tests__/mergeConfigWithDefaults.test.js @@ -72,9 +72,9 @@ test('setting modules to "all" creates all variants for all modules', () => { expect(result).toEqual({ modules: { - flexbox: ['responsive', 'hover', 'focus', 'parent-hover'], - textAlign: ['responsive', 'hover', 'focus', 'parent-hover'], - textColors: ['responsive', 'hover', 'focus', 'parent-hover'], + flexbox: ['responsive', 'hover', 'focus', 'group-hover'], + textAlign: ['responsive', 'hover', 'focus', 'group-hover'], + textColors: ['responsive', 'hover', 'focus', 'group-hover'], }, options: {}, }) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index 6c2bed023..2a30529a6 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -48,9 +48,9 @@ test('it can generate focus variants', () => { }) }) -test('it can generate parent-hover variants', () => { +test('it can generate group-hover variants', () => { const input = ` - @variants parent-hover { + @variants group-hover { .banana { color: yellow; } .chocolate { color: brown; } } @@ -59,8 +59,8 @@ test('it can generate parent-hover variants', () => { const output = ` .banana { color: yellow; } .chocolate { color: brown; } - .parent:hover .parent-hover\\:banana { color: yellow; } - .parent:hover .parent-hover\\:chocolate { color: brown; } + .group:hover .group-hover\\:banana { color: yellow; } + .group:hover .group-hover\\:chocolate { color: brown; } ` return run(input).then(result => { diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 8e854fb1e..652c133fb 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -21,12 +21,12 @@ const variantGenerators = { container.before(cloned.nodes) }, - 'parent-hover': (container, config) => { + 'group-hover': (container, config) => { const cloned = container.clone() cloned.walkRules(rule => { // prettier-ignore - rule.selector = `.parent:hover ${buildClassVariant(rule.selector, 'parent-hover', config.options.separator)}` + rule.selector = `.group:hover ${buildClassVariant(rule.selector, 'group-hover', config.options.separator)}` }) container.before(cloned.nodes) @@ -48,7 +48,7 @@ export default function(config) { atRule.before(atRule.clone().nodes) - _.forEach(['focus', 'hover', 'parent-hover'], variant => { + _.forEach(['focus', 'hover', 'group-hover'], variant => { if (variants.includes(variant)) { variantGenerators[variant](atRule, unwrappedConfig) } diff --git a/src/util/mergeConfigWithDefaults.js b/src/util/mergeConfigWithDefaults.js index 3928ba9e0..7618ec0ec 100644 --- a/src/util/mergeConfigWithDefaults.js +++ b/src/util/mergeConfigWithDefaults.js @@ -2,7 +2,7 @@ import _ from 'lodash' function mergeModules(userModules, defaultModules) { if (userModules === 'all') { - return _.mapValues(defaultModules, () => ['responsive', 'hover', 'focus', 'parent-hover']) + return _.mapValues(defaultModules, () => ['responsive', 'hover', 'focus', 'group-hover']) } return _.defaults(userModules, defaultModules)