Merge pull request #2137 from tailwindlabs/rename-gap-utilities

Deprecate col-gap and row-gap in favor of gap-x and gap-y

__tests__/sanity.test.js

@@ -58,9 +58,8 @@ it('generates the right CSS when enabling flagged features', () => {
 
   return postcss([
     tailwind({
-      experimental: {
-        uniformColorPalette: true,
-      },
+      future: 'all',
+      experimental: 'all',
     }),
   ])
     .process(input, { from: inputPath })

src/featureFlags.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import chalk from 'chalk'
 
 const featureFlags = {
-  future: [],
+  future: ['removeDeprecatedGapUtilities'],
   experimental: ['uniformColorPalette'],
 }
 
@@ -93,6 +93,7 @@ export function issueFlagNotices(config) {
     log.risk(
       'We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.'
     )
+    log.risk('https://tailwindcss.com/docs/upcoming-changes')
   }
 }
 

src/plugins/gap.js

@@ -1,15 +1,26 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
+import { flagEnabled } from '../featureFlags'
 
 export default function() {
-  return function({ target, ...args }) {
+  return function({ target, config, ...args }) {
     if (target('gap') === 'ie11') {
       return
     }
 
-    createUtilityPlugin('gap', [
-      ['gap', ['gridGap', 'gap']],
-      ['col-gap', ['gridColumnGap', 'columnGap']],
-      ['row-gap', ['gridRowGap', 'rowGap']],
-    ])({ target, ...args })
+    if (flagEnabled(config(), 'removeDeprecatedGapUtilities')) {
+      createUtilityPlugin('gap', [
+        ['gap', ['gridGap', 'gap']],
+        ['gap-x', ['gridColumnGap', 'columnGap']],
+        ['gap-y', ['gridRowGap', 'rowGap']],
+      ])({ target, config, ...args })
+    } else {
+      createUtilityPlugin('gap', [
+        ['gap', ['gridGap', 'gap']],
+        ['col-gap', ['gridColumnGap', 'columnGap']],
+        ['gap-x', ['gridColumnGap', 'columnGap']],
+        ['row-gap', ['gridRowGap', 'rowGap']],
+        ['gap-y', ['gridRowGap', 'rowGap']],
+      ])({ target, config, ...args })
+    }
   }
 }