diff --git a/packages/babel-plugin/__tests__/stylex-transform-call-test.js b/packages/babel-plugin/__tests__/stylex-transform-call-test.js
index 8bb1ac3a..bbf9c81c 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-call-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-call-test.js
@@ -793,7 +793,7 @@ describe('@stylexjs/babel-plugin', () => {
                 padding: 5,
                 paddingEnd: 10,
               },
-  
+
               bar: {
                 padding: 2,
                 paddingStart: 10,
@@ -822,7 +822,7 @@ describe('@stylexjs/babel-plugin', () => {
                 padding: 5,
                 paddingEnd: 10,
               },
-  
+
               bar: {
                 padding: 2,
                 paddingStart: null,
@@ -996,8 +996,8 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          "FooBar__styles.default x1e2nbdu";"
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          "FooBar__styles.default color-x1e2nbdu";"
         `);
       });
 
@@ -1029,11 +1029,11 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          _inject2(".x1t391ir{background-color:blue}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          _inject2(".backgroundColor-x1t391ir{background-color:blue}", 3000);
           ({
-            0: "FooBar__styles.default x1e2nbdu",
-            1: "FooBar__styles.default x1e2nbdu FooBar__otherStyles.default x1t391ir"
+            0: "FooBar__styles.default color-x1e2nbdu",
+            1: "FooBar__styles.default color-x1e2nbdu FooBar__otherStyles.default backgroundColor-x1t391ir"
           })[!!isActive << 0];"
         `);
       });
@@ -1065,19 +1065,19 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
           const styles = {
             default: {
               "FooBar__styles.default": "FooBar__styles.default",
-              color: "x1e2nbdu",
+              color: "color-x1e2nbdu",
               $$css: true
             }
           };
-          _inject2(".x1t391ir{background-color:blue}", 3000);
+          _inject2(".backgroundColor-x1t391ir{background-color:blue}", 3000);
           const otherStyles = {
             default: {
               "FooBar__otherStyles.default": "FooBar__otherStyles.default",
-              backgroundColor: "x1t391ir",
+              backgroundColor: "backgroundColor-x1t391ir",
               $$css: true
             }
           };
@@ -1112,11 +1112,11 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          _inject2(".xju2f9n{color:blue}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          _inject2(".color-xju2f9n{color:blue}", 3000);
           ({
-            0: "FooBar__styles.default x1e2nbdu",
-            1: "FooBar__styles.default FooBar__styles.active xju2f9n"
+            0: "FooBar__styles.default color-x1e2nbdu",
+            1: "FooBar__styles.default FooBar__styles.active color-xju2f9n"
           })[!!isActive << 0];"
         `);
       });
@@ -1147,17 +1147,17 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          _inject2(".xju2f9n{color:blue}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          _inject2(".color-xju2f9n{color:blue}", 3000);
           const styles = {
             default: {
               "FooBar__styles.default": "FooBar__styles.default",
-              color: "x1e2nbdu",
+              color: "color-x1e2nbdu",
               $$css: true
             },
             active: {
               "FooBar__styles.active": "FooBar__styles.active",
-              color: "xju2f9n",
+              color: "color-xju2f9n",
               $$css: true
             }
           };
@@ -1296,7 +1296,7 @@ describe('@stylexjs/babel-plugin', () => {
                 ':hover': 'blue',
               },
               backgroundColor: {
-                '@media (min-width: 1000px)': 'blue'  
+                '@media (min-width: 1000px)': 'blue'
               },
             }
           });
@@ -1358,7 +1358,7 @@ describe('@stylexjs/babel-plugin', () => {
         expect(
           transform(`
             import stylex from 'stylex';
-            
+
             function MyComponent() {
               return (
                 <>
@@ -1608,21 +1608,21 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         ({
-          0: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4",
-          1: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
+          0: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4",
+          1: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x"
         })[!!(sidebar == null) << 0];"
       `);
     });
@@ -1669,23 +1669,23 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         export const styles = {
           sidebar: {
             "UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
-            boxSizing: "x9f619",
-            gridArea: "x1yc5d2u",
+            boxSizing: "boxSizing-x9f619",
+            gridArea: "gridArea-x1yc5d2u",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1696,7 +1696,7 @@ describe('@stylexjs/babel-plugin', () => {
           },
           content: {
             "UnknownFile__styles.content": "UnknownFile__styles.content",
-            gridArea: "x1fdo2jl",
+            gridArea: "gridArea-x1fdo2jl",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1707,30 +1707,30 @@ describe('@stylexjs/babel-plugin', () => {
           },
           root: {
             "UnknownFile__styles.root": "UnknownFile__styles.root",
-            display: "xrvj5dj",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x5gp9wm",
+            display: "display-xrvj5dj",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x5gp9wm",
             $$css: true
           },
           withSidebar: {
             "UnknownFile__styles.withSidebar": "UnknownFile__styles.withSidebar",
-            gridTemplateColumns: "x1rkzygb",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x17lh93j",
-            "@media (max-width: 640px)_gridTemplateRows": "xmr4b4k",
-            "@media (max-width: 640px)_gridTemplateAreas": "xesbpuc",
-            "@media (max-width: 640px)_gridTemplateColumns": "x15nfgh4",
+            gridTemplateColumns: "gridTemplateColumns-x1rkzygb",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x17lh93j",
+            "@media (max-width: 640px)_gridTemplateRows": "gridTemplateRows-xmr4b4k",
+            "@media (max-width: 640px)_gridTemplateAreas": "gridTemplateAreas-xesbpuc",
+            "@media (max-width: 640px)_gridTemplateColumns": "gridTemplateColumns-x15nfgh4",
             $$css: true
           },
           noSidebar: {
             "UnknownFile__styles.noSidebar": "UnknownFile__styles.noSidebar",
-            gridTemplateColumns: "x1mkdm3x",
+            gridTemplateColumns: "gridTemplateColumns-x1mkdm3x",
             $$css: true
           }
         };
         ({
-          0: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4",
-          1: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
+          0: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4",
+          1: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x"
         })[!!(sidebar == null) << 0];"
       `);
     });
@@ -1778,23 +1778,23 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         export const styles = {
           sidebar: {
             "UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
-            boxSizing: "x9f619",
-            gridArea: "x1yc5d2u",
+            boxSizing: "boxSizing-x9f619",
+            gridArea: "gridArea-x1yc5d2u",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1805,7 +1805,7 @@ describe('@stylexjs/babel-plugin', () => {
           },
           content: {
             "UnknownFile__styles.content": "UnknownFile__styles.content",
-            gridArea: "x1fdo2jl",
+            gridArea: "gridArea-x1fdo2jl",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1816,24 +1816,24 @@ describe('@stylexjs/babel-plugin', () => {
           },
           root: {
             "UnknownFile__styles.root": "UnknownFile__styles.root",
-            display: "xrvj5dj",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x5gp9wm",
+            display: "display-xrvj5dj",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x5gp9wm",
             $$css: true
           },
           withSidebar: {
             "UnknownFile__styles.withSidebar": "UnknownFile__styles.withSidebar",
-            gridTemplateColumns: "x1rkzygb",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x17lh93j",
-            "@media (max-width: 640px)_gridTemplateRows": "xmr4b4k",
-            "@media (max-width: 640px)_gridTemplateAreas": "xesbpuc",
-            "@media (max-width: 640px)_gridTemplateColumns": "x15nfgh4",
+            gridTemplateColumns: "gridTemplateColumns-x1rkzygb",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x17lh93j",
+            "@media (max-width: 640px)_gridTemplateRows": "gridTemplateRows-xmr4b4k",
+            "@media (max-width: 640px)_gridTemplateAreas": "gridTemplateAreas-xesbpuc",
+            "@media (max-width: 640px)_gridTemplateColumns": "gridTemplateColumns-x15nfgh4",
             $$css: true
           },
           noSidebar: {
             "UnknownFile__styles.noSidebar": "UnknownFile__styles.noSidebar",
-            gridTemplateColumns: "x1mkdm3x",
+            gridTemplateColumns: "gridTemplateColumns-x1mkdm3x",
             $$css: true
           }
         };
@@ -1886,27 +1886,27 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         const complex = {
-          0: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4",
-          4: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x",
-          2: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 x1yc5d2u",
-          6: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 x1yc5d2u",
-          1: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.content x1fdo2jl",
-          5: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.content x1fdo2jl",
-          3: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl",
-          7: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl"
+          0: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4",
+          4: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x",
+          2: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.sidebar boxSizing-x9f619 gridArea-x1yc5d2u",
+          6: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.sidebar boxSizing-x9f619 gridArea-x1yc5d2u",
+          1: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.content gridArea-x1fdo2jl",
+          5: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.content gridArea-x1fdo2jl",
+          3: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.sidebar boxSizing-x9f619 UnknownFile__styles.content gridArea-x1fdo2jl",
+          7: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.sidebar boxSizing-x9f619 UnknownFile__styles.content gridArea-x1fdo2jl"
         }[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
       `);
     });
@@ -1974,7 +1974,7 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x1wsuqlk{margin-right:12px}", 4000);
+        _inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
         const styles = {};
         stylex(styles.unknown);"
       `);
@@ -1993,6 +1993,52 @@ describe('@stylexjs/babel-plugin', () => {
         `,
           { dev: true, genConditionalClasses: true },
         ),
+      ).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from '@stylexjs/stylex';
+        _inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
+        const styles = {};
+        stylex.props(styles.unknown);"
+      `);
+    });
+    test('debug mode classnames enabled', () => {
+      expect(
+        transform(
+          `
+          import stylex from '@stylexjs/stylex';
+          const styles = stylex.create({
+            tileHeading: {
+              marginRight: 12,
+            },
+          });
+          stylex.props(styles.unknown);
+        `,
+          { dev: true, debug: true, genConditionalClasses: true },
+        ),
+      ).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from '@stylexjs/stylex';
+        _inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
+        const styles = {};
+        stylex.props(styles.unknown);"
+      `);
+    });
+    test('debug mode classnames disabled', () => {
+      expect(
+        transform(
+          `
+          import stylex from '@stylexjs/stylex';
+          const styles = stylex.create({
+            tileHeading: {
+              marginRight: 12,
+            },
+          });
+          stylex.props(styles.unknown);
+        `,
+          { dev: true, debug: false, genConditionalClasses: true },
+        ),
       ).toMatchInlineSnapshot(`
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
@@ -2002,5 +2048,75 @@ describe('@stylexjs/babel-plugin', () => {
         stylex.props(styles.unknown);"
       `);
     });
+    test('debug mode classnames enabled with many styles', () => {
+      expect(
+        transform(
+          `
+          import stylex from '@stylexjs/stylex';
+          const styles = stylex.create({
+            tileHeading: {
+              marginRight: 12,
+            },
+            content: {
+              gridArea: 'content',
+            },
+            root: {
+              display: 'grid',
+              gridTemplateRows: '100%',
+              gridTemplateAreas: '"content"',
+            },
+          });
+          stylex.props(styles.unknown);
+        `,
+          { dev: true, debug: true, genConditionalClasses: true },
+        ),
+      ).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from '@stylexjs/stylex';
+        _inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        const styles = {};
+        stylex.props(styles.unknown);"
+      `);
+    });
+    test('debug mode classnames enabled with dev disabled', () => {
+      expect(
+        transform(
+          `
+          import stylex from '@stylexjs/stylex';
+          const styles = stylex.create({
+            tileHeading: {
+              marginRight: 12,
+            },
+            content: {
+              gridArea: 'content',
+            },
+            root: {
+              display: 'grid',
+              gridTemplateRows: '100%',
+              gridTemplateAreas: '"content"',
+            },
+          });
+          stylex.props(styles.unknown);
+        `,
+          { dev: false, debug: true, genConditionalClasses: true },
+        ),
+      ).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from '@stylexjs/stylex';
+        _inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        const styles = {};
+        stylex.props(styles.unknown);"
+      `);
+    });
   });
 });
diff --git a/packages/babel-plugin/__tests__/stylex-transform-stylex-attrs-test.js b/packages/babel-plugin/__tests__/stylex-transform-stylex-attrs-test.js
index 13bb680b..c016e97e 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-stylex-attrs-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-stylex-attrs-test.js
@@ -833,9 +833,9 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
           ({
-            class: "FooBar__styles.default x1e2nbdu"
+            class: "FooBar__styles.default color-x1e2nbdu"
           });"
         `);
       });
@@ -868,14 +868,14 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          _inject2(".x1t391ir{background-color:blue}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          _inject2(".backgroundColor-x1t391ir{background-color:blue}", 3000);
           ({
             0: {
-              class: "FooBar__styles.default x1e2nbdu"
+              class: "FooBar__styles.default color-x1e2nbdu"
             },
             1: {
-              class: "FooBar__styles.default x1e2nbdu FooBar__otherStyles.default x1t391ir"
+              class: "FooBar__styles.default color-x1e2nbdu FooBar__otherStyles.default backgroundColor-x1t391ir"
             }
           })[!!isActive << 0];"
         `);
@@ -908,19 +908,19 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
           const styles = {
             default: {
               "FooBar__styles.default": "FooBar__styles.default",
-              color: "x1e2nbdu",
+              color: "color-x1e2nbdu",
               $$css: true
             }
           };
-          _inject2(".x1t391ir{background-color:blue}", 3000);
+          _inject2(".backgroundColor-x1t391ir{background-color:blue}", 3000);
           const otherStyles = {
             default: {
               "FooBar__otherStyles.default": "FooBar__otherStyles.default",
-              backgroundColor: "x1t391ir",
+              backgroundColor: "backgroundColor-x1t391ir",
               $$css: true
             }
           };
@@ -955,14 +955,14 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          _inject2(".xju2f9n{color:blue}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          _inject2(".color-xju2f9n{color:blue}", 3000);
           ({
             0: {
-              class: "FooBar__styles.default x1e2nbdu"
+              class: "FooBar__styles.default color-x1e2nbdu"
             },
             1: {
-              class: "FooBar__styles.default FooBar__styles.active xju2f9n"
+              class: "FooBar__styles.default FooBar__styles.active color-xju2f9n"
             }
           })[!!isActive << 0];"
         `);
@@ -1284,23 +1284,23 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         export const styles = {
           sidebar: {
             "UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
-            boxSizing: "x9f619",
-            gridArea: "x1yc5d2u",
+            boxSizing: "boxSizing-x9f619",
+            gridArea: "gridArea-x1yc5d2u",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1311,7 +1311,7 @@ describe('@stylexjs/babel-plugin', () => {
           },
           content: {
             "UnknownFile__styles.content": "UnknownFile__styles.content",
-            gridArea: "x1fdo2jl",
+            gridArea: "gridArea-x1fdo2jl",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1322,33 +1322,33 @@ describe('@stylexjs/babel-plugin', () => {
           },
           root: {
             "UnknownFile__styles.root": "UnknownFile__styles.root",
-            display: "xrvj5dj",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x5gp9wm",
+            display: "display-xrvj5dj",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x5gp9wm",
             $$css: true
           },
           withSidebar: {
             "UnknownFile__styles.withSidebar": "UnknownFile__styles.withSidebar",
-            gridTemplateColumns: "x1rkzygb",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x17lh93j",
-            "@media (max-width: 640px)_gridTemplateRows": "xmr4b4k",
-            "@media (max-width: 640px)_gridTemplateAreas": "xesbpuc",
-            "@media (max-width: 640px)_gridTemplateColumns": "x15nfgh4",
+            gridTemplateColumns: "gridTemplateColumns-x1rkzygb",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x17lh93j",
+            "@media (max-width: 640px)_gridTemplateRows": "gridTemplateRows-xmr4b4k",
+            "@media (max-width: 640px)_gridTemplateAreas": "gridTemplateAreas-xesbpuc",
+            "@media (max-width: 640px)_gridTemplateColumns": "gridTemplateColumns-x15nfgh4",
             $$css: true
           },
           noSidebar: {
             "UnknownFile__styles.noSidebar": "UnknownFile__styles.noSidebar",
-            gridTemplateColumns: "x1mkdm3x",
+            gridTemplateColumns: "gridTemplateColumns-x1mkdm3x",
             $$css: true
           }
         };
         ({
           0: {
-            class: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
+            class: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4"
           },
           1: {
-            class: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
+            class: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x"
           }
         })[!!(sidebar == null) << 0];"
       `);
@@ -1399,42 +1399,42 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         const complex = {
           0: {
-            class: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
+            class: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4"
           },
           4: {
-            class: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
+            class: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x"
           },
           2: {
-            class: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 x1yc5d2u"
+            class: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.sidebar boxSizing-x9f619 gridArea-x1yc5d2u"
           },
           6: {
-            class: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 x1yc5d2u"
+            class: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.sidebar boxSizing-x9f619 gridArea-x1yc5d2u"
           },
           1: {
-            class: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.content x1fdo2jl"
+            class: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.content gridArea-x1fdo2jl"
           },
           5: {
-            class: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.content x1fdo2jl"
+            class: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.content gridArea-x1fdo2jl"
           },
           3: {
-            class: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl"
+            class: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.sidebar boxSizing-x9f619 UnknownFile__styles.content gridArea-x1fdo2jl"
           },
           7: {
-            class: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl"
+            class: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.sidebar boxSizing-x9f619 UnknownFile__styles.content gridArea-x1fdo2jl"
           }
         }[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
       `);
diff --git a/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js b/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js
index ec18ae7a..d2bb868f 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js
@@ -833,9 +833,9 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
           ({
-            className: "FooBar__styles.default x1e2nbdu"
+            className: "FooBar__styles.default color-x1e2nbdu"
           });"
         `);
       });
@@ -868,14 +868,14 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          _inject2(".x1t391ir{background-color:blue}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          _inject2(".backgroundColor-x1t391ir{background-color:blue}", 3000);
           ({
             0: {
-              className: "FooBar__styles.default x1e2nbdu"
+              className: "FooBar__styles.default color-x1e2nbdu"
             },
             1: {
-              className: "FooBar__styles.default x1e2nbdu FooBar__otherStyles.default x1t391ir"
+              className: "FooBar__styles.default color-x1e2nbdu FooBar__otherStyles.default backgroundColor-x1t391ir"
             }
           })[!!isActive << 0];"
         `);
@@ -908,19 +908,19 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
           const styles = {
             default: {
               "FooBar__styles.default": "FooBar__styles.default",
-              color: "x1e2nbdu",
+              color: "color-x1e2nbdu",
               $$css: true
             }
           };
-          _inject2(".x1t391ir{background-color:blue}", 3000);
+          _inject2(".backgroundColor-x1t391ir{background-color:blue}", 3000);
           const otherStyles = {
             default: {
               "FooBar__otherStyles.default": "FooBar__otherStyles.default",
-              backgroundColor: "x1t391ir",
+              backgroundColor: "backgroundColor-x1t391ir",
               $$css: true
             }
           };
@@ -955,14 +955,14 @@ describe('@stylexjs/babel-plugin', () => {
           "import _inject from "@stylexjs/stylex/lib/stylex-inject";
           var _inject2 = _inject;
           import stylex from 'stylex';
-          _inject2(".x1e2nbdu{color:red}", 3000);
-          _inject2(".xju2f9n{color:blue}", 3000);
+          _inject2(".color-x1e2nbdu{color:red}", 3000);
+          _inject2(".color-xju2f9n{color:blue}", 3000);
           ({
             0: {
-              className: "FooBar__styles.default x1e2nbdu"
+              className: "FooBar__styles.default color-x1e2nbdu"
             },
             1: {
-              className: "FooBar__styles.default FooBar__styles.active xju2f9n"
+              className: "FooBar__styles.default FooBar__styles.active color-xju2f9n"
             }
           })[!!isActive << 0];"
         `);
@@ -1284,23 +1284,23 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         export const styles = {
           sidebar: {
             "UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
-            boxSizing: "x9f619",
-            gridArea: "x1yc5d2u",
+            boxSizing: "boxSizing-x9f619",
+            gridArea: "gridArea-x1yc5d2u",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1311,7 +1311,7 @@ describe('@stylexjs/babel-plugin', () => {
           },
           content: {
             "UnknownFile__styles.content": "UnknownFile__styles.content",
-            gridArea: "x1fdo2jl",
+            gridArea: "gridArea-x1fdo2jl",
             gridRow: null,
             gridRowStart: null,
             gridRowEnd: null,
@@ -1322,33 +1322,33 @@ describe('@stylexjs/babel-plugin', () => {
           },
           root: {
             "UnknownFile__styles.root": "UnknownFile__styles.root",
-            display: "xrvj5dj",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x5gp9wm",
+            display: "display-xrvj5dj",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x5gp9wm",
             $$css: true
           },
           withSidebar: {
             "UnknownFile__styles.withSidebar": "UnknownFile__styles.withSidebar",
-            gridTemplateColumns: "x1rkzygb",
-            gridTemplateRows: "x7k18q3",
-            gridTemplateAreas: "x17lh93j",
-            "@media (max-width: 640px)_gridTemplateRows": "xmr4b4k",
-            "@media (max-width: 640px)_gridTemplateAreas": "xesbpuc",
-            "@media (max-width: 640px)_gridTemplateColumns": "x15nfgh4",
+            gridTemplateColumns: "gridTemplateColumns-x1rkzygb",
+            gridTemplateRows: "gridTemplateRows-x7k18q3",
+            gridTemplateAreas: "gridTemplateAreas-x17lh93j",
+            "@media (max-width: 640px)_gridTemplateRows": "gridTemplateRows-xmr4b4k",
+            "@media (max-width: 640px)_gridTemplateAreas": "gridTemplateAreas-xesbpuc",
+            "@media (max-width: 640px)_gridTemplateColumns": "gridTemplateColumns-x15nfgh4",
             $$css: true
           },
           noSidebar: {
             "UnknownFile__styles.noSidebar": "UnknownFile__styles.noSidebar",
-            gridTemplateColumns: "x1mkdm3x",
+            gridTemplateColumns: "gridTemplateColumns-x1mkdm3x",
             $$css: true
           }
         };
         ({
           0: {
-            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
+            className: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4"
           },
           1: {
-            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
+            className: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x"
           }
         })[!!(sidebar == null) << 0];"
       `);
@@ -1399,42 +1399,42 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from '@stylexjs/stylex';
-        _inject2(".x9f619{box-sizing:border-box}", 3000);
-        _inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
-        _inject2(".x1fdo2jl{grid-area:content}", 1000);
-        _inject2(".xrvj5dj{display:grid}", 3000);
-        _inject2(".x7k18q3{grid-template-rows:100%}", 3000);
-        _inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
-        _inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
-        _inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
-        _inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
-        _inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
-        _inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
-        _inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+        _inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
+        _inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
+        _inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
+        _inject2(".display-xrvj5dj{display:grid}", 3000);
+        _inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
+        _inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+        _inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+        _inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+        _inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+        _inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+        _inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
+        _inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         const complex = {
           0: {
-            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
+            className: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4"
           },
           4: {
-            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
+            className: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x"
           },
           2: {
-            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 x1yc5d2u"
+            className: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.sidebar boxSizing-x9f619 gridArea-x1yc5d2u"
           },
           6: {
-            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 x1yc5d2u"
+            className: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.sidebar boxSizing-x9f619 gridArea-x1yc5d2u"
           },
           1: {
-            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.content gridArea-x1fdo2jl"
           },
           5: {
-            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.content gridArea-x1fdo2jl"
           },
           3: {
-            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root display-xrvj5dj UnknownFile__styles.withSidebar gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 UnknownFile__styles.sidebar boxSizing-x9f619 UnknownFile__styles.content gridArea-x1fdo2jl"
           },
           7: {
-            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm UnknownFile__styles.noSidebar gridTemplateColumns-x1mkdm3x UnknownFile__styles.sidebar boxSizing-x9f619 UnknownFile__styles.content gridArea-x1fdo2jl"
           }
         }[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
       `);
diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js
index dd0a0d01..c631eede 100644
--- a/packages/babel-plugin/src/utils/state-manager.js
+++ b/packages/babel-plugin/src/utils/state-manager.js
@@ -153,6 +153,13 @@ export default class StateManager {
       'options.dev',
     );
 
+    const debug: StyleXStateOptions['debug'] = z.logAndDefault(
+      z.boolean(),
+      options.debug ?? dev,
+      false,
+      'options.debug',
+    );
+
     const test: StyleXStateOptions['test'] = z.logAndDefault(
       z.boolean(),
       options.test ?? false,
@@ -269,6 +276,7 @@ export default class StateManager {
     const opts: StyleXStateOptions = {
       aliases,
       dev,
+      debug,
       test,
       runtimeInjection,
       classNamePrefix,
diff --git a/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap b/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap
index 28e1c43b..2818a3f2 100644
--- a/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap
@@ -167,13 +167,13 @@ exports[`esbuild-plugin-stylex preserves stylex.inject calls and does not extrac
   var import_stylex_inject = __toESM(__require("@stylexjs/stylex/lib/stylex-inject"), 1);
   var import_stylex = __toESM(__require("@stylexjs/stylex"), 1);
   var _inject2 = import_stylex_inject.default;
-  _inject2(".xt0psk2{display:inline}", 3e3);
-  _inject2(".xh8yej3{width:100%}", 4e3);
+  _inject2(".display-xt0psk2{display:inline}", 3e3);
+  _inject2(".width-xh8yej3{width:100%}", 4e3);
   var fooStyles_default = {
     foo: {
       fooStyles__foo: "fooStyles__foo",
-      display: "xt0psk2",
-      width: "xh8yej3",
+      display: "display-xt0psk2",
+      width: "width-xh8yej3",
       $$css: true
     }
   };
@@ -182,15 +182,15 @@ exports[`esbuild-plugin-stylex preserves stylex.inject calls and does not extrac
   var import_stylex_inject2 = __toESM(__require("@stylexjs/stylex/lib/stylex-inject"), 1);
   var import_stylex2 = __toESM(__require("@stylexjs/stylex"), 1);
   var _inject22 = import_stylex_inject2.default;
-  _inject22(".x1lliihq{display:block}", 3e3);
-  _inject22(".xnsd7bc{height:900px}", 4e3);
-  _inject22(".x3hqpx7{width:50%}", 4e3);
+  _inject22(".display-x1lliihq{display:block}", 3e3);
+  _inject22(".height-xnsd7bc{height:900px}", 4e3);
+  _inject22(".width-x3hqpx7{width:50%}", 4e3);
   var bazStyles_default = {
     baz: {
       bazStyles__baz: "bazStyles__baz",
-      display: "x1lliihq",
-      height: "xnsd7bc",
-      width: "x3hqpx7",
+      display: "display-x1lliihq",
+      height: "height-xnsd7bc",
+      width: "width-x3hqpx7",
       $$css: true
     }
   };
@@ -198,22 +198,22 @@ exports[`esbuild-plugin-stylex preserves stylex.inject calls and does not extrac
   // __tests__/__fixtures__/index.js
   var _inject23 = import_stylex_inject3.default;
   _inject23("@keyframes xekv6nw-B{0%{opacity:0;}100%{opacity:1;}}", 1);
-  _inject23(".x127lhb5{animation-name:xekv6nw-B}", 3e3);
-  _inject23(".x78zum5{display:flex}", 3e3);
-  _inject23(".x16ydxro{margin-left:10px}", 4e3);
-  _inject23(".x1xa6b72{height:700px}", 4e3);
-  _inject23(".xrkmrrc{background-color:red}", 3e3);
-  _inject23(".x1r3o6fz:hover{background-color:pink}", 3130);
+  _inject23(".animationName-x127lhb5{animation-name:xekv6nw-B}", 3e3);
+  _inject23(".display-x78zum5{display:flex}", 3e3);
+  _inject23(".marginLeft-x16ydxro{margin-left:10px}", 4e3);
+  _inject23(".height-x1xa6b72{height:700px}", 4e3);
+  _inject23(".backgroundColor-xrkmrrc{background-color:red}", 3e3);
+  _inject23(".backgroundColor-x1r3o6fz:hover{background-color:pink}", 3130);
   var styles = {
     bar: {
       "index__styles.bar": "index__styles.bar",
-      animationName: "x127lhb5",
-      display: "x78zum5",
-      marginLeft: "x16ydxro",
+      animationName: "animationName-x127lhb5",
+      display: "display-x78zum5",
+      marginLeft: "marginLeft-x16ydxro",
       marginInlineStart: null,
       marginInlineEnd: null,
-      height: "x1xa6b72",
-      backgroundColor: "xrkmrrc x1r3o6fz",
+      height: "height-x1xa6b72",
+      backgroundColor: "backgroundColor-xrkmrrc backgroundColor-x1r3o6fz",
       $$css: true
     }
   };
diff --git a/packages/rollup-plugin/__tests__/index-test.js b/packages/rollup-plugin/__tests__/index-test.js
index c7516fb1..5683435a 100644
--- a/packages/rollup-plugin/__tests__/index-test.js
+++ b/packages/rollup-plugin/__tests__/index-test.js
@@ -234,13 +234,13 @@ describe('rollup-plugin-stylex', () => {
          */
 
         var _inject2$2 = _inject;
-        _inject2$2(".x1lliihq{display:block}", 3000);
-        _inject2$2(".xh8yej3{width:100%}", 4000);
+        _inject2$2(".display-x1lliihq{display:block}", 3000);
+        _inject2$2(".width-xh8yej3{width:100%}", 4000);
         var styles$2 = {
           bar: {
             "otherStyles__styles.bar": "otherStyles__styles.bar",
-            display: "x1lliihq",
-            width: "xh8yej3",
+            display: "display-x1lliihq",
+            width: "width-xh8yej3",
             $$css: true
           }
         };
@@ -255,15 +255,15 @@ describe('rollup-plugin-stylex', () => {
          */
 
         var _inject2$1 = _inject;
-        _inject2$1(".xt0psk2{display:inline}", 3000);
-        _inject2$1(".x1egiwwb{height:500px}", 4000);
-        _inject2$1(".x3hqpx7{width:50%}", 4000);
+        _inject2$1(".display-xt0psk2{display:inline}", 3000);
+        _inject2$1(".height-x1egiwwb{height:500px}", 4000);
+        _inject2$1(".width-x3hqpx7{width:50%}", 4000);
         const styles$1 = {
           baz: {
             "npmStyles__styles.baz": "npmStyles__styles.baz",
-            display: "xt0psk2",
-            height: "x1egiwwb",
-            width: "x3hqpx7",
+            display: "display-xt0psk2",
+            height: "height-x1egiwwb",
+            width: "width-x3hqpx7",
             $$css: true
           }
         };
@@ -279,24 +279,24 @@ describe('rollup-plugin-stylex', () => {
 
         var _inject2 = _inject;
         _inject2("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
-        _inject2(".xeuoslp{animation-name:xgnty7z-B}", 3000);
-        _inject2(".x78zum5{display:flex}", 3000);
-        _inject2(".x1hm9lzh{margin-inline-start:10px}", 3000);
-        _inject2(".xlrshdv{margin-top:99px}", 4000);
-        _inject2(".x1egiwwb{height:500px}", 4000);
-        _inject2(".x1oz5o6v:hover{background:red}", 1130);
-        _inject2(".xu4yf9m{border-start-start-radius:7.5px}", 3000);
+        _inject2(".animationName-xeuoslp{animation-name:xgnty7z-B}", 3000);
+        _inject2(".display-x78zum5{display:flex}", 3000);
+        _inject2(".marginInlineStart-x1hm9lzh{margin-inline-start:10px}", 3000);
+        _inject2(".marginTop-xlrshdv{margin-top:99px}", 4000);
+        _inject2(".height-x1egiwwb{height:500px}", 4000);
+        _inject2(".background-x1oz5o6v:hover{background:red}", 1130);
+        _inject2(".borderStartStartRadius-xu4yf9m{border-start-start-radius:7.5px}", 3000);
         var styles = {
           foo: {
             "index__styles.foo": "index__styles.foo",
-            animationName: "xeuoslp",
-            display: "x78zum5",
-            marginInlineStart: "x1hm9lzh",
+            animationName: "animationName-xeuoslp",
+            display: "display-x78zum5",
+            marginInlineStart: "marginInlineStart-x1hm9lzh",
             marginLeft: null,
             marginRight: null,
-            marginTop: "xlrshdv",
-            height: "x1egiwwb",
-            ":hover_background": "x1oz5o6v",
+            marginTop: "marginTop-xlrshdv",
+            height: "height-x1egiwwb",
+            ":hover_background": "background-x1oz5o6v",
             ":hover_backgroundAttachment": null,
             ":hover_backgroundClip": null,
             ":hover_backgroundColor": null,
@@ -307,7 +307,7 @@ describe('rollup-plugin-stylex', () => {
             ":hover_backgroundPositionY": null,
             ":hover_backgroundRepeat": null,
             ":hover_backgroundSize": null,
-            borderStartStartRadius: "xu4yf9m",
+            borderStartStartRadius: "borderStartStartRadius-xu4yf9m",
             borderTopLeftRadius: null,
             borderTopRightRadius: null,
             $$css: true
diff --git a/packages/shared/__tests__/convert-to-className-test.js b/packages/shared/__tests__/convert-to-className-test.js
index 8a9ab8a8..1b51a61f 100644
--- a/packages/shared/__tests__/convert-to-className-test.js
+++ b/packages/shared/__tests__/convert-to-className-test.js
@@ -18,6 +18,33 @@ describe('convert-to-className test', () => {
   test('converts style to className', () => {
     expect(convert(['margin', 10])).toEqual('margin:10px');
   });
+  test('prefixes classname with property name when options.debug is true', () => {
+    const options = {
+      classNamePrefix: 'x',
+      dev: false,
+      debug: true,
+      styleResolution: 'application-order',
+      test: false,
+      useRemForFontSize: false,
+    };
+    const result = convertStyleToClassName(['margin', 10], [], [], options);
+    const className = result[1];
+    expect(className.startsWith('margin-x')).toBe(true);
+  });
+  test('prefixes classname with prefer only when options.debug is false', () => {
+    const options = {
+      classNamePrefix: 'x',
+      dev: false,
+      debug: false,
+      styleResolution: 'application-order',
+      test: false,
+      useRemForFontSize: false,
+    };
+    const result = convertStyleToClassName(['margin', 10], [], [], options);
+    const className = result[1];
+    expect(className.startsWith('x')).toBe(true);
+    expect(className.startsWith('margin-x')).toBe(false);
+  });
   test('converts margin number to px', () => {
     expect(convert(['margin', 10])).toEqual('margin:10px');
   });
diff --git a/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js b/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js
index 51b73987..43b43701 100644
--- a/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js
+++ b/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js
@@ -16,6 +16,7 @@ import { flattenRawStyleObject } from '../../src/preprocess-rules/flatten-raw-st
 
 const options = {
   classNamePrefix: 'x',
+  debug: false,
   styleResolution: 'legacy-expand-shorthands',
   runtimeInjection: false,
   useRemForFontSize: true,
diff --git a/packages/shared/__tests__/gen-css-test.js b/packages/shared/__tests__/gen-css-test.js
index ed30ae82..0a22caf3 100644
--- a/packages/shared/__tests__/gen-css-test.js
+++ b/packages/shared/__tests__/gen-css-test.js
@@ -13,6 +13,7 @@ const options = {
   classNamePrefix: 'x',
   styleResolution: 'legacy-expand-shorthands',
   dev: false,
+  debug: false,
   useRemForFontSize: true,
   runtimeInjection: false,
   test: false,
diff --git a/packages/shared/src/common-types.js b/packages/shared/src/common-types.js
index 59e5f0d1..2d776a69 100644
--- a/packages/shared/src/common-types.js
+++ b/packages/shared/src/common-types.js
@@ -43,6 +43,7 @@ export type FlatCompiledStyles = $ReadOnly<{
 
 export type StyleXOptions = $ReadOnly<{
   dev: boolean,
+  debug: ?boolean,
   test: boolean,
   useRemForFontSize: boolean,
   classNamePrefix: string,
diff --git a/packages/shared/src/convert-to-className.js b/packages/shared/src/convert-to-className.js
index c7ad8685..0a0846ca 100644
--- a/packages/shared/src/convert-to-className.js
+++ b/packages/shared/src/convert-to-className.js
@@ -29,7 +29,7 @@ export function convertStyleToClassName(
   atRules: $ReadOnlyArray<string>,
   options: StyleXOptions = defaultOptions,
 ): StyleRule {
-  const { classNamePrefix = 'x' } = options;
+  const { classNamePrefix = 'x', debug = false } = options;
   const [key, rawValue] = objEntry;
   const dashedKey = dashify(key);
 
@@ -58,7 +58,9 @@ export function convertStyleToClassName(
 
   // NOTE: '<>' is used to keep existing hashes stable.
   // This should be removed in a future version.
-  const className = classNamePrefix + createHash('<>' + stringToHash);
+  const className = debug
+    ? `${key}-${classNamePrefix}${createHash('<>' + stringToHash)}`
+    : classNamePrefix + createHash('<>' + stringToHash);
 
   const cssRules = generateRule(className, dashedKey, value, pseudos, atRules);
 
diff --git a/packages/shared/src/utils/default-options.js b/packages/shared/src/utils/default-options.js
index 2422257c..76fbeaa1 100644
--- a/packages/shared/src/utils/default-options.js
+++ b/packages/shared/src/utils/default-options.js
@@ -24,6 +24,7 @@ import type { StyleXOptions } from '../common-types';
 
 export const defaultOptions: StyleXOptions = {
   dev: false,
+  debug: false,
   useRemForFontSize: true,
   test: false,
   classNamePrefix: 'x',
diff --git a/packages/webpack-plugin/__tests__/index-test.js b/packages/webpack-plugin/__tests__/index-test.js
index ea9689f3..2d99261b 100644
--- a/packages/webpack-plugin/__tests__/index-test.js
+++ b/packages/webpack-plugin/__tests__/index-test.js
@@ -553,23 +553,23 @@ describe('webpack-plugin-stylex', () => {
           var _inject2 = _stylexInject.default;
           _inject2("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
           var fadeAnimation = "xgnty7z-B";
-          _inject2(".xeuoslp{animation-name:xgnty7z-B}", 3000);
-          _inject2(".x78zum5{display:flex}", 3000);
-          _inject2(".x1hm9lzh{margin-inline-start:10px}", 3000);
-          _inject2(".xlrshdv{margin-top:99px}", 4000);
-          _inject2(".x1egiwwb{height:500px}", 4000);
-          _inject2(".x1oz5o6v:hover{background:red}", 1130);
+          _inject2(".animationName-xeuoslp{animation-name:xgnty7z-B}", 3000);
+          _inject2(".display-x78zum5{display:flex}", 3000);
+          _inject2(".marginInlineStart-x1hm9lzh{margin-inline-start:10px}", 3000);
+          _inject2(".marginTop-xlrshdv{margin-top:99px}", 4000);
+          _inject2(".height-x1egiwwb{height:500px}", 4000);
+          _inject2(".background-x1oz5o6v:hover{background:red}", 1130);
           var styles = {
             foo: {
               "index__styles.foo": "index__styles.foo",
-              animationName: "xeuoslp",
-              display: "x78zum5",
-              marginInlineStart: "x1hm9lzh",
+              animationName: "animationName-xeuoslp",
+              display: "display-x78zum5",
+              marginInlineStart: "marginInlineStart-x1hm9lzh",
               marginLeft: null,
               marginRight: null,
-              marginTop: "xlrshdv",
-              height: "x1egiwwb",
-              ":hover_background": "x1oz5o6v",
+              marginTop: "marginTop-xlrshdv",
+              height: "height-x1egiwwb",
+              ":hover_background": "background-x1oz5o6v",
               ":hover_backgroundAttachment": null,
               ":hover_backgroundClip": null,
               ":hover_backgroundColor": null,
@@ -613,13 +613,13 @@ describe('webpack-plugin-stylex', () => {
           var _stylex = _interopRequireDefault(__webpack_require__("stylex"));
           function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
           var _inject2 = _stylexInject.default;
-          _inject2(".x1lliihq{display:block}", 3000);
-          _inject2(".xh8yej3{width:100%}", 4000);
+          _inject2(".display-x1lliihq{display:block}", 3000);
+          _inject2(".width-xh8yej3{width:100%}", 4000);
           var styles = {
             bar: {
               "otherStyles__styles.bar": "otherStyles__styles.bar",
-              display: "x1lliihq",
-              width: "xh8yej3",
+              display: "display-x1lliihq",
+              width: "width-xh8yej3",
               $$css: true
             }
           };
@@ -709,15 +709,15 @@ describe('webpack-plugin-stylex', () => {
           var _stylex = _interopRequireDefault(__webpack_require__("stylex"));
           function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
           var _inject2 = _stylexInject.default;
-          _inject2(".xt0psk2{display:inline}", 3000);
-          _inject2(".x1egiwwb{height:500px}", 4000);
-          _inject2(".x3hqpx7{width:50%}", 4000);
+          _inject2(".display-xt0psk2{display:inline}", 3000);
+          _inject2(".height-x1egiwwb{height:500px}", 4000);
+          _inject2(".width-x3hqpx7{width:50%}", 4000);
           const styles = {
             baz: {
               "npmStyles__styles.baz": "npmStyles__styles.baz",
-              display: "xt0psk2",
-              height: "x1egiwwb",
-              width: "x3hqpx7",
+              display: "display-xt0psk2",
+              height: "height-x1egiwwb",
+              width: "width-x3hqpx7",
               $$css: true
             }
           };