Add will-change utilities (#5448)

Co-Authored-By: Adam Wathan <[email protected]>

Author: reinink

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'

src/plugins/willChange.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function () {
+  return createUtilityPlugin('willChange', [['will-change', ['will-change']]])
+}

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',

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';
 }

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>

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;
 }

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>