diff --git a/.github/workflows/typos.toml b/.github/workflows/typos.toml
index aa9828c3c..acb5e913a 100644
--- a/.github/workflows/typos.toml
+++ b/.github/workflows/typos.toml
@@ -12,3 +12,5 @@ extend-exclude = [
 # Ignore false-positives
 stylex = "stylex"
 nd = "nd"
+# Intentional CSS property shorthand.
+ser = "ser"
diff --git a/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js b/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js
index 982735216..809e709ca 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js
@@ -158,11 +158,11 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           "0": {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           },
           "1": {
-            kWkggS: "x1t391ir",
+            bg: "x1t391ir",
             $$css: true
           }
         };
@@ -279,11 +279,11 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           foo: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           },
           bar: {
-            kWkggS: "x1t391ir",
+            bg: "x1t391ir",
             $$css: true
           }
         };
@@ -367,15 +367,15 @@ describe('@stylexjs/babel-plugin', () => {
         });
         export const styles = {
           foo: {
-            kmVPX3: "x14odnwx",
-            kg3NbH: null,
+            p: "x14odnwx",
+            pi: null,
             kuDDbn: null,
-            kE3dHu: null,
+            pl: null,
             kP0aTx: null,
-            kpe85a: null,
-            k8WAf4: null,
-            kLKAdn: null,
-            kGO01o: null,
+            pr: null,
+            pbk: null,
+            pt: null,
+            pb: null,
             $$css: true
           }
         };
@@ -422,7 +422,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           foo: {
-            kmVPX3: "x14odnwx",
+            p: "x14odnwx",
             $$css: true
           }
         };
@@ -473,15 +473,15 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           foo: {
-            kmVPX3: "x14odnwx",
-            kg3NbH: null,
+            p: "x14odnwx",
+            pi: null,
             kuDDbn: null,
-            kE3dHu: null,
+            pl: null,
             kP0aTx: null,
-            kpe85a: null,
-            k8WAf4: null,
-            kLKAdn: null,
-            kGO01o: null,
+            pr: null,
+            pbk: null,
+            pt: null,
+            pb: null,
             $$css: true
           }
         };
@@ -532,12 +532,12 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           foo: {
-            kmVPX3: "x14odnwx",
-            kLKAdn: null,
+            p: "x14odnwx",
+            pt: null,
             $$css: true
           },
           baz: {
-            kLKAdn: "xm7lytj",
+            pt: "xm7lytj",
             $$css: true
           }
         };
@@ -585,12 +585,12 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           foo: {
-            kmVPX3: "x14odnwx",
-            k8WAf4: null,
+            p: "x14odnwx",
+            pbk: null,
             $$css: true
           },
           bar: {
-            k8WAf4: "xp59q4u",
+            pbk: "xp59q4u",
             $$css: true
           }
         };
@@ -873,11 +873,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             default: {
-              kWkggS: "xrkmrrc",
+              bg: "xrkmrrc",
               $$css: true
             },
             active: {
-              kMwMTN: "xju2f9n",
+              c: "xju2f9n",
               $$css: true
             }
           };
@@ -1089,11 +1089,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             red: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             },
             blue: {
-              kMwMTN: "xju2f9n",
+              c: "xju2f9n",
               $$css: true
             }
           };
@@ -1159,11 +1159,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             red: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             },
             blue: {
-              kMwMTN: null,
+              c: null,
               $$css: true
             }
           };
@@ -1233,7 +1233,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             default: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "js/FooBar.react.js:4"
             }
           };
@@ -1243,7 +1243,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const otherStyles = {
             default: {
-              "backgroundColor-kWkggS": "x1t391ir",
+              "backgroundColor-bg": "x1t391ir",
               $$css: "js/FooBar.react.js:9"
             }
           };
@@ -1280,11 +1280,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             default: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "js/FooBar.react.js:4"
             },
             active: {
-              "color-kMwMTN": "xju2f9n",
+              "color-c": "xju2f9n",
               $$css: "js/FooBar.react.js:7"
             }
           };
@@ -1399,11 +1399,11 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           "0": {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           },
           "1": {
-            kWkggS: "x1t391ir",
+            bg: "x1t391ir",
             $$css: true
           }
         };
@@ -1432,7 +1432,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           default: {
-            kogj98: "x1d6cl6p",
+            m: "x1d6cl6p",
             $$css: true
           }
         };
@@ -1461,7 +1461,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           default: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           }
         };
@@ -1538,8 +1538,8 @@ describe('@stylexjs/babel-plugin', () => {
         });
         export const styles = {
           default: {
-            kMwMTN: "x17z2mba",
-            kWkggS: "xc445zv",
+            c: "x17z2mba",
+            bg: "xc445zv",
             $$css: true
           }
         };
@@ -1577,11 +1577,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             "0": {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             },
             "1": {
-              kWkggS: "x1t391ir",
+              bg: "x1t391ir",
               $$css: true
             }
           };"
@@ -1635,7 +1635,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             foo: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             }
           };"
@@ -1663,7 +1663,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             default: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             }
           };"
@@ -1709,7 +1709,7 @@ describe('@stylexjs/babel-plugin', () => {
               kX8ASl: "x16gpukw",
               kLDBTA: "x13nwy86",
               km2aEK: "x2ekbea",
-              k4EQJz: "x1o3008b",
+              bb: "x1o3008b",
               $$css: true
             }
           };
@@ -2036,43 +2036,43 @@ describe('@stylexjs/babel-plugin', () => {
         });
         export const styles = {
           sidebar: {
-            "boxSizing-kB7OPa": "x9f619",
-            "gridArea-kJuA4N": "x1yc5d2u",
-            "gridRow-kbNqZ1": null,
-            "gridRowStart-k1lYIM": null,
-            "gridRowEnd-kpJH7q": null,
-            "gridColumn-kBCFzs": null,
-            "gridColumnStart-kEXP64": null,
-            "gridColumnEnd-kWZpDQ": null,
+            "boxSizing-bx": "x9f619",
+            "gridArea-ga": "x1yc5d2u",
+            "gridRow-grw": null,
+            "gridRowStart-grs": null,
+            "gridRowEnd-gre": null,
+            "gridColumn-gc": null,
+            "gridColumnStart-gcs": null,
+            "gridColumnEnd-gce": null,
             $$css: "@stylexjs/babel-plugin::4"
           },
           content: {
-            "gridArea-kJuA4N": "x1fdo2jl",
-            "gridRow-kbNqZ1": null,
-            "gridRowStart-k1lYIM": null,
-            "gridRowEnd-kpJH7q": null,
-            "gridColumn-kBCFzs": null,
-            "gridColumnStart-kEXP64": null,
-            "gridColumnEnd-kWZpDQ": null,
+            "gridArea-ga": "x1fdo2jl",
+            "gridRow-grw": null,
+            "gridRowStart-grs": null,
+            "gridRowEnd-gre": null,
+            "gridColumn-gc": null,
+            "gridColumnStart-gcs": null,
+            "gridColumnEnd-gce": null,
             $$css: "@stylexjs/babel-plugin::8"
           },
           root: {
-            "display-k1xSpc": "xrvj5dj",
-            "gridTemplateRows-k9llMU": "x7k18q3",
-            "gridTemplateAreas-kC13JO": "x5gp9wm",
+            "display-d": "xrvj5dj",
+            "gridTemplateRows-gtr": "x7k18q3",
+            "gridTemplateAreas-gta": "x5gp9wm",
             $$css: "@stylexjs/babel-plugin::11"
           },
           withSidebar: {
-            "gridTemplateColumns-kumcoG": "x1rkzygb",
-            "gridTemplateRows-k9llMU": "x7k18q3",
-            "gridTemplateAreas-kC13JO": "x17lh93j",
+            "gridTemplateColumns-gtc": "x1rkzygb",
+            "gridTemplateRows-gtr": "x7k18q3",
+            "gridTemplateAreas-gta": "x17lh93j",
             "@media (max-width: 640px)_gridTemplateRows-k9pwkU": "xmr4b4k",
             "@media (max-width: 640px)_gridTemplateAreas-kOnEH4": "xesbpuc",
             "@media (max-width: 640px)_gridTemplateColumns-k1JLwA": "x15nfgh4",
             $$css: "@stylexjs/babel-plugin::16"
           },
           noSidebar: {
-            "gridTemplateColumns-kumcoG": "x1mkdm3x",
+            "gridTemplateColumns-gtc": "x1mkdm3x",
             $$css: "@stylexjs/babel-plugin::26"
           }
         };
@@ -2180,43 +2180,43 @@ describe('@stylexjs/babel-plugin', () => {
         });
         export const styles = {
           sidebar: {
-            "boxSizing-kB7OPa": "x9f619",
-            "gridArea-kJuA4N": "x1yc5d2u",
-            "gridRow-kbNqZ1": null,
-            "gridRowStart-k1lYIM": null,
-            "gridRowEnd-kpJH7q": null,
-            "gridColumn-kBCFzs": null,
-            "gridColumnStart-kEXP64": null,
-            "gridColumnEnd-kWZpDQ": null,
+            "boxSizing-bx": "x9f619",
+            "gridArea-ga": "x1yc5d2u",
+            "gridRow-grw": null,
+            "gridRowStart-grs": null,
+            "gridRowEnd-gre": null,
+            "gridColumn-gc": null,
+            "gridColumnStart-gcs": null,
+            "gridColumnEnd-gce": null,
             $$css: "@stylexjs/babel-plugin::4"
           },
           content: {
-            "gridArea-kJuA4N": "x1fdo2jl",
-            "gridRow-kbNqZ1": null,
-            "gridRowStart-k1lYIM": null,
-            "gridRowEnd-kpJH7q": null,
-            "gridColumn-kBCFzs": null,
-            "gridColumnStart-kEXP64": null,
-            "gridColumnEnd-kWZpDQ": null,
+            "gridArea-ga": "x1fdo2jl",
+            "gridRow-grw": null,
+            "gridRowStart-grs": null,
+            "gridRowEnd-gre": null,
+            "gridColumn-gc": null,
+            "gridColumnStart-gcs": null,
+            "gridColumnEnd-gce": null,
             $$css: "@stylexjs/babel-plugin::8"
           },
           root: {
-            "display-k1xSpc": "xrvj5dj",
-            "gridTemplateRows-k9llMU": "x7k18q3",
-            "gridTemplateAreas-kC13JO": "x5gp9wm",
+            "display-d": "xrvj5dj",
+            "gridTemplateRows-gtr": "x7k18q3",
+            "gridTemplateAreas-gta": "x5gp9wm",
             $$css: "@stylexjs/babel-plugin::11"
           },
           withSidebar: {
-            "gridTemplateColumns-kumcoG": "x1rkzygb",
-            "gridTemplateRows-k9llMU": "x7k18q3",
-            "gridTemplateAreas-kC13JO": "x17lh93j",
+            "gridTemplateColumns-gtc": "x1rkzygb",
+            "gridTemplateRows-gtr": "x7k18q3",
+            "gridTemplateAreas-gta": "x17lh93j",
             "@media (max-width: 640px)_gridTemplateRows-k9pwkU": "xmr4b4k",
             "@media (max-width: 640px)_gridTemplateAreas-kOnEH4": "xesbpuc",
             "@media (max-width: 640px)_gridTemplateColumns-k1JLwA": "x15nfgh4",
             $$css: "@stylexjs/babel-plugin::16"
           },
           noSidebar: {
-            "gridTemplateColumns-kumcoG": "x1mkdm3x",
+            "gridTemplateColumns-gtc": "x1mkdm3x",
             $$css: "@stylexjs/babel-plugin::26"
           }
         };
