feat: add '.will-change-x' utility class (#608)

windicss · Dec 15, 2021 · c10216c · c10216c
1 parent 14edb4c
commit c10216c
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 5 deletions.
diff --git a/src/config/order.ts b/src/config/order.ts
@@ -240,4 +240,5 @@ export enum pluginOrder {
   'backdropOpacity' = 13900,
   'backdropSaturate' = 14000,
   'backdropSepia' = 14100,
+  'willChange' = 14200,
 }
diff --git a/src/lib/utilities/static.ts b/src/lib/utilities/static.ts
@@ -3317,4 +3317,42 @@ export const staticUtilities: StaticUtility = {
       'order': 2,
     },
   },
+
+  // https://windicss.org/utilities/behaviors.html#will-change
+  'will-change-auto': {
+    'utility': {
+      'will-change': 'auto',
+    },
+    'meta': {
+      'group': 'willChange',
+      'order': 1,
+    },
+  },
+  'will-change-scroll': {
+    'utility': {
+      'will-change': 'scroll',
+    },
+    'meta': {
+      'group': 'willChange',
+      'order': 2,
+    },
+  },
+  'will-change-contents': {
+    'utility': {
+      'will-change': 'contents',
+    },
+    'meta': {
+      'group': 'willChange',
+      'order': 3,
+    },
+  },
+  'will-change-transform': {
+    'utility': {
+      'will-change': 'transform',
+    },
+    'meta': {
+      'group': 'willChange',
+      'order': 4,
+    },
+  },
 };
diff --git a/src/utils/completions.ts b/src/utils/completions.ts
@@ -479,6 +479,12 @@ const utilities: { [key:string]: string[]} = {
     'blur-${float}',
     'blur-${size}',
   ],
+  willChange: [
+    'will-change-auto',
+    'will-change-scroll',
+    'will-change-contents',
+    'will-change-transform',
+  ],
 };
 
 const negative: { [key:string]: true} = {

diff --git a/test/processor/__snapshots__/resolve.test.ts.yml b/test/processor/__snapshots__/resolve.test.ts.yml
@@ -169,7 +169,8 @@ Tools / get corePlugins / list / 0: |-
     "backdropInvert",
     "backdropOpacity",
     "backdropSaturate",
-    "backdropSepia"
+    "backdropSepia",
+    "willChange"
   ]
 Tools / get corePlugins / list2 / 1: |-
   [
@@ -345,7 +346,8 @@ Tools / get corePlugins / list3 / 2: |-
     "backdropInvert",
     "backdropOpacity",
     "backdropSaturate",
-    "backdropSepia"
+    "backdropSepia",
+    "willChange"
   ]
 Tools / resolve dynamic utilities / with-plugins / 1: |-
   [

diff --git a/test/processor/__snapshots__/utilities.test.ts.yml b/test/processor/__snapshots__/utilities.test.ts.yml
@@ -1391,6 +1391,19 @@ Tools / transition time handler / transition / 0: |-
     -o-transition-delay: 2.5s;
     transition-delay: 2.5s;
   }
+Tools / will-change / css / 0: |-
+  .will-change-auto {
+    will-change: auto;
+  }
+  .will-change-scroll {
+    will-change: scroll;
+  }
+  .will-change-contents {
+    will-change: contents;
+  }
+  .will-change-transform {
+    will-change: transform;
+  }
 Tools / wrap container / small container / 0: |-
   @media (min-width: 640px) {
     .sm\:container {

diff --git a/test/processor/resolve.test.ts b/test/processor/resolve.test.ts
@@ -44,8 +44,8 @@ describe('Resolve Tests', () => {
   });
 
   it('resolve static utilities', () => {
-    expect(Object.keys(processor.resolveStaticUtilities(false)).length).toEqual(320);
-    expect(Object.keys(processor.resolveStaticUtilities(true)).length).toEqual(329);
+    expect(Object.keys(processor.resolveStaticUtilities(false)).length).toEqual(324);
+    expect(Object.keys(processor.resolveStaticUtilities(true)).length).toEqual(333);
   });
 
   it('resolve dynamic utilities', () => {

diff --git a/test/processor/utilities.test.ts b/test/processor/utilities.test.ts
@@ -390,4 +390,13 @@ describe('Utilities', () => {
   it('fill-none and stroke-none is wrong', () => {
     expect(processor.interpret('fill-none stroke-none').styleSheet.build()).toMatchSnapshot('css');
   });
+
+  it('will-change', () => {
+    expect(processor.interpret(`
+    will-change-auto 
+    will-change-scroll 
+    will-change-contents 
+    will-change-transform
+    `).styleSheet.build()).toMatchSnapshot('css');
+  });
 });
diff --git a/test/utils/__snapshots__/completions.test.ts.yml b/test/utils/__snapshots__/completions.test.ts.yml
@@ -7002,7 +7002,11 @@ Tools / completions / static / 0: |-
     "blur-lg",
     "blur-xl",
     "blur-2xl",
-    "blur-3xl"
+    "blur-3xl",
+    "will-change-auto",
+    "will-change-scroll",
+    "will-change-contents",
+    "will-change-transform"
   ]
 'Tools / custom theme properties #226 / css / 1': |-
   .h-screen-px {