Merge pull request tailwindlabs#517 from tailwindcss/variant-plugin-flag

Move plugin variant features behind experiment
rhurling · Jul 11, 2018 · ee6340a · ee6340a
2 parents 38c211a + 7846d2a
commit ee6340a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 8 deletions.
diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
@@ -143,7 +143,36 @@ test('it wraps the output in a responsive at-rule if responsive is included as a
   })
 })
 
-test('variants are generated in the order specified', () => {
+test('variants are generated in a fixed order regardless of the order specified by default', () => {
+  const input = `
+    @variants focus, active, hover, group-hover {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .group:hover .group-hover\\:banana { color: yellow; }
+      .group:hover .group-hover\\:chocolate { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { color: brown; }
+  `
+
+  return run(input, {
+    ...config,
+  }).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test('if plugin variants are enabled, variants are generated in the order specified', () => {
   const input = `
     @variants focus, active, hover {
       .banana { color: yellow; }
@@ -162,13 +191,16 @@ test('variants are generated in the order specified', () => {
       .hover\\:chocolate:hover { color: brown; }
   `
 
-  return run(input).then(result => {
+  return run(input, {
+    ...config,
+    experiments: { pluginVariants: true },
+  }).then(result => {
     expect(result.css).toMatchCss(output)
     expect(result.warnings().length).toBe(0)
   })
 })
 
-test('plugin variants can modify rules using the raw PostCSS API', () => {
+test('if plugin variants are enabled, plugin variants can modify rules using the raw PostCSS API', () => {
   const input = `
     @variants important {
       .banana { color: yellow; }
@@ -185,6 +217,7 @@ test('plugin variants can modify rules using the raw PostCSS API', () => {
 
   return run(input, {
     ...config,
+    experiments: { pluginVariants: true },
     plugins: [
       ...config.plugins,
       function({ addVariant }) {
@@ -204,7 +237,7 @@ test('plugin variants can modify rules using the raw PostCSS API', () => {
   })
 })
 
-test('plugin variants can modify selectors with a simplified API', () => {
+test('if plugin variants are enabled, plugin variants can modify selectors with a simplified API', () => {
   const input = `
     @variants first-child {
       .banana { color: yellow; }
@@ -221,6 +254,7 @@ test('plugin variants can modify selectors with a simplified API', () => {
 
   return run(input, {
     ...config,
+    experiments: { pluginVariants: true },
     plugins: [
       ...config.plugins,
       function({ addVariant }) {
@@ -237,7 +271,7 @@ test('plugin variants can modify selectors with a simplified API', () => {
   })
 })
 
-test('plugin variants can wrap rules in another at-rule using the raw PostCSS API', () => {
+test('if plugin variants are enabled, plugin variants can wrap rules in another at-rule using the raw PostCSS API', () => {
   const input = `
     @variants supports-grid {
       .banana { color: yellow; }
@@ -256,6 +290,7 @@ test('plugin variants can wrap rules in another at-rule using the raw PostCSS AP
 
   return run(input, {
     ...config,
+    experiments: { pluginVariants: true },
     plugins: [
       ...config.plugins,
       function({ addVariant }) {

diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
@@ -39,9 +39,17 @@ export default function(config, { variantGenerators: pluginVariantGenerators })
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(_.without(variants, 'responsive'), variant => {
-        variantGenerators[variant](atRule, config)
-      })
+      if (_.get(config, 'experiments.pluginVariants', false)) {
+        _.forEach(_.without(variants, 'responsive'), variant => {
+          variantGenerators[variant](atRule, config)
+        })
+      } else {
+        _.forEach(['group-hover', 'hover', 'focus', 'active'], variant => {
+          if (variants.includes(variant)) {
+            variantGenerators[variant](atRule, config)
+          }
+        })
+      }
 
       atRule.remove()
     })