diff --git a/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-legacy-shorthands-test.js b/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-legacy-shorthands-test.js
index e35e3c48c..454ddeb6a 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-legacy-shorthands-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-legacy-shorthands-test.js
@@ -266,10 +266,10 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           foo: {
-            kLKAdn: "x123j3cw",
-            kwRFfy: "x1gabggj",
-            kGO01o: "xs9asl8",
-            kZCmMZ: "xaso8d8",
+            pt: "x123j3cw",
+            pe: "x1gabggj",
+            pb: "xs9asl8",
+            ps: "xaso8d8",
             $$css: true
           }
         };
@@ -341,10 +341,10 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           foo: {
-            kZCmMZ: "xaso8d8",
-            kwRFfy: "x1gabggj",
-            kE3dHu: null,
-            kpe85a: null,
+            ps: "xaso8d8",
+            pe: "x1gabggj",
+            pl: null,
+            pr: null,
             $$css: true
           }
         };
@@ -379,10 +379,10 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           foo: {
-            kZCmMZ: "xaso8d8",
-            kwRFfy: "x2vl965",
-            kE3dHu: null,
-            kpe85a: null,
+            ps: "xaso8d8",
+            pe: "x2vl965",
+            pl: null,
+            pr: null,
             $$css: true
           }
         };
@@ -509,18 +509,18 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         const styles = {
           foo: {
-            "paddingTop-kLKAdn": "x123j3cw",
-            "paddingBottom-kGO01o": "xs9asl8",
-            "paddingInlineStart-kZCmMZ": "xaso8d8",
-            "paddingInlineEnd-kwRFfy": "x2vl965",
+            "paddingTop-pt": "x123j3cw",
+            "paddingBottom-pb": "xs9asl8",
+            "paddingInlineStart-ps": "xaso8d8",
+            "paddingInlineEnd-pe": "x2vl965",
             $$css: "@stylexjs/babel-plugin::4"
           },
           bar: {
-            "paddingTop-kLKAdn": "x1nn3v0j",
-            "paddingBottom-kGO01o": "x1120s5i",
-            "paddingLeft-kE3dHu": "xnljgj5",
-            "paddingInlineStart-kZCmMZ": null,
-            "paddingInlineEnd-kwRFfy": null,
+            "paddingTop-pt": "x1nn3v0j",
+            "paddingBottom-pb": "x1120s5i",
+            "paddingLeft-pl": "xnljgj5",
+            "paddingInlineStart-ps": null,
+            "paddingInlineEnd-pe": null,
             $$css: "@stylexjs/babel-plugin::9"
           }
         };
@@ -612,10 +612,10 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           foo: {
-            keTefX: "xpcyujq",
-            k71WvV: "xf6vk7d",
-            koQZXg: null,
-            km5ZXQ: null,
+            ms: "xpcyujq",
+            me: "xf6vk7d",
+            ml: null,
+            mr: null,
             $$css: true
           }
         };
@@ -650,10 +650,10 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           foo: {
-            keTefX: "xpcyujq",
-            k71WvV: "x1sa5p1d",
-            koQZXg: null,
-            km5ZXQ: null,
+            ms: "xpcyujq",
+            me: "x1sa5p1d",
+            ml: null,
+            mr: null,
             $$css: true
           }
         };
@@ -686,8 +686,8 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           foo: {
-            keoZOQ: "x1ok221b",
-            k1K539: "xyorhqc",
+            mt: "x1ok221b",
+            mb: "xyorhqc",
             $$css: true
           }
         };
@@ -1147,31 +1147,31 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           none: {
-            "listStyleType-kH6xsr": "x3ct3a4",
+            "listStyleType-lst": "x3ct3a4",
             "listStylePosition-kpqbRz": null,
             "listStyleImage-khnUzm": null,
             $$css: "@stylexjs/babel-plugin::4"
           },
           square: {
-            "listStyleType-kH6xsr": "x152237o",
+            "listStyleType-lst": "x152237o",
             "listStylePosition-kpqbRz": null,
             "listStyleImage-khnUzm": null,
             $$css: "@stylexjs/babel-plugin::7"
           },
           inside: {
-            "listStyleType-kH6xsr": null,
+            "listStyleType-lst": null,
             "listStylePosition-kpqbRz": "x1cy9i3i",
             "listStyleImage-khnUzm": null,
             $$css: "@stylexjs/babel-plugin::10"
           },
           custom1: {
-            "listStyleType-kH6xsr": "x1jzm7bx",
+            "listStyleType-lst": "x1jzm7bx",
             "listStylePosition-kpqbRz": null,
             "listStyleImage-khnUzm": null,
             $$css: "@stylexjs/babel-plugin::13"
           },
           custom2: {
-            "listStyleType-kH6xsr": "x1tpmu87",
+            "listStyleType-lst": "x1tpmu87",
             "listStylePosition-kpqbRz": null,
             "listStyleImage-khnUzm": null,
             $$css: "@stylexjs/babel-plugin::16"
@@ -1243,25 +1243,25 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
         });
         export const styles = {
           one: {
-            "listStyleType-kH6xsr": "x3ct3a4",
+            "listStyleType-lst": "x3ct3a4",
             "listStylePosition-kpqbRz": "x1cy9i3i",
             "listStyleImage-khnUzm": null,
             $$css: "@stylexjs/babel-plugin::4"
           },
           two: {
-            "listStyleType-kH6xsr": "x152237o",
+            "listStyleType-lst": "x152237o",
             "listStylePosition-kpqbRz": null,
             "listStyleImage-khnUzm": "xnbnhf8",
             $$css: "@stylexjs/babel-plugin::7"
           },
           three: {
-            "listStyleType-kH6xsr": "xl2um64",
+            "listStyleType-lst": "xl2um64",
             "listStylePosition-kpqbRz": null,
             "listStyleImage-khnUzm": "x1qcowux",
             $$css: "@stylexjs/babel-plugin::10"
           },
           four: {
-            "listStyleType-kH6xsr": "xqkogtj",
+            "listStyleType-lst": "xqkogtj",
             "listStylePosition-kpqbRz": "x43c9pm",
             "listStyleImage-khnUzm": "x1qcowux",
             $$css: "@stylexjs/babel-plugin::13"
@@ -1333,11 +1333,11 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
           one: {
             "listStylePosition-kpqbRz": "x1cy9i3i",
             "listStyleImage-khnUzm": null,
-            "listStyleType-kH6xsr": "x152237o",
+            "listStyleType-lst": "x152237o",
             $$css: "@stylexjs/babel-plugin::4"
           },
           two: {
-            "listStyleType-kH6xsr": "x12kno0j",
+            "listStyleType-lst": "x12kno0j",
             "listStyleImage-khnUzm": "xnbnhf8",
             "listStylePosition-kpqbRz": "x43c9pm",
             $$css: "@stylexjs/babel-plugin::8"
@@ -1345,13 +1345,13 @@ describe('legacy-shorthand-expansion style resolution (enableLogicalStylesPolyfi
           three: {
             "listStyleImage-khnUzm": "x1qcowux",
             "listStylePosition-kpqbRz": "x43c9pm",
-            "listStyleType-kH6xsr": "x152237o",
+            "listStyleType-lst": "x152237o",
             $$css: "@stylexjs/babel-plugin::12"
           },
           four: {
             "listStyleImage-khnUzm": "x1qcowux",
             "listStylePosition-kpqbRz": "x43c9pm",
-            "listStyleType-kH6xsr": "x152237o",
+            "listStyleType-lst": "x152237o",
             $$css: "@stylexjs/babel-plugin::17"
           }
         };"
@@ -1621,10 +1621,10 @@ describe('legacy-shorthand-expansion resolution (enableLogicalStylesPolyfill: fa
         });
         export const styles = {
           foo: {
-            kLKAdn: "x123j3cw",
-            kwRFfy: "x1gabggj",
-            kGO01o: "xs9asl8",
-            kZCmMZ: "xaso8d8",
+            pt: "x123j3cw",
+            pe: "x1gabggj",
+            pb: "xs9asl8",
+            ps: "xaso8d8",
             $$css: true
           }
         };
@@ -1698,10 +1698,10 @@ describe('legacy-shorthand-expansion resolution (enableLogicalStylesPolyfill: fa
         });
         export const styles = {
           foo: {
-            kZCmMZ: "xaso8d8",
-            kwRFfy: "x1gabggj",
-            kE3dHu: null,
-            kpe85a: null,
+            ps: "xaso8d8",
+            pe: "x1gabggj",
+            pl: null,
+            pr: null,
             $$css: true
           }
         };
@@ -1794,8 +1794,8 @@ describe('legacy-shorthand-expansion resolution (enableLogicalStylesPolyfill: fa
         });
         export const styles = {
           foo: {
-            kLKAdn: "x123j3cw",
-            kGO01o: "x1a8lsjc",
+            pt: "x123j3cw",
+            pb: "x1a8lsjc",
             $$css: true
           }
         };
@@ -1887,10 +1887,10 @@ describe('legacy-shorthand-expansion resolution (enableLogicalStylesPolyfill: fa
         });
         export const styles = {
           foo: {
-            keTefX: "xpcyujq",
-            k71WvV: "xf6vk7d",
-            koQZXg: null,
-            km5ZXQ: null,
+            ms: "xpcyujq",
+            me: "xf6vk7d",
+            ml: null,
+            mr: null,
             $$css: true
           }
         };
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js
index dd0db41d0..7c106ba4a 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js
@@ -621,7 +621,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import * as stylex from '@stylexjs/stylex';
         const styles = {
           root: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           }
         };
@@ -641,7 +641,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import * as stylex from '@stylexjs/stylex';
         export const styles = {
           root: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           }
         };"
@@ -660,7 +660,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import * as stylex from '@stylexjs/stylex';
         export default {
           root: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           }
         };"
