Repository: tailwindlabs/tailwindcss
Pull request #5597 (2021-09-25 11:24:56)

Add `inherit` to color palette
Re-implementation of #2706.

Co-Authored-By: Jorge González <yo@jorgeglz.io>


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a58da9c8..254e753a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix defining colors as functions when color opacity plugins are disabled ([#5470](https://github.com/tailwindlabs/tailwindcss/pull/5470))
 
+## [2.2.16] - 2021-09-26
+
+### Fixed
+
+- JIT: Properly handle animations that use CSS custom properties ([#5602](https://github.com/tailwindlabs/tailwindcss/pull/5602))
+
 ## [2.2.15] - 2021-09-10
 
 ### Fixed
@@ -1582,7 +1588,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.15...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.16...HEAD
+[2.2.16]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.15...v2.2.16
 [2.2.15]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.14...v2.2.15
 [2.2.14]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.13...v2.2.14
 [2.2.13]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.12...v2.2.13
diff --git a/src/corePlugins.js b/src/corePlugins.js
index ba56033d..f3f04a63 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -775,6 +775,21 @@ export default {
 
   cursor: createUtilityPlugin('cursor'),
 
+  touchAction: ({ addUtilities }) => {
+    addUtilities({
+      '.touch-auto': { 'touch-action': 'auto' },
+      '.touch-none': { 'touch-action': 'none' },
+      '.touch-pan-x': { 'touch-action': 'pan-x' },
+      '.touch-pan-left': { 'touch-action': 'pan-left' },
+      '.touch-pan-right': { 'touch-action': 'pan-right' },
+      '.touch-pan-y': { 'touch-action': 'pan-y' },
+      '.touch-pan-up': { 'touch-action': 'pan-up' },
+      '.touch-pan-down': { 'touch-action': 'pan-down' },
+      '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' },
+      '.touch-manipulation': { 'touch-action': 'manipulation' },
+    })
+  },
+
   userSelect: ({ addUtilities }) => {
     addUtilities({
       '.select-none': { 'user-select': 'none' },
diff --git a/src/public/colors.js b/src/public/colors.js
index 89f7136d..51528735 100644
--- a/src/public/colors.js
+++ b/src/public/colors.js
@@ -13,8 +13,9 @@ function warn({ version, from, to }) {
 }
 
 export default {
-  transparent: 'transparent',
+  inherit: 'inherit',
   current: 'currentColor',
+  transparent: 'transparent',
   black: '#000',
   white: '#fff',
   slate: {
diff --git a/src/util/parseAnimationValue.js b/src/util/parseAnimationValue.js
index 94c77ff3..990e7aa8 100644
--- a/src/util/parseAnimationValue.js
+++ b/src/util/parseAnimationValue.js
@@ -54,7 +54,13 @@ export default function parseAnimationValue(input) {
       } else if (!seen.has('DELAY') && TIME.test(part)) {
         result.delay = part
         seen.add('DELAY')
-      } else result.name = part
+      } else if (!seen.has('NAME')) {
+        result.name = part
+        seen.add('NAME')
+      } else {
+        if (!result.unknown) result.unknown = []
+        result.unknown.push(part)
+      }
     }
 
     return result
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 98f7fc9b..80abe189 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -11,8 +11,9 @@ module.exports = {
       '2xl': '1536px',
     },
     colors: ({ colors }) => ({
-      transparent: colors.transparent,
+      inherit: colors.inherit,
       current: colors.current,
+      transparent: colors.transparent,
       black: colors.black,
       white: colors.white,
       slate: colors.slate,


Test patch:
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 00bb9e41..eed0e410 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -299,6 +299,12 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-pan-y {
+  touch-action: pan-y;
+}
+.touch-manipulation {
+  touch-action: manipulation;
+}
 .select-none {
   user-select: none;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index 01103fc3..91e4bced 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -39,6 +39,7 @@
     <div class="clear-left"></div>
     <div class="container"></div>
     <div class="cursor-pointer"></div>
+    <div class="touch-pan-y touch-manipulation"></div>
     <div class="hidden inline-grid"></div>
     <div class="divide-gray-200"></div>
     <div class="divide-opacity-50"></div>
diff --git a/tests/parseAnimationValue.test.js b/tests/parseAnimationValue.test.js
index 8fd211d2..293d6fbe 100644
--- a/tests/parseAnimationValue.test.js
+++ b/tests/parseAnimationValue.test.js
@@ -38,6 +38,19 @@ describe('Tailwind Defaults', () => {
   })
 })
 
+describe('css variables', () => {
+  it('should be possible to use css variables', () => {
+    let parsed = parseAnimationValue('jump var(--animation-duration, 10s) linear infinite')
+    expect(parsed[0]).toEqual({
+      value: 'jump var(--animation-duration, 10s) linear infinite',
+      name: 'jump',
+      timingFunction: 'linear',
+      iterationCount: 'infinite',
+      unknown: ['var(--animation-duration, 10s)'],
+    })
+  })
+})
+
 describe('MDN Examples', () => {
   it.each([
     [