From b04dab6be6b3af191fa7f602ee513b5c4fac7c68 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 8 Sep 2021 14:50:31 -0400
Subject: [PATCH] Add `will-change` utilities (#5448)

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 src/plugins/index.js             | 2 ++
 src/plugins/willChange.js        | 5 +++++
 stubs/defaultConfig.stub.js      | 6 ++++++
 tests/arbitrary-values.test.css  | 6 ++++++
 tests/arbitrary-values.test.html | 1 +
 tests/basic-usage.test.css       | 6 ++++++
 tests/basic-usage.test.html      | 1 +
 7 files changed, 27 insertions(+)
 create mode 100644 src/plugins/willChange.js

diff --git a/src/plugins/index.js b/src/plugins/index.js
index 4407c24dd..6f032470f 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -165,4 +165,6 @@ export { default as transitionDelay } from './transitionDelay'
 export { default as transitionDuration } from './transitionDuration'
 export { default as transitionTimingFunction } from './transitionTimingFunction'
 
+export { default as willChange } from './willChange'
+
 export { default as content } from './content'
diff --git a/src/plugins/willChange.js b/src/plugins/willChange.js
new file mode 100644
index 000000000..6807f950b
--- /dev/null
+++ b/src/plugins/willChange.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function () {
+  return createUtilityPlugin('willChange', [['will-change', ['will-change']]])
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 47051b2ad..1d35b870e 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -814,6 +814,12 @@ module.exports = {
       min: 'min-content',
       max: 'max-content',
     }),
+    willChange: {
+      'auto': 'auto',
+      'scroll': 'scroll-position',
+      'contents': 'contents',
+      'transform': 'transform',
+    },
     zIndex: {
       auto: 'auto',
       0: '0',
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index f2dd54d4e..9a71955d0 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -446,6 +446,12 @@
 .duration-\[var\(--app-duration\)\] {
   transition-duration: var(--app-duration);
 }
+.will-change-\[top\2c left\] {
+  will-change: top, left;
+}
+.will-change-\[var\(--will-change\)\] {
+  will-change: var(--will-change);
+}
 .content-\[\'hello\'\] {
   content: 'hello';
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index cce467662..6ed12b90b 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -115,6 +115,7 @@
     <div class="ring-offset-[19rem]"></div>
     <div class="ring-opacity-[var(--ring-opacity)]"></div>
     <div class="delay-[var(--delay)]"></div>
+    <div class="will-change-[top,left] will-change-[var(--will-change)]"></div>
     <div class="content-['hello']"></div>
     <div class="content-[attr(content-before)]"></div>
     <div class="accent-[#bada55]"></div>
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 436b44402..ed8994f40 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -822,6 +822,12 @@
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.will-change-scroll {
+  will-change: scroll-position;
+}
+.will-change-transform {
+  will-change: transform;
+}
 .content-none {
   content: none;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index e21a6c79b..3301be4dc 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -168,6 +168,7 @@
     <div class="w-12"></div>
     <div class="break-words"></div>
     <div class="z-30"></div>
+    <div class="will-change-scroll will-change-transform"></div>
     <div class="content-none"></div>
     <div class="aspect-square aspect-video"></div>
   </body>