@@ -680,7 +680,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import * as stylex from '@stylexjs/stylex';
         const styles = {
           root: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           }
         };
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
index 48b06af23..943962508 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
@@ -224,14 +224,14 @@ describe('@stylexjs/babel-plugin', () => {
         };
         export const styles = {
           root: {
-            "animationName-kKVMdj": "x13ah0pd",
-            "backgroundColor-kWkggS": "xrkmrrc xbrh7vm xfy810d xahc4vn x1t4kl4c x975j7z",
-            "margin-kogj98": "xymmreb",
-            "borderColor-kVAM5u": "x1bg2uv5 xio2edn xqiy1ys",
-            "outlineColor-kjBf7l": "x18abd1y",
-            "textShadow-kKMj4B": "x1skrh0i xtj17id",
-            "padding-kmVPX3": "x1s2izit",
-            "float-kyUFMd": "x1kmio9f",
+            "animationName-am": "x13ah0pd",
+            "backgroundColor-bg": "xrkmrrc xbrh7vm xfy810d xahc4vn x1t4kl4c x975j7z",
+            "margin-m": "xymmreb",
+            "borderColor-bc": "x1bg2uv5 xio2edn xqiy1ys",
+            "outlineColor-olc": "x18abd1y",
+            "textShadow-ts": "x1skrh0i xtj17id",
+            "padding-p": "x1s2izit",
+            "float-fl": "x1kmio9f",
             $$css: "components/main.js:33"
           },
           overrideColor: {
@@ -239,7 +239,7 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: "components/main.js:71"
           },
           dynamic: color => [{
-            "color-kMwMTN": color != null ? "x14rh7hd" : color,
+            "color-c": color != null ? "x14rh7hd" : color,
             $$css: "components/main.js:74"
           }, {
             "--x-color": color != null ? color : undefined
@@ -317,14 +317,14 @@ describe('@stylexjs/babel-plugin', () => {
         };
         export const styles = {
           root: {
-            "animationName-kKVMdj": "x13ah0pd",
-            "backgroundColor-kWkggS": "xrkmrrc xbrh7vm xfy810d xahc4vn x1t4kl4c x975j7z",
-            "margin-kogj98": "xymmreb",
-            "borderColor-kVAM5u": "x1bg2uv5 xio2edn xqiy1ys",
-            "outlineColor-kjBf7l": "x18abd1y",
-            "textShadow-kKMj4B": "x1skrh0i xtj17id",
-            "padding-kmVPX3": "x1s2izit",
-            "float-kyUFMd": "x1kmio9f",
+            "animationName-am": "x13ah0pd",
+            "backgroundColor-bg": "xrkmrrc xbrh7vm xfy810d xahc4vn x1t4kl4c x975j7z",
+            "margin-m": "xymmreb",
+            "borderColor-bc": "x1bg2uv5 xio2edn xqiy1ys",
+            "outlineColor-olc": "x18abd1y",
+            "textShadow-ts": "x1skrh0i xtj17id",
+            "padding-p": "x1s2izit",
+            "float-fl": "x1kmio9f",
             $$css: "main.js:33"
           },
           overrideColor: {
@@ -332,7 +332,7 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: "main.js:71"
           },
           dynamic: color => [{
-            "color-kMwMTN": color != null ? "x14rh7hd" : color,
+            "color-c": color != null ? "x14rh7hd" : color,
             $$css: "main.js:74"
           }, {
             "--x-color": color != null ? color : undefined
@@ -765,14 +765,14 @@ describe('@stylexjs/babel-plugin', () => {
         };
         export const styles = {
           root: {
-            "animationName-kKVMdj": "x13ah0pd",
-            "backgroundColor-kWkggS": "xrkmrrc xbrh7vm xfy810d xahc4vn x1t4kl4c x975j7z",
-            "margin-kogj98": "xymmreb",
-            "borderColor-kVAM5u": "x1bg2uv5 xio2edn xqiy1ys",
-            "outlineColor-kjBf7l": "x18abd1y",
-            "textShadow-kKMj4B": "x1skrh0i xtj17id",
-            "padding-kmVPX3": "x1s2izit",
-            "float-kyUFMd": "x1kmio9f",
+            "animationName-am": "x13ah0pd",
+            "backgroundColor-bg": "xrkmrrc xbrh7vm xfy810d xahc4vn x1t4kl4c x975j7z",
+            "margin-m": "xymmreb",
+            "borderColor-bc": "x1bg2uv5 xio2edn xqiy1ys",
+            "outlineColor-olc": "x18abd1y",
+            "textShadow-ts": "x1skrh0i xtj17id",
+            "padding-p": "x1s2izit",
+            "float-fl": "x1kmio9f",
             $$css: "main.js:33"
           },
           overrideColor: {
@@ -780,7 +780,7 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: "main.js:71"
           },
           dynamic: color => [{
-            "color-kMwMTN": color != null ? "x14rh7hd" : color,
+            "color-c": color != null ? "x14rh7hd" : color,
             $$css: "main.js:74"
           }, {
             "--x-color": color != null ? color : undefined
@@ -865,15 +865,15 @@ describe('@stylexjs/babel-plugin', () => {
         };
         export const styles = {
           container: {
-            "marginTop-keoZOQ": "x1anpbxc",
-            "marginInlineEnd-k71WvV": "x3aesyq",
-            "marginBottom-k1K539": "xyorhqc",
-            "marginInlineStart-keTefX": "xqsn43r",
-            "paddingTop-kLKAdn": "x123j3cw",
-            "paddingInlineEnd-kwRFfy": "x1q3ajuy",
-            "paddingBottom-kGO01o": "xs9asl8",
-            "paddingInlineStart-kZCmMZ": "x1gx403c",
-            "float-kyUFMd": "xj87blo",
+            "marginTop-mt": "x1anpbxc",
+            "marginInlineEnd-me": "x3aesyq",
+            "marginBottom-mb": "xyorhqc",
+            "marginInlineStart-ms": "xqsn43r",
+            "paddingTop-pt": "x123j3cw",
+            "paddingInlineEnd-pe": "x1q3ajuy",
+            "paddingBottom-pb": "xs9asl8",
+            "paddingInlineStart-ps": "x1gx403c",
+            "float-fl": "xj87blo",
             $$css: "main.js:25"
           }
         };"
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js
index 11eef44e0..0ae0932b3 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js
@@ -79,8 +79,8 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kWkggS: "xrkmrrc",
-              kMwMTN: "xju2f9n",
+              bg: "xrkmrrc",
+              c: "xju2f9n",
               $$css: true
             }
           };"
@@ -125,7 +125,7 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kMwMTN: "x1tfn4g9",
+              c: "x1tfn4g9",
               $$css: true
             }
           };"
@@ -164,7 +164,7 @@ describe('@stylexjs/babel-plugin', () => {
           import { env } from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kMwMTN: "xa6cz37",
+              c: "xa6cz37",
               $$css: true
             }
           };"
@@ -201,7 +201,7 @@ describe('@stylexjs/babel-plugin', () => {
           "import { create, env } from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kMwMTN: "x1tfn4g9",
+              c: "x1tfn4g9",
               $$css: true
             }
           };"
@@ -243,7 +243,7 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kMwMTN: "x10zuzju",
+              c: "x10zuzju",
               $$css: true
             }
           };"
@@ -285,7 +285,7 @@ describe('@stylexjs/babel-plugin', () => {
           "import { create, env } from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kMwMTN: "x10zuzju",
+              c: "x10zuzju",
               $$css: true
             }
           };"
@@ -327,7 +327,7 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kGVxlE: "xft59df",
+              sh: "xft59df",
               $$css: true
             }
           };"
@@ -370,8 +370,8 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kMwMTN: "xa1gjp6",
-              kWkggS: "xuy6j5x",
+              c: "xa1gjp6",
+              bg: "xuy6j5x",
               $$css: true
             }
           };"
@@ -417,8 +417,8 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           const _styles = {
             root: {
-              kWkggS: "xrkmrrc",
-              kMwMTN: "xju2f9n",
+              bg: "xrkmrrc",
+              c: "xju2f9n",
               $$css: true
             }
           };
@@ -484,15 +484,15 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           const _styles = {
             root: {
-              kWkggS: "xrkmrrc",
-              kMwMTN: "xju2f9n",
+              bg: "xrkmrrc",
+              c: "xju2f9n",
               $$css: true
             }
           };
           const _styles2 = {
             root: {
-              kWkggS: "x1t391ir",
-              kMwMTN: "x1prwzq3",
+              bg: "x1t391ir",
+              c: "x1prwzq3",
               $$css: true
             }
           };
@@ -504,8 +504,8 @@ describe('@stylexjs/babel-plugin', () => {
           }
           const _styles3 = {
             root: {
-              kWkggS: "x1u857p9",
-              kMwMTN: "x1e2nbdu",
+              bg: "x1u857p9",
+              c: "x1e2nbdu",
               $$css: true
             }
           };
@@ -596,23 +596,23 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             "1": {
-              kMwMTN: "xju2f9n",
+              c: "xju2f9n",
               $$css: true
             },
             "2": {
-              kMwMTN: "x125ip1n",
+              c: "x125ip1n",
               $$css: true
             },
             root: {
-              kWkggS: "xrkmrrc",
+              bg: "xrkmrrc",
               $$css: true
             },
             other: {
-              kMwMTN: "xju2f9n",
+              c: "xju2f9n",
               $$css: true
             },
             "bar-baz": {
-              kMwMTN: "x1prwzq3",
+              c: "x1prwzq3",
               $$css: true
             }
           };"
@@ -747,25 +747,25 @@ describe('@stylexjs/babel-plugin', () => {
           const borderRadius = 2;
           export const styles = {
             error: {
-              kVAM5u: "xs4buau",
-              ksu8eU: "xn06r42",
-              kMzoRj: "xn43iik",
-              kogj98: "xe4njm9",
-              kmVPX3: "x1lmef92",
+              bc: "xs4buau",
+              bds: "xn06r42",
+              bw: "xn43iik",
+              m: "xe4njm9",
+              p: "x1lmef92",
               $$css: true
             },
             short: {
-              kt9PQ7: "xa309fb",
-              kfdmCh: "x1q0q8m5",
-              kL6WhQ: "xud65wk",
-              kVAM5u: "x1lh7sze",
-              kaIpWk: "x12oqio5",
-              ksu8eU: "x1y0btm7",
-              kMzoRj: "xmkeg23",
-              keoZOQ: "xxsse2n",
-              km5ZXQ: "x1wh8b8d",
-              k1K539: "xat24cr",
-              kLKAdn: "xexx8yu",
+              bbw: "xa309fb",
+              bbs: "x1q0q8m5",
+              bbc: "xud65wk",
+              bc: "x1lh7sze",
+              br: "x12oqio5",
+              bds: "x1y0btm7",
+              bw: "xmkeg23",
+              mt: "xxsse2n",
+              mr: "x1wh8b8d",
+              mb: "xat24cr",
+              pt: "xexx8yu",
               $$css: true
             }
           };"
@@ -945,25 +945,25 @@ describe('@stylexjs/babel-plugin', () => {
           const borderRadius = 2;
           export const styles = {
             error: {
-              kVAM5u: "xs4buau",
-              ksu8eU: "xn06r42",
-              kMzoRj: "xn43iik",
-              kogj98: "xe4njm9",
-              kmVPX3: "x1lmef92",
+              bc: "xs4buau",
+              bds: "xn06r42",
+              bw: "xn43iik",
+              m: "xe4njm9",
+              p: "x1lmef92",
               $$css: true
             },
             short: {
-              kt9PQ7: "xa309fb",
-              kfdmCh: "x1q0q8m5",
-              kL6WhQ: "xud65wk",
-              kVAM5u: "x1lh7sze",
-              kaIpWk: "x12oqio5",
-              ksu8eU: "x1y0btm7",
-              kMzoRj: "xmkeg23",
-              keoZOQ: "xxsse2n",
-              km5ZXQ: "x1wh8b8d",
-              k1K539: "xat24cr",
-              kLKAdn: "xexx8yu",
+              bbw: "xa309fb",
+              bbs: "x1q0q8m5",
+              bbc: "xud65wk",
+              bc: "x1lh7sze",
+              br: "x12oqio5",
+              bds: "x1y0btm7",
+              bw: "xmkeg23",
+              mt: "xxsse2n",
+              mr: "x1wh8b8d",
+              mb: "xat24cr",
+              pt: "xexx8yu",
               $$css: true
             }
           };"
@@ -1118,7 +1118,7 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             root: {
-              kfSwDN: "x87ps6o",
+              us: "x87ps6o",
               $$css: true
             }
           };"
@@ -1197,7 +1197,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                k1ekBW: "x1cfch2b",
+                tp: "x1cfch2b",
                 $$css: true
               }
             };"
@@ -1240,7 +1240,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                k1ekBW: "x17389it",
+                tp: "x17389it",
                 $$css: true
               }
             };"
@@ -1275,11 +1275,11 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               one: {
-                k1ekBW: "xh6nlrc",
+                tp: "xh6nlrc",
                 $$css: true
               },
               two: {
-                k1ekBW: "xh6nlrc",
+                tp: "xh6nlrc",
                 $$css: true
               }
             };"
@@ -1313,7 +1313,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                k6sLGO: "x1n5prqt",
+                wc: "x1n5prqt",
                 $$css: true
               }
             };"
