Hash keys in compiled style objects

Reduce the size of minifed JS by "minifying" the compiled style keys
produced by StyleX. This patch uses a base 62 hashing function to
generate smaller hashes, which are prefixed with `k` to avoid requiring
quotes around hashes that start with a number.

Author: necolas

packages/babel-plugin/__tests__/stylex-transform-call-test.js

@@ -70,7 +70,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1e2nbdu{color:red}", 3000);
         export const styles = {
           foo: {
-            color: "x1e2nbdu",
+            kMwMTN: "x1e2nbdu",
             $$css: true
           }
         };"
@@ -113,7 +113,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1e2nbdu{color:red}", 3000);
         const styles = {
           foo: {
-            color: "x1e2nbdu",
+            kMwMTN: "x1e2nbdu",
             $$css: true
           }
         };
@@ -138,7 +138,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1e2nbdu{color:red}", 3000);
         export default {
           foo: {
-            color: "x1e2nbdu",
+            kMwMTN: "x1e2nbdu",
             $$css: true
           }
         };"
@@ -163,7 +163,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1e2nbdu{color:red}", 3000);
         const styles = {
           foo: {
-            color: "x1e2nbdu",
+            kMwMTN: "x1e2nbdu",
             $$css: true
           }
         };
@@ -196,17 +196,17 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x14odnwx{padding:5px}", 1000);
         const styles = {
           default: {
-            backgroundColor: "xrkmrrc",
-            color: "xju2f9n",
-            padding: "x14odnwx",
-            paddingInline: null,
-            paddingStart: null,
-            paddingLeft: null,
-            paddingEnd: null,
-            paddingRight: null,
-            paddingBlock: null,
-            paddingTop: null,
-            paddingBottom: null,
+            kWkggS: "xrkmrrc",
+            kMwMTN: "xju2f9n",
+            kmVPX3: "x14odnwx",
+            kg3NbH: null,
+            kuDDbn: null,
+            kE3dHu: null,
+            kP0aTx: null,
+            kpe85a: null,
+            k8WAf4: null,
+            kLKAdn: null,
+            kGO01o: null,
             $$css: true
           }
         };
@@ -237,17 +237,17 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x14odnwx{padding:5px}", 1000);
         const styles = {
           default: {
-            backgroundColor: "xrkmrrc",
-            color: "xju2f9n",
-            padding: "x14odnwx",
-            paddingInline: null,
-            paddingStart: null,
-            paddingLeft: null,
-            paddingEnd: null,
-            paddingRight: null,
-            paddingBlock: null,
-            paddingTop: null,
-            paddingBottom: null,
+            kWkggS: "xrkmrrc",
+            kMwMTN: "xju2f9n",
+            kmVPX3: "x14odnwx",
+            kg3NbH: null,
+            kuDDbn: null,
+            kE3dHu: null,
+            kP0aTx: null,
+            kpe85a: null,
+            k8WAf4: null,
+            kLKAdn: null,
+            kGO01o: null,
             $$css: true
           }
         };
@@ -278,17 +278,17 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x14odnwx{padding:5px}", 1000);
         const styles = {
           default: {
-            backgroundColor: "xrkmrrc",
-            color: "xju2f9n",
-            padding: "x14odnwx",
-            paddingInline: null,
-            paddingStart: null,
-            paddingLeft: null,
-            paddingEnd: null,
-            paddingRight: null,
-            paddingBlock: null,
-            paddingTop: null,
-            paddingBottom: null,
+            kWkggS: "xrkmrrc",
+            kMwMTN: "xju2f9n",
+            kmVPX3: "x14odnwx",
+            kg3NbH: null,
+            kuDDbn: null,
+            kE3dHu: null,
+            kP0aTx: null,
+            kpe85a: null,
+            k8WAf4: null,
+            kLKAdn: null,
+            kGO01o: null,
             $$css: true
           }
         };
@@ -319,17 +319,17 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x14odnwx{padding:5px}", 1000);
         const styles = {
           default: {
-            backgroundColor: "xrkmrrc",
-            color: "xju2f9n",
-            padding: "x14odnwx",
-            paddingInline: null,
-            paddingStart: null,
-            paddingLeft: null,
-            paddingEnd: null,
-            paddingRight: null,
-            paddingBlock: null,
-            paddingTop: null,
-            paddingBottom: null,
+            kWkggS: "xrkmrrc",
+            kMwMTN: "xju2f9n",
+            kmVPX3: "x14odnwx",
+            kg3NbH: null,
+            kuDDbn: null,
+            kE3dHu: null,
+            kP0aTx: null,
+            kpe85a: null,
+            k8WAf4: null,
+            kLKAdn: null,
+            kGO01o: null,
             $$css: true
           }
         };

packages/babel-plugin/__tests__/stylex-transform-create-test.js

@@ -180,7 +180,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1vfi257{animation-name:x1jkcf39-B}", 3000);
         export const styles = {
           root: {
-            animationName: "x1vfi257",
+            kKVMdj: "x1vfi257",
             $$css: true
           }
         };"

packages/babel-plugin/__tests__/stylex-transform-import-test.js

@@ -60,10 +60,10 @@ describe('Legacy-shorthand-expansion resolution', () => {
         _inject2(".x1t2a60a{padding-left:5px}", 3000, ".x1t2a60a{padding-right:5px}");
         export const styles = {
           foo: {
-            paddingTop: "x123j3cw",
-            paddingEnd: "x1mpkggp",
-            paddingBottom: "xs9asl8",
-            paddingStart: "x1t2a60a",
+            kLKAdn: "x123j3cw",
+            kP0aTx: "x1mpkggp",
+            kGO01o: "xs9asl8",
+            kuDDbn: "x1t2a60a",
             $$css: true
           }
         };
@@ -154,10 +154,10 @@ describe('Legacy-shorthand-expansion resolution', () => {
         _inject2(".x1mpkggp{padding-right:5px}", 3000, ".x1mpkggp{padding-left:5px}");
         export const styles = {
           foo: {
-            paddingStart: "x1t2a60a",
-            paddingEnd: "x1mpkggp",
-            paddingLeft: null,
-            paddingRight: null,
+            kuDDbn: "x1t2a60a",
+            kP0aTx: "x1mpkggp",
+            kE3dHu: null,
+            kpe85a: null,
             $$css: true
           }
         };