@@ -1356,7 +1356,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                k6sLGO: "x1lxaxzv",
+                wc: "x1lxaxzv",
                 $$css: true
               }
             };"
@@ -1391,11 +1391,11 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               one: {
-                k6sLGO: "x30a982",
+                wc: "x30a982",
                 $$css: true
               },
               two: {
-                k6sLGO: "x30a982",
+                wc: "x30a982",
                 $$css: true
               }
             };"
@@ -1427,7 +1427,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                k6sLGO: "x1q5hf6d",
+                wc: "x1q5hf6d",
                 $$css: true
               }
             };"
@@ -1461,7 +1461,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kah6P1: "xd71okc",
+                ct: "xd71okc",
                 $$css: true
               }
             };"
@@ -1495,7 +1495,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kVAEAm: "x1ruww2u",
+                po: "x1ruww2u",
                 $$css: true
               }
             };"
@@ -1529,7 +1529,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kWkggS: "xn9heto",
+                bg: "xn9heto",
                 $$css: true
               }
             };"
@@ -1563,7 +1563,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kGVxlE: "xxnfx33",
+                sh: "xxnfx33",
                 $$css: true
               }
             };"
@@ -1600,7 +1600,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kVAEAm: "x15oojuh",
+                po: "x15oojuh",
                 $$css: true
               }
             };"
@@ -1634,7 +1634,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x1nv2f59",
+                c: "x1nv2f59",
                 $$css: true
               }
             };"
@@ -1668,7 +1668,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x8nmrrw",
+                c: "x8nmrrw",
                 $$css: true
               }
             };"
@@ -1702,7 +1702,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x1775bb3",
+                c: "x1775bb3",
                 $$css: true
               }
             };"
@@ -1736,7 +1736,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "xsrkhny",
+                c: "xsrkhny",
                 $$css: true
               }
             };"
@@ -1770,7 +1770,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x8vgp76",
+                c: "x8vgp76",
                 $$css: true
               }
             };"
@@ -1805,7 +1805,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x8vgp76",
+                c: "x8vgp76",
                 $$css: true
               }
             };"
@@ -1849,7 +1849,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x1qo2jjy",
+                c: "x1qo2jjy",
                 $$css: true
               }
             };"
@@ -1888,8 +1888,8 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kWkggS: "x1gykpug",
-                kMwMTN: "x17z2mba",
+                bg: "x1gykpug",
+                c: "x17z2mba",
                 $$css: true
               }
             };"
@@ -1936,7 +1936,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x17z2mba x96fq8s x1wvtd7d x126ychx",
+                c: "x17z2mba x96fq8s x1wvtd7d x126ychx",
                 $$css: true
               }
             };"
@@ -2001,7 +2001,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "xa2ikkt",
+                c: "xa2ikkt",
                 $$css: true
               }
             };"
@@ -2042,7 +2042,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "xa2ikkt x13pwkn",
+                c: "xa2ikkt x13pwkn",
                 $$css: true
               }
             };"
@@ -2091,7 +2091,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kMwMTN: "x113j3rq",
+                c: "x113j3rq",
                 $$css: true
               }
             };"
@@ -2127,7 +2127,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kVAEAm: "x1nxcus0",
+                po: "x1nxcus0",
                 $$css: true
               }
             };"
@@ -2442,7 +2442,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kWkggS: "xrkmrrc xdm03ys xb3e2qq x856a2w",
+                bg: "xrkmrrc xdm03ys xb3e2qq x856a2w",
                 $$css: true
               }
             };"
@@ -2508,7 +2508,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kWkggS: "xrkmrrc x1qc147k x9qmkci x17z8iku",
+                bg: "xrkmrrc x1qc147k x9qmkci x17z8iku",
                 $$css: true
               }
             };"
@@ -2574,7 +2574,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kWkggS: "xrkmrrc xn8cmr1 x1lr89ez x856a2w",
+                bg: "xrkmrrc xn8cmr1 x1lr89ez x856a2w",
                 $$css: true
               }
             };"
@@ -2638,7 +2638,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kWkggS: "xrkmrrc xw6up8c x1ssfqz5",
+                bg: "xrkmrrc xw6up8c x1ssfqz5",
                 $$css: true
               }
             };"
@@ -2692,7 +2692,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kWkggS: "xrkmrrc x6m3b6q x6um648",
+                bg: "xrkmrrc x6m3b6q x6um648",
                 $$css: true
               }
             };"
@@ -2748,7 +2748,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: {
-                kGuDYH: "x1jchvi3 x1w3nbkt xicay7j",
+                fs: "x1jchvi3 x1w3nbkt xicay7j",
                 $$css: true
               }
             };"
@@ -2801,7 +2801,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               default: {
-                kVAEAm: "xixxii4 x1vazst0",
+                po: "xixxii4 x1vazst0",
                 $$css: true
               }
             };"
@@ -2847,8 +2847,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -2913,10 +2913,10 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kzqmXN: "x5lhr3w",
-              kZKoxP: "x16ye13r",
-              kogj98: "xb9ncqk",
-              kmVPX3: "x1fozly0",
+              w: "x5lhr3w",
+              h: "x16ye13r",
+              m: "xb9ncqk",
+              p: "x1fozly0",
               "$$css": true
             };
             export const styles = {
@@ -3013,8 +3013,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kSiTet: "xb4nw82",
-              k3aq6I: "xsqj5wx",
+              op: "xb4nw82",
+              tf: "xsqj5wx",
               "$$css": true
             };
             export const styles = {
@@ -3077,8 +3077,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -3141,8 +3141,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xrkmrrc",
-              kMwMTN: "x1mqxbix",
+              bg: "xrkmrrc",
+              c: "x1mqxbix",
               "$$css": true
             };
             export const styles = {
@@ -3186,8 +3186,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -3249,7 +3249,7 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
+              bg: "xl8spv7",
               "$$css": true
             };
             export const styles = {
@@ -3294,7 +3294,7 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
+              bg: "xl8spv7",
               "$$css": true
             };
             export const styles = {
@@ -3342,10 +3342,10 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kzqmXN: "x5lhr3w",
-              kZKoxP: "x16ye13r",
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              w: "x5lhr3w",
+              h: "x16ye13r",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -3449,15 +3449,15 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
-              kzqmXN: "x5lhr3w",
-              kZKoxP: "x16ye13r",
-              kogj98: "xb9ncqk",
-              kmVPX3: "x1fozly0",
-              kGuDYH: "xdmh292",
-              kSiTet: "xb4nw82",
-              k3aq6I: "xsqj5wx",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
+              w: "x5lhr3w",
+              h: "x16ye13r",
+              m: "xb9ncqk",
+              p: "x1fozly0",
+              fs: "xdmh292",
+              op: "xb4nw82",
+              tf: "xsqj5wx",
               "$$css": true
             };
             export const styles = {
@@ -3640,12 +3640,12 @@ describe('@stylexjs/babel-plugin', () => {
         expect(code).toMatchInlineSnapshot(`
           "import * as stylex from '@stylexjs/stylex';
           const _temp = {
-            kWkggS: "xrkmrrc",
+            bg: "xrkmrrc",
             "$$css": true
           };
           export const styles = {
             root: color => [_temp, {
-              kMwMTN: color != null ? "x14rh7hd" : color,
+              c: color != null ? "x14rh7hd" : color,
               $$css: true
             }, {
               "--x-color": color != null ? color : undefined
@@ -3700,13 +3700,13 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             one: color => [{
-              kMwMTN: color != null ? "x14rh7hd" : color,
+              c: color != null ? "x14rh7hd" : color,
               $$css: true
             }, {
               "--x-color": color != null ? color : undefined
             }],
             two: {
-              kMwMTN: "x1mqxbix",
+              c: "x1mqxbix",
               $$css: true
             }
           };"
@@ -3822,7 +3822,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: width => [{
-                kzqmXN: width != null ? "x5lhr3w" : width,
+                w: width != null ? "x5lhr3w" : width,
                 $$css: true
               }, {
                 "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
@@ -3868,13 +3868,13 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xrkmrrc",
-              kZKoxP: "x16ye13r",
+              bg: "xrkmrrc",
+              h: "x16ye13r",
               "$$css": true
             };
             export const styles = {
               root: width => [_temp, {
-                kzqmXN: width != null ? "x5lhr3w" : width,
+                w: width != null ? "x5lhr3w" : width,
                 $$css: true
               }, {
                 "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
@@ -3999,8 +3999,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -4065,10 +4065,10 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kzqmXN: "x5lhr3w",
-              kZKoxP: "x16ye13r",
-              kogj98: "xb9ncqk",
-              kmVPX3: "x1fozly0",
+              w: "x5lhr3w",
+              h: "x16ye13r",
+              m: "xb9ncqk",
+              p: "x1fozly0",
               "$$css": true
             };
             export const styles = {
@@ -4165,8 +4165,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kSiTet: "xb4nw82",
-              k3aq6I: "xsqj5wx",
+              op: "xb4nw82",
+              tf: "xsqj5wx",
               "$$css": true
             };
             export const styles = {
@@ -4229,8 +4229,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -4293,8 +4293,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xrkmrrc",
-              kMwMTN: "x1mqxbix",
+              bg: "xrkmrrc",
+              c: "x1mqxbix",
               "$$css": true
             };
             export const styles = {
@@ -4338,8 +4338,8 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -4402,12 +4402,12 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kWkggS: "xl8spv7",
+              bg: "xl8spv7",
               "$$css": true
             };
             export const styles = {
               root: (color, isDark) => [_temp, {
-                kMwMTN: (isDark ? color : 'black') != null ? "x14rh7hd" : isDark ? color : 'black',
+                c: (isDark ? color : 'black') != null ? "x14rh7hd" : isDark ? color : 'black',
                 $$css: true
               }, {
                 "--x-backgroundColor": (isDark ? 'black' : 'white') != null ? isDark ? 'black' : 'white' : undefined,
@@ -4470,10 +4470,10 @@ describe('@stylexjs/babel-plugin', () => {
           expect(code).toMatchInlineSnapshot(`
             "import * as stylex from '@stylexjs/stylex';
             const _temp = {
-              kzqmXN: "x5lhr3w",
-              kZKoxP: "x16ye13r",
-              kWkggS: "xl8spv7",
-              kMwMTN: "x14rh7hd",
+              w: "x5lhr3w",
+              h: "x16ye13r",
+              bg: "xl8spv7",
+              c: "x14rh7hd",
               "$$css": true
             };
             export const styles = {
@@ -4577,8 +4577,8 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: color => [{
-                kWkggS: color != null ? "x1j2k28p" : color,
-                kMwMTN: color != null ? "x1qvlgnj" : color,
+                bg: color != null ? "x1j2k28p" : color,
+                c: color != null ? "x1qvlgnj" : color,
                 $$css: true
               }, {
                 "--x-1e2mv7m": color != null ? color : undefined,
@@ -4644,7 +4644,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: (hover, active, focus) => [{
-                kMwMTN: (hover != null ? "x1qvlgnj " : hover) + (active != null ? "xx746rz " : active) + (focus != null ? "x152n5rj " : focus) + "x126ychx",
+                c: (hover != null ? "x1qvlgnj " : hover) + (active != null ? "xx746rz " : active) + (focus != null ? "x152n5rj " : focus) + "x126ychx",
                 $$css: true
               }, {
                 "--x-1113oo7": hover != null ? hover : undefined,
@@ -5001,7 +5001,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: (a, b, c) => [{
-                kzqmXN: "x11ymkkh " + "x38mdg9 " + (c != null ? "x1bai16n" : c),
+                w: "x11ymkkh " + "x38mdg9 " + (c != null ? "x1bai16n" : c),
                 $$css: true
               }, {
                 "--x-1xmrurk": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)('color-mix(' + color + ', blue)'),
@@ -5083,7 +5083,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: (a, b, c) => [{
-                kMwMTN: (a != null ? "x3d248p " : a) + (b != null ? "x1iuwwch " : b) + (c != null ? "x5268pl" : c),
+                c: (a != null ? "x3d248p " : a) + (b != null ? "x1iuwwch " : b) + (c != null ? "x5268pl" : c),
                 $$css: true
               }, {
                 "--x-4xs81a": a != null ? a : undefined,
@@ -5167,7 +5167,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: (a, b, c) => [{
-                kGuDYH: (a != null ? "xww4jgc " : a) + (b != null ? "xfqys7t " : b) + (c != null ? "x13w7uki" : c),
+                fs: (a != null ? "xww4jgc " : a) + (b != null ? "xfqys7t " : b) + (c != null ? "x13w7uki" : c),
                 $$css: true
               }, {
                 "--x-19zvkyr": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(a),
@@ -5250,7 +5250,7 @@ describe('@stylexjs/babel-plugin', () => {
             "import * as stylex from '@stylexjs/stylex';
             export const styles = {
               root: (a, b, c) => [{
-                kGuDYH: ((a ? '16px' : undefined) != null ? "xww4jgc " : a ? '16px' : undefined) + ((b ? '18px' : undefined) != null ? "xqdov8i " : b ? '18px' : undefined) + ((c ? '20px' : undefined) != null ? "x1j86d60" : c ? '20px' : undefined),
+                fs: ((a ? '16px' : undefined) != null ? "xww4jgc " : a ? '16px' : undefined) + ((b ? '18px' : undefined) != null ? "xqdov8i " : b ? '18px' : undefined) + ((c ? '20px' : undefined) != null ? "x1j86d60" : c ? '20px' : undefined),
                 $$css: true
               }, {
                 "--x-19zvkyr": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(a ? '16px' : undefined),
@@ -5345,15 +5345,15 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             "1": {
-              "fontSize-kGuDYH": "xrv4cvt",
+              "fontSize-fs": "xrv4cvt",
               $$css: "components/Foo.react.js:10"
             },
             foo: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "components/Foo.react.js:4"
             },
             "bar-baz": {
-              "display-k1xSpc": "x1lliihq",
+              "display-d": "x1lliihq",
               $$css: "components/Foo.react.js:7"
             }
           };"
@@ -5416,15 +5416,15 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             "1": {
-              "fontSize-kGuDYH": "xrv4cvt",
+              "fontSize-fs": "xrv4cvt",
               $$css: "npm-package:components/Foo.react.js:10"
             },
             foo: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "npm-package:components/Foo.react.js:4"
             },
             "bar-baz": {
-              "display-k1xSpc": "x1lliihq",
+              "display-d": "x1lliihq",
               $$css: "npm-package:components/Foo.react.js:7"
             }
           };"
@@ -5488,15 +5488,15 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             "1": {
-              "fontSize-kGuDYH": "xrv4cvt",
+              "fontSize-fs": "xrv4cvt",
               $$css: "Foo.react.js:10"
             },
             foo: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "Foo.react.js:4"
             },
             "bar-baz": {
-              "display-k1xSpc": "x1lliihq",
+              "display-d": "x1lliihq",
               $$css: "Foo.react.js:7"
             }
           };"
@@ -5560,15 +5560,15 @@ describe('@stylexjs/babel-plugin', () => {
           "import * as stylex from '@stylexjs/stylex';
           export const styles = {
             "1": {
-              "fontSize-kGuDYH": "xrv4cvt",
+              "fontSize-fs": "xrv4cvt",
               $$css: "npm-package:components/Foo.react.js:10"
             },
             foo: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "npm-package:components/Foo.react.js:4"
             },
             "bar-baz": {
-              "display-k1xSpc": "x1lliihq",
+              "display-d": "x1lliihq",
               $$css: "npm-package:components/Foo.react.js:7"
             }
           };"
@@ -5988,8 +5988,8 @@ describe('@stylexjs/babel-plugin', () => {
           var _inject2 = _inject;
           import stylex from 'stylex';
           const _temp = {
-            kWkggS: "xrkmrrc",
-            keoZOQ: "x1gkbulp",
+            bg: "xrkmrrc",
+            mt: "x1gkbulp",
             "$$css": true
           };
           _inject2({
@@ -6038,9 +6038,9 @@ describe('@stylexjs/babel-plugin', () => {
           });
           export const styles = {
             default: margin => [_temp, {
-              k71WvV: (margin != null ? "x17e2bsb " : margin) + "xtcj1g9",
-              k1K539: (margin != null ? "xg6eqc8 " : margin) + "xgrn1a3",
-              keTefX: (margin != null ? "x19ja4a5 " : margin) + "x2tye95",
+              me: (margin != null ? "x17e2bsb " : margin) + "xtcj1g9",
+              mb: (margin != null ? "xg6eqc8 " : margin) + "xgrn1a3",
+              ms: (margin != null ? "x19ja4a5 " : margin) + "x2tye95",
               $$css: true
             }, {
               "--x-14mfytm": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(margin),
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js
index 49aa8595b..2addd2971 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js
@@ -357,7 +357,7 @@ describe('@stylexjs/babel-plugin', () => {
         import { colors } from './constants.stylex';
         export const styles = {
           root: {
-            kWkggS: "xw8d3ix",
+            bg: "xw8d3ix",
             $$css: true
           }
         };"
@@ -399,7 +399,7 @@ describe('@stylexjs/babel-plugin', () => {
         import { breakpoints } from './constants.stylex';
         export const styles = {
           root: {
-            kMwMTN: "x1e2nbdu xbs0o1n",
+            c: "x1e2nbdu xbs0o1n",
             $$css: true
           }
         };"
@@ -538,12 +538,12 @@ describe('@stylexjs/babel-plugin', () => {
         "import * as stylex from '@stylexjs/stylex';
         import { colors } from './constants.stylex';
         const _temp = {
-          kMwMTN: "xy1iwrb",
+          c: "xy1iwrb",
           "$$css": true
         };
         export const styles = {
           node: padding => [_temp, {
-            kmVPX3: padding != null ? "x1fozly0" : padding,
+            p: padding != null ? "x1fozly0" : padding,
             $$css: true
           }, {
             "--x-padding": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(padding)
@@ -603,7 +603,7 @@ describe('@stylexjs/babel-plugin', () => {
         import { breakpoints } from './constants.stylex';
         export const styles = {
           node: color => [{
-            kMwMTN: "xbs0o1n " + (color != null ? "x3d248p" : color),
+            c: "xbs0o1n " + (color != null ? "x3d248p" : color),
             $$css: true
           }, {
             "--x-4xs81a": color != null ? color : undefined
@@ -664,7 +664,7 @@ describe('@stylexjs/babel-plugin', () => {
         import { breakpoints } from './constants.stylex';
         export const styles = {
           root: {
-            kMwMTN: "x1e2nbdu xbs0o1n x1ru35j7",
+            c: "x1e2nbdu xbs0o1n x1ru35j7",
             $$css: true
           }
         };"
@@ -725,7 +725,7 @@ describe('@stylexjs/babel-plugin', () => {
         import { breakpoints, colors } from './constants.stylex';
         export const styles = {
           root: {
-            kMwMTN: "x1mqxbix x1iobwbz xrf68et",
+            c: "x1mqxbix x1iobwbz xrf68et",
             $$css: true
           }
         };"
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-keyframes-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-keyframes-test.js
index 00435354f..9c1a9a57d 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-keyframes-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-keyframes-test.js
@@ -121,7 +121,7 @@ describe('@stylexjs/babel-plugin', () => {
         const name = "x2up61p-B";
         export const styles = {
           root: {
-            kKVMdj: "xx2qnu0",
+            am: "xx2qnu0",
             $$css: true
           }
         };"
@@ -172,7 +172,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import * as stylex from '@stylexjs/stylex';
         export const styles = {
           root: {
-            kKVMdj: "xx2qnu0",
+            am: "xx2qnu0",
             $$css: true
           }
         };"
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
index c0136ac11..e29d61b8e 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
@@ -539,11 +539,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             red: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "npm-package:js/node_modules/npm-package/dist/components/Foo.react.js:4"
             },
             opacity: opacity => [{
-              "opacity-kSiTet": opacity != null ? "xb4nw82" : opacity,
+              "opacity-op": opacity != null ? "xb4nw82" : opacity,
               $$css: "npm-package:js/node_modules/npm-package/dist/components/Foo.react.js:7"
             }, {
               "--x-opacity": opacity != null ? opacity : undefined
@@ -587,7 +587,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             red: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "npm-package:js/node_modules/npm-package/dist/components/Foo.react.js:4"
             }
           };
@@ -805,7 +805,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             color: c => [{
-              kMwMTN: c != null ? "x14rh7hd" : c,
+              c: c != null ? "x14rh7hd" : c,
               $$css: true
             }, {
               "--x-color": c != null ? c : undefined
@@ -828,7 +828,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const _temp = {
             color: _v => [{
-              "kMwMTN": _v != null ? "x14rh7hd" : _v,
+              "c": _v != null ? "x14rh7hd" : _v,
               "$$css": true
             }, {
               "--x-color": _v != null ? _v : undefined
@@ -863,14 +863,14 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const _temp = {
             color: _v => [{
-              "kMwMTN": _v != null ? "x14rh7hd" : _v,
+              "c": _v != null ? "x14rh7hd" : _v,
               "$$css": true
             }, {
               "--x-color": _v != null ? _v : undefined
             }]
           };
           const _temp2 = {
-            k1xSpc: "x78zum5",
+            d: "x78zum5",
             $$css: true
           };
           stylex.props(_temp2, _temp.color(color));"
@@ -901,7 +901,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             opacity: o => [{
-              kSiTet: o != null ? "xb4nw82" : o,
+              op: o != null ? "xb4nw82" : o,
               $$css: true
             }, {
               "--x-opacity": o != null ? o : undefined
@@ -912,7 +912,7 @@ describe('@stylexjs/babel-plugin', () => {
             priority: 3000
           });
           const _temp = {
-            k1xSpc: "x78zum5",
+            d: "x78zum5",
             $$css: true
           };
           stylex.props(_temp, styles.opacity(0.5));"
@@ -943,7 +943,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             opacity: o => [{
-              kSiTet: o != null ? "xb4nw82" : o,
+              op: o != null ? "xb4nw82" : o,
               $$css: true
             }, {
               "--x-opacity": o != null ? o : undefined
@@ -959,7 +959,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const _temp = {
             color: _v => [{
-              "kMwMTN": _v != null ? "x14rh7hd" : _v,
+              "c": _v != null ? "x14rh7hd" : _v,
               "$$css": true
             }, {
               "--x-color": _v != null ? _v : undefined
@@ -1084,7 +1084,7 @@ describe('@stylexjs/babel-plugin', () => {
             });
             const _temp = {
               color: _v => [{
-                "kMwMTN": _v != null ? "x14rh7hd" : _v,
+                "c": _v != null ? "x14rh7hd" : _v,
                 "$$css": true
               }, {
                 "--x-color": _v != null ? _v : undefined
@@ -1100,7 +1100,7 @@ describe('@stylexjs/babel-plugin', () => {
             });
             const _temp2 = {
               backgroundColor: _v => [{
-                "kWkggS": _v != null ? "xl8spv7" : _v,
+                "bg": _v != null ? "xl8spv7" : _v,
                 "$$css": true
               }, {
                 "--x-backgroundColor": _v != null ? _v : undefined
@@ -1130,7 +1130,7 @@ describe('@stylexjs/babel-plugin', () => {
               priority: 3000
             });
             const _temp = {
-              kMwMTN: "xju2f9n",
+              c: "xju2f9n",
               $$css: true
             };
             stylex.props(_temp, externalStyles.root);"
@@ -1172,18 +1172,18 @@ describe('@stylexjs/babel-plugin', () => {
             });
             const _temp = {
               color: _v => [{
-                "kMwMTN": _v != null ? "x14rh7hd" : _v,
+                "c": _v != null ? "x14rh7hd" : _v,
                 "$$css": true
               }, {
                 "--x-color": _v != null ? _v : undefined
               }]
             };
             const _temp2 = {
-              kmVPX3: "xe8ttls",
+              p: "xe8ttls",
               $$css: true
             };
             const _temp3 = {
-              kaIpWk: "x12oqio5",
+              br: "x12oqio5",
               $$css: true
             };
             function Button({
@@ -1213,7 +1213,7 @@ describe('@stylexjs/babel-plugin', () => {
               priority: 3000
             });
             const _temp = {
-              k1xSpc: "x78zum5",
+              d: "x78zum5",
               $$css: true
             };
             function Component({
@@ -1282,14 +1282,14 @@ describe('@stylexjs/babel-plugin', () => {
             });
             const _temp = {
               color: _v => [{
-                "kMwMTN": _v != null ? "x14rh7hd" : _v,
+                "c": _v != null ? "x14rh7hd" : _v,
                 "$$css": true
               }, {
                 "--x-color": _v != null ? _v : undefined
               }]
             };
             const _temp2 = {
-              k1xSpc: "x78zum5",
+              d: "x78zum5",
               $$css: true
             };
             function Component(color) {
@@ -1578,11 +1578,11 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           foo: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           },
           bar: {
-            kWkggS: "x1t391ir",
+            bg: "x1t391ir",
             $$css: true
           }
         };
@@ -1674,7 +1674,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         export const styles = {
           foo: {
-            kmVPX3: "x14odnwx",
+            p: "x14odnwx",
             $$css: true
           }
         };
@@ -1734,15 +1734,15 @@ describe('@stylexjs/babel-plugin', () => {
         });
         export const styles = {
           default: {
-            k1K539: "x1fqp7bg",
-            k71WvV: "x1sa5p1d",
-            keTefX: "xqsn43r",
-            keoZOQ: "x1ok221b",
+            mb: "x1fqp7bg",
+            me: "x1sa5p1d",
+            ms: "xqsn43r",
+            mt: "x1ok221b",
             $$css: true
           },
           override: {
-            kogj98: "x1ghz6dp",
-            k1K539: "xiv7p99",
+            m: "x1ghz6dp",
+            mb: "xiv7p99",
             $$css: true
           }
         };
@@ -2039,11 +2039,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             default: {
-              kWkggS: "xrkmrrc",
+              bg: "xrkmrrc",
               $$css: true
             },
             active: {
-              kMwMTN: "xju2f9n",
+              c: "xju2f9n",
               $$css: true
             }
           };
@@ -2269,11 +2269,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             red: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             },
             blue: {
-              kMwMTN: "xju2f9n",
+              c: "xju2f9n",
               $$css: true
             }
           };
@@ -2341,11 +2341,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             red: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             },
             blue: {
-              kMwMTN: null,
+              c: null,
               $$css: true
             }
           };
@@ -2418,7 +2418,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             default: {
-              "color-kMwMTN": "x1e2nbdu",
+              "color-c": "x1e2nbdu",
               $$css: "html/js/FooBar.react.js:4"
             }
           };
@@ -2428,7 +2428,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const otherStyles = {
             default: {
-              "backgroundColor-kWkggS": "x1t391ir",
+              "backgroundColor-bg": "x1t391ir",
               $$css: "html/js/FooBar.react.js:9"
             }
           };
@@ -2556,11 +2556,11 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           "0": {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           },
           "1": {
-            kWkggS: "x1t391ir",
+            bg: "x1t391ir",
             $$css: true
           }
         };
@@ -2589,7 +2589,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           default: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           }
         };
@@ -2668,11 +2668,11 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             "0": {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             },
             "1": {
-              kWkggS: "x1t391ir",
+              bg: "x1t391ir",
               $$css: true
             }
           };"
@@ -2726,7 +2726,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             foo: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             }
           };"
@@ -2755,7 +2755,7 @@ describe('@stylexjs/babel-plugin', () => {
           });
           const styles = {
             default: {
-              kMwMTN: "x1e2nbdu",
+              c: "x1e2nbdu",
               $$css: true
             }
           };"
@@ -2932,31 +2932,31 @@ describe('@stylexjs/babel-plugin', () => {
         });
         export const styles = {
           sidebar: {
-            "boxSizing-kB7OPa": "x9f619",
-            "gridArea-kJuA4N": "x1yc5d2u",
+            "boxSizing-bx": "x9f619",
+            "gridArea-ga": "x1yc5d2u",
             $$css: "@stylexjs/babel-plugin::4"
           },
           content: {
-            "gridArea-kJuA4N": "x1fdo2jl",
+            "gridArea-ga": "x1fdo2jl",
             $$css: "@stylexjs/babel-plugin::8"
           },
           root: {
-            "display-k1xSpc": "xrvj5dj",
-            "gridTemplateRows-k9llMU": "x7k18q3",
-            "gridTemplateAreas-kC13JO": "x5gp9wm",
+            "display-d": "xrvj5dj",
+            "gridTemplateRows-gtr": "x7k18q3",
+            "gridTemplateAreas-gta": "x5gp9wm",
             $$css: "@stylexjs/babel-plugin::11"
           },
           withSidebar: {
-            "gridTemplateColumns-kumcoG": "x1rkzygb",
-            "gridTemplateRows-k9llMU": "x7k18q3",
-            "gridTemplateAreas-kC13JO": "x17lh93j",
+            "gridTemplateColumns-gtc": "x1rkzygb",
+            "gridTemplateRows-gtr": "x7k18q3",
+            "gridTemplateAreas-gta": "x17lh93j",
             "@media (max-width: 640px)_gridTemplateRows-k9pwkU": "xmr4b4k",
             "@media (max-width: 640px)_gridTemplateAreas-kOnEH4": "xesbpuc",
             "@media (max-width: 640px)_gridTemplateColumns-k1JLwA": "x15nfgh4",
             $$css: "@stylexjs/babel-plugin::16"
           },
           noSidebar: {
-            "gridTemplateColumns-kumcoG": "x1mkdm3x",
+            "gridTemplateColumns-gtc": "x1mkdm3x",
             $$css: "@stylexjs/babel-plugin::26"
           }
         };
@@ -3419,7 +3419,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const _styles = {
           div: {
-            kMwMTN: "x1e2nbdu",
+            c: "x1e2nbdu",
             $$css: true
           }
         };
@@ -3433,7 +3433,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const _styles2 = {
           div: {
-            kMwMTN: "xju2f9n",
+            c: "xju2f9n",
             $$css: true
           }
         };
@@ -3572,7 +3572,7 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           default: {
-            kMwMTN: "x1mqxbix",
+            c: "x1mqxbix",
             $$css: true
           }
         };
@@ -3612,8 +3612,8 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           default: {
-            kMwMTN: "x1mqxbix",
-            kWkggS: "x1ptj8da",
+            c: "x1mqxbix",
+            bg: "x1ptj8da",
             $$css: true
           }
         };
@@ -3653,8 +3653,8 @@ describe('@stylexjs/babel-plugin', () => {
         });
         const styles = {
           default: {
-            kMwMTN: "x1mqxbix",
-            kWkggS: "xxtkuhj",
+            c: "x1mqxbix",
+            bg: "xxtkuhj",
             $$css: true
           }
         };
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-when-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-when-test.js
index 3bef185ac..38d3e065f 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-when-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-when-test.js
@@ -56,7 +56,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import { when, create } from '@stylexjs/stylex';
         const styles = {
           container: {
-            kWkggS: "x1t391ir x148kuu",
+            bg: "x1t391ir x148kuu",
             $$css: true
           }
         };
@@ -105,7 +105,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import { when, create } from '@stylexjs/stylex';
         const styles = {
           container: {
-            kWkggS: "x1t391ir x1i6rnlt",
+            bg: "x1t391ir x1i6rnlt",
             $$css: true
           }
         };
@@ -158,7 +158,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import * as stylex from '@stylexjs/stylex';
         const styles = {
           container: {
-            kWkggS: "x1t391ir x148kuu xpijypl xoev4mv x1v1vkh3 x9zntq3",
+            bg: "x1t391ir x148kuu xpijypl xoev4mv x1v1vkh3 x9zntq3",
             $$css: true
           }
         };
@@ -240,7 +240,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import { when as w, create } from '@stylexjs/stylex';
         const styles = {
           container: {
-            kWkggS: "x1t391ir x148kuu xpijypl",
+            bg: "x1t391ir x148kuu xpijypl",
             $$css: true
           }
         };
@@ -369,7 +369,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import { when, create } from '@stylexjs/stylex';
         const styles = {
           container: {
-            kWkggS: "x1t391ir x11omtej",
+            bg: "x1t391ir x11omtej",
             $$css: true
           }
         };
@@ -418,7 +418,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import { when, create } from '@stylexjs/stylex';
         const styles = {
           container: {
-            kWkggS: "x1t391ir x1doj7mj",
+            bg: "x1t391ir x1doj7mj",
             $$css: true
           }
         };
diff --git a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js
index 9748d0d56..bc9944941 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js
@@ -468,7 +468,7 @@ describe('@stylexjs/babel-plugin', () => {
           };
           export const styles = {
             root: {
-              kWkggS: "xrkmrrc",
+              bg: "xrkmrrc",
               $$css: true
             }
           };"
diff --git a/packages/@stylexjs/babel-plugin/src/shared/__tests__/property-shorthands-test.js b/packages/@stylexjs/babel-plugin/src/shared/__tests__/property-shorthands-test.js
new file mode 100644
index 000000000..4976fd880
--- /dev/null
+++ b/packages/@stylexjs/babel-plugin/src/shared/__tests__/property-shorthands-test.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import getCompressedKey, { propertyShorthands } from '../property-shorthands';
+
+describe('property shorthands', () => {
+  test('uses readable shorthands for common properties', () => {
+    expect(getCompressedKey('margin')).toBe('m');
+    expect(getCompressedKey('marginTop')).toBe('mt');
+    expect(getCompressedKey('marginInlineStart')).toBe('ms');
+    expect(getCompressedKey('paddingTop')).toBe('pt');
+    expect(getCompressedKey('display')).toBe('d');
+    expect(getCompressedKey('position')).toBe('po');
+  });
+
+  test('falls back to hashing uncommon properties and conditional keys', () => {
+    expect(getCompressedKey('animationTimeline')).toMatch(/^k[0-9A-Za-z]+$/);
+    expect(getCompressedKey(':hover_margin')).toMatch(/^k[0-9A-Za-z]+$/);
+  });
+
+  test('contains only unique shorthands of three characters or fewer', () => {
+    const shorthands = Object.values(propertyShorthands);
+
+    expect(new Set(shorthands).size).toBe(shorthands.length);
+    expect(shorthands.every((key) => /^[a-z]{1,3}$/.test(key))).toBe(true);
+  });
+});
diff --git a/packages/@stylexjs/babel-plugin/src/shared/property-shorthands.js b/packages/@stylexjs/babel-plugin/src/shared/property-shorthands.js
new file mode 100644
index 000000000..a4325a38b
--- /dev/null
+++ b/packages/@stylexjs/babel-plugin/src/shared/property-shorthands.js
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import { createShortHash } from './hash';
+
+/**
+ * Short, human-readable names for common CSS properties.
+ *
+ * Keep every shorthand unique and at most three characters long. Properties
+ * that do not have an obvious shorthand within that limit intentionally fall
+ * back to a hash in `getCompressedKey`.
+ */
+export const propertyShorthands: $ReadOnly<{ [string]: string }> =
+  Object.freeze({
+    accentColor: 'acc',
+    alignContent: 'ac',
+    alignItems: 'ai',
+    alignSelf: 'as',
+    animation: 'an',
+    animationDelay: 'ad',
+    animationDirection: 'adr',
+    animationDuration: 'adu',
+    animationFillMode: 'afm',
+    animationIterationCount: 'aic',
+    animationName: 'am',
+    animationPlayState: 'aps',
+    animationTimingFunction: 'atf',
+    appearance: 'ap',
+    aspectRatio: 'ar',
+    backdropFilter: 'bdf',
+    background: 'bkg',
+    backgroundAttachment: 'bga',
+    backgroundBlendMode: 'bbm',
+    backgroundClip: 'bgc',
+    backgroundColor: 'bg',
+    backgroundImage: 'bgi',
+    backgroundOrigin: 'bgo',
+    backgroundPosition: 'bgp',
+    backgroundRepeat: 'bgr',
+    backgroundSize: 'bgs',
+    border: 'bd',
+    borderBlockColor: 'bkc',
+    borderBlockStyle: 'bks',
+    borderBlockWidth: 'bkw',
+    borderBottom: 'bb',
+    borderBottomColor: 'bbc',
+    borderBottomLeftRadius: 'blr',
+    borderBottomRightRadius: 'brr',
+    borderBottomStyle: 'bbs',
+    borderBottomWidth: 'bbw',
+    borderColor: 'bc',
+    borderEndEndRadius: 'eer',
+    borderEndStartRadius: 'esr',
+    borderInlineColor: 'bic',
+    borderInlineEndColor: 'iec',
+    borderInlineEndStyle: 'ies',
+    borderInlineEndWidth: 'iew',
+    borderInlineStartColor: 'isc',
+    borderInlineStartStyle: 'iss',
+    borderInlineStartWidth: 'isw',
+    borderInlineStyle: 'bis',
+    borderInlineWidth: 'biw',
+    borderLeftColor: 'blc',
+    borderLeftStyle: 'bls',
+    borderLeftWidth: 'blw',
+    borderRadius: 'br',
+    borderRightColor: 'brc',
+    borderRightStyle: 'brs',
+    borderRightWidth: 'brw',
+    borderStartEndRadius: 'ser',
+    borderStartStartRadius: 'ssr',
+    borderStyle: 'bds',
+    borderTopColor: 'btc',
+    borderTopLeftRadius: 'tlr',
+    borderTopRightRadius: 'trr',
+    borderTopStyle: 'bts',
+    borderTopWidth: 'btw',
+    borderWidth: 'bw',
+    bottom: 'b',
+    boxShadow: 'sh',
+    boxSizing: 'bx',
+    clear: 'cl',
+    clipPath: 'cp',
+    color: 'c',
+    columnGap: 'cg',
+    content: 'ct',
+    cursor: 'cur',
+    display: 'd',
+    fill: 'fi',
+    filter: 'fil',
+    flex: 'f',
+    flexBasis: 'fb',
+    flexDirection: 'fd',
+    flexFlow: 'fxf',
+    flexGrow: 'fg',
+    flexShrink: 'fsh',
+    flexWrap: 'fwr',
+    float: 'fl',
+    font: 'fn',
+    fontFamily: 'ff',
+    fontSize: 'fs',
+    fontStyle: 'fst',
+    fontWeight: 'fw',
+    gap: 'g',
+    grid: 'gr',
+    gridArea: 'ga',
+    gridAutoColumns: 'gac',
+    gridAutoFlow: 'gaf',
+    gridAutoRows: 'gar',
+    gridColumn: 'gc',
+    gridColumnEnd: 'gce',
+    gridColumnStart: 'gcs',
+    gridRow: 'grw',
+    gridRowEnd: 'gre',
+    gridRowStart: 'grs',
+    gridTemplate: 'gt',
+    gridTemplateAreas: 'gta',
+    gridTemplateColumns: 'gtc',
+    gridTemplateRows: 'gtr',
+    height: 'h',
+    inset: 'i',
+    insetBlock: 'ib',
+    insetBlockEnd: 'ibe',
+    insetBlockStart: 'ibs',
+    insetInline: 'ii',
+    insetInlineEnd: 'iie',
+    insetInlineStart: 'iis',
+    justifyContent: 'jc',
+    justifyItems: 'ji',
+    justifySelf: 'js',
+    left: 'l',
+    letterSpacing: 'ls',
+    lineHeight: 'lh',
+    listStyleType: 'lst',
+    margin: 'm',
+    marginBlock: 'mbk',
+    marginBlockEnd: 'mbe',
+    marginBlockStart: 'mbs',
+    marginBottom: 'mb',
+    marginInline: 'mi',
+    marginInlineEnd: 'me',
+    marginInlineStart: 'ms',
+    marginLeft: 'ml',
+    marginRight: 'mr',
+    marginTop: 'mt',
+    maxHeight: 'mah',
+    maxWidth: 'maw',
+    minHeight: 'mih',
+    minWidth: 'miw',
+    mixBlendMode: 'mbm',
+    objectFit: 'of',
+    objectPosition: 'obj',
+    opacity: 'op',
+    order: 'ord',
+    outline: 'ol',
+    outlineColor: 'olc',
+    outlineOffset: 'olo',
+    outlineStyle: 'ols',
+    outlineWidth: 'olw',
+    overflow: 'ov',
+    overflowWrap: 'ow',
+    overflowX: 'ox',
+    overflowY: 'oy',
+    padding: 'p',
+    paddingBlock: 'pbk',
+    paddingBlockEnd: 'pbe',
+    paddingBlockStart: 'pbs',
+    paddingBottom: 'pb',
+    paddingInline: 'pi',
+    paddingInlineEnd: 'pe',
+    paddingInlineStart: 'ps',
+    paddingLeft: 'pl',
+    paddingRight: 'pr',
+    paddingTop: 'pt',
+    placeContent: 'pc',
+    placeItems: 'pai',
+    placeSelf: 'pls',
+    pointerEvents: 'ptr',
+    position: 'po',
+    resize: 'rz',
+    right: 'r',
+    rotate: 'ro',
+    rowGap: 'rg',
+    scale: 'sc',
+    stroke: 'st',
+    strokeWidth: 'sw',
+    textAlign: 'ta',
+    textDecoration: 'td',
+    textIndent: 'ti',
+    textOverflow: 'to',
+    textShadow: 'ts',
+    textTransform: 'tt',
+    top: 't',
+    transform: 'tf',
+    transformOrigin: 'tfo',
+    transition: 'tr',
+    transitionDelay: 'tde',
+    transitionDuration: 'tdu',
+    transitionProperty: 'tp',
+    transitionTimingFunction: 'ttf',
+    userSelect: 'us',
+    verticalAlign: 'va',
+    visibility: 'v',
+    whiteSpace: 'ws',
+    width: 'w',
+    willChange: 'wc',
+    wordBreak: 'wb',
+    wordSpacing: 'wsp',
+    zIndex: 'z',
+  });
+
+export default function getCompressedKey(key: string): string {
+  return propertyShorthands[key] ?? `k${createShortHash('<>' + key)}`;
+}
diff --git a/packages/@stylexjs/babel-plugin/src/shared/stylex-create.js b/packages/@stylexjs/babel-plugin/src/shared/stylex-create.js
index 54f48beb5..ee339c1a7 100644
--- a/packages/@stylexjs/babel-plugin/src/shared/stylex-create.js
+++ b/packages/@stylexjs/babel-plugin/src/shared/stylex-create.js
@@ -15,9 +15,9 @@ import type {
 } from './common-types';
 import type { ComputedStyle, IPreRule } from './preprocess-rules/PreRule';
 
-import { createShortHash } from './hash';
 import { defaultOptions } from './utils/default-options';
 import { flattenRawStyleObject } from './preprocess-rules/flatten-raw-style-obj';
+import getCompressedKey from './property-shorthands';
 import { validateNamespace } from './preprocess-rules/basic-validation';
 
 type TPropTuple = [+key: string, +styles: $ReadOnlyArray<ComputedStyle>];
@@ -77,9 +77,9 @@ export default function styleXCreateSet(
       flattenedNamespace.map(([key, value]) => {
         // Skip variables-as-keys to avoid regression to dynamic styles output
         if (options.enableMinifiedKeys === true && !key.startsWith('--')) {
-          const hashedKey = createShortHash('<>' + key);
+          const compressedKey = getCompressedKey(key);
           const displayKey =
-            options.debug === true ? `${key}-k${hashedKey}` : `k${hashedKey}`;
+            options.debug === true ? `${key}-${compressedKey}` : compressedKey;
           return [displayKey, value.compiled(options)];
         } else {
           return [key, value.compiled(options)];
diff --git a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/components/button.js b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/components/button.js
index ce36586c5..bcb053cdd 100644
--- a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/components/button.js
+++ b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/components/button.js
@@ -14,12 +14,12 @@ import "../stylex_bundle.css";
 const fadeAnimation = "xgnty7z-B";
 const styles = {
   foo: {
-    kKVMdj: "xeuoslp",
-    kWkggS: "x1gykpug",
-    k1xSpc: "x78zum5",
-    kZKoxP: "x1egiwwb",
-    keoZOQ: "xlrshdv",
-    keTefX: "x1hm9lzh",
+    am: "xeuoslp",
+    bg: "x1gykpug",
+    d: "x78zum5",
+    h: "x1egiwwb",
+    mt: "xlrshdv",
+    ms: "x1hm9lzh",
     $$css: true
   }
 };
diff --git a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/index.js b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/index.js
index 2817f216c..1498c88ab 100644
--- a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/index.js
+++ b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/index.js
@@ -14,12 +14,12 @@ import "./stylex_bundle.css";
 const fadeAnimation = "xgnty7z-B";
 const styles = {
   foo: {
-    kKVMdj: "xeuoslp",
-    kWkggS: "x1gykpug",
-    k1xSpc: "x78zum5",
-    kZKoxP: "x1egiwwb",
-    keoZOQ: "xlrshdv",
-    keTefX: "x1hm9lzh",
+    am: "xeuoslp",
+    bg: "x1gykpug",
+    d: "x78zum5",
+    h: "x1egiwwb",
+    mt: "xlrshdv",
+    ms: "x1hm9lzh",
     $$css: true
   }
 };
diff --git a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/pages/home.js b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/pages/home.js
index 53270cfc0..e354f9f35 100644
--- a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/pages/home.js
+++ b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot/pages/home.js
@@ -14,12 +14,12 @@ import "../stylex_bundle.css";
 const fadeAnimation = "xgnty7z-B";
 const styles = {
   foo: {
-    kKVMdj: "xeuoslp",
-    kWkggS: "x1gykpug",
-    k1xSpc: "x78zum5",
-    kZKoxP: "x1egiwwb",
-    keoZOQ: "xlrshdv",
-    keTefX: "x1hm9lzh",
+    am: "xeuoslp",
+    bg: "x1gykpug",
+    d: "x78zum5",
+    h: "x1egiwwb",
+    mt: "xlrshdv",
+    ms: "x1hm9lzh",
     $$css: true
   }
 };
diff --git a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/components/button.js b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/components/button.js
index 910bdbeca..b0c26698a 100644
--- a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/components/button.js
+++ b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/components/button.js
@@ -14,12 +14,12 @@ import "../../src/stylex_bundle.css";
 const fadeAnimation = "xgnty7z-B";
 const styles = {
   foo: {
-    kKVMdj: "xeuoslp",
-    kWkggS: "x1gykpug",
-    k1xSpc: "x78zum5",
-    kZKoxP: "x1egiwwb",
-    keoZOQ: "xlrshdv",
-    keTefX: "x1hm9lzh",
+    am: "xeuoslp",
+    bg: "x1gykpug",
+    d: "x78zum5",
+    h: "x1egiwwb",
+    mt: "xlrshdv",
+    ms: "x1hm9lzh",
     $$css: true
   }
 };
diff --git a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/index.js b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/index.js
index c501b9939..9e91c83de 100644
--- a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/index.js
+++ b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/index.js
@@ -14,12 +14,12 @@ import "../src/stylex_bundle.css";
 const fadeAnimation = "xgnty7z-B";
 const styles = {
   foo: {
-    kKVMdj: "xeuoslp",
-    kWkggS: "x1gykpug",
-    k1xSpc: "x78zum5",
-    kZKoxP: "x1egiwwb",
-    keoZOQ: "xlrshdv",
-    keTefX: "x1hm9lzh",
+    am: "xeuoslp",
+    bg: "x1gykpug",
+    d: "x78zum5",
+    h: "x1egiwwb",
+    mt: "xlrshdv",
+    ms: "x1hm9lzh",
     $$css: true
   }
 };
diff --git a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/pages/home.js b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/pages/home.js
index 4d8bc7028..4b628ede7 100644
--- a/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/pages/home.js
+++ b/packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/pages/home.js
@@ -14,12 +14,12 @@ import "../../src/stylex_bundle.css";
 const fadeAnimation = "xgnty7z-B";
 const styles = {
   foo: {
-    kKVMdj: "xeuoslp",
-    kWkggS: "x1gykpug",
-    k1xSpc: "x78zum5",
-    kZKoxP: "x1egiwwb",
-    keoZOQ: "xlrshdv",
-    keTefX: "x1hm9lzh",
+    am: "xeuoslp",
+    bg: "x1gykpug",
+    d: "x78zum5",
+    h: "x1egiwwb",
+    mt: "xlrshdv",
+    ms: "x1hm9lzh",
     $$css: true
   }
 };
diff --git a/packages/@stylexjs/rollup-plugin/__tests__/index-test.js b/packages/@stylexjs/rollup-plugin/__tests__/index-test.js
index 9d66f4a4b..be34835b6 100644
--- a/packages/@stylexjs/rollup-plugin/__tests__/index-test.js
+++ b/packages/@stylexjs/rollup-plugin/__tests__/index-test.js
@@ -138,8 +138,8 @@ describe('rollup-plugin-stylex', () => {
 
       var styles$2 = {
         bar: {
-          k1xSpc: "x1lliihq",
-          kzqmXN: "xh8yej3",
+          d: "x1lliihq",
+          w: "xh8yej3",
           $$css: true
         }
       };
@@ -153,9 +153,9 @@ describe('rollup-plugin-stylex', () => {
 
       const styles$1 = {
         baz: {
-          k1xSpc: "xt0psk2",
-          kZKoxP: "x1egiwwb",
-          kzqmXN: "x3hqpx7",
+          d: "xt0psk2",
+          h: "x1egiwwb",
+          w: "x3hqpx7",
           $$css: true
         }
       };
@@ -169,13 +169,13 @@ describe('rollup-plugin-stylex', () => {
 
       var styles = {
         foo: {
-          kKVMdj: "xeuoslp",
-          kWkggS: "x1gykpug",
-          krdFHd: "xu4yf9m",
-          k1xSpc: "x78zum5",
-          kZKoxP: "x1egiwwb",
-          keTefX: "x1hm9lzh",
-          keoZOQ: "xlrshdv",
+          am: "xeuoslp",
+          bg: "x1gykpug",
+          ssr: "xu4yf9m",
+          d: "x78zum5",
+          h: "x1egiwwb",
+          ms: "x1hm9lzh",
+          mt: "xlrshdv",
           $$css: true
         }
       };
@@ -219,8 +219,8 @@ describe('rollup-plugin-stylex', () => {
         });
         var styles$2 = {
           bar: {
-            "display-k1xSpc": "x1lliihq",
-            "width-kzqmXN": "xh8yej3",
+            "display-d": "x1lliihq",
+            "width-w": "xh8yej3",
             $$css: "@stylexjs/rollup-plugin:__tests__/__fixtures__/otherStyles.js:14"
           }
         };
@@ -247,9 +247,9 @@ describe('rollup-plugin-stylex', () => {
         });
         const styles$1 = {
           baz: {
-            "display-k1xSpc": "xt0psk2",
-            "height-kZKoxP": "x1egiwwb",
-            "width-kzqmXN": "x3hqpx7",
+            "display-d": "xt0psk2",
+            "height-h": "x1egiwwb",
+            "width-w": "x3hqpx7",
             $$css: "@stylexjs/rollup-plugin:__tests__/__fixtures__/npmStyles.js:15"
           }
         };
@@ -296,13 +296,13 @@ describe('rollup-plugin-stylex', () => {
         });
         var styles = {
           foo: {
-            "animationName-kKVMdj": "xeuoslp",
-            "backgroundColor-kWkggS": "x1gykpug",
-            "borderStartStartRadius-krdFHd": "xu4yf9m",
-            "display-k1xSpc": "x78zum5",
-            "height-kZKoxP": "x1egiwwb",
-            "marginInlineStart-keTefX": "x1hm9lzh",
-            "marginTop-keoZOQ": "xlrshdv",
+            "animationName-am": "xeuoslp",
+            "backgroundColor-bg": "x1gykpug",
+            "borderStartStartRadius-ssr": "xu4yf9m",
+            "display-d": "x78zum5",
+            "height-h": "x1egiwwb",
+            "marginInlineStart-ms": "x1hm9lzh",
+            "marginTop-mt": "xlrshdv",
             $$css: "@stylexjs/rollup-plugin:__tests__/__fixtures__/index.js:24"
           }
         };