fix: fix typos and update tests. Some tests still fail

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

@@ -1262,7 +1262,7 @@ describe('@stylexjs/babel-plugin', () => {
           default: {
             marginTop: "xxsse2n",
             marginRight: "x1wh8b8d",
-            marginBottom: "xat24cr",
+            marginBottom: "x1du4iog",
             $$css: true
           },
           error: {

packages/babel-plugin/__tests__/stylex-transform-logical-properties-test.js

@@ -451,8 +451,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".x10im51j{margin-block:0}", 2000);
-        const classnames = "x10im51j";"
+        _inject2(".x1yslrto{margin-block:0px}", 2000);
+        const classnames = "x1yslrto";"
       `);
     });
 
@@ -467,8 +467,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".xat24cr{margin-bottom:0}", 4000);
-        const classnames = "xat24cr";"
+        _inject2(".x1du4iog{margin-bottom:0px}", 4000);
+        const classnames = "x1du4iog";"
       `);
     });
 
@@ -483,8 +483,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".xdj266r{margin-top:0}", 4000);
-        const classnames = "xdj266r";"
+        _inject2(".x1q12cbh{margin-top:0px}", 4000);
+        const classnames = "x1q12cbh";"
       `);
     });
 
@@ -499,8 +499,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".xrxpjvj{margin-inline:0}", 2000);
-        const classnames = "xrxpjvj";"
+        _inject2(".xmbzetd{margin-inline:0px}", 2000);
+        const classnames = "xmbzetd";"
       `);
     });
 
@@ -515,8 +515,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".x14z9mp{margin-inline-end:0}", 3000);
-        const classnames = "x14z9mp";"
+        _inject2(".xfbia9g{margin-inline-end:0px}", 3000);
+        const classnames = "xfbia9g";"
       `);
     });
 
@@ -531,8 +531,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".x1lziwak{margin-inline-start:0}", 3000);
-        const classnames = "x1lziwak";"
+        _inject2(".x1tt3wx9{margin-inline-start:0px}", 3000);
+        const classnames = "x1tt3wx9";"
       `);
     });
 
@@ -665,8 +665,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".x14z9mp{margin-inline-end:0}", 3000);
-        const classnames = "x14z9mp";"
+        _inject2(".xfbia9g{margin-inline-end:0px}", 3000);
+        const classnames = "xfbia9g";"
       `);
     });
 
@@ -681,8 +681,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".xrxpjvj{margin-inline:0}", 2000);
-        const classnames = "xrxpjvj";"
+        _inject2(".xmbzetd{margin-inline:0px}", 2000);
+        const classnames = "xmbzetd";"
       `);
     });
 
@@ -697,8 +697,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".x1lziwak{margin-inline-start:0}", 3000);
-        const classnames = "x1lziwak";"
+        _inject2(".x1tt3wx9{margin-inline-start:0px}", 3000);
+        const classnames = "x1tt3wx9";"
       `);
     });
 
@@ -713,8 +713,8 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(".x10im51j{margin-block:0}", 2000);
-        const classnames = "x10im51j";"
+        _inject2(".x1yslrto{margin-block:0px}", 2000);
+        const classnames = "x1yslrto";"
       `);
     });
 

packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap

@@ -18,7 +18,7 @@ const fadeOut = "x1mi9bte-B";
 const fadeOutBloom = "xd93vs1-B";
 const fadeOutBloomDark = "x18q36hy-B";
 const scaleUp = "x1gdf4cp-B";
-const scaleDown = "x1uvjygu-B";
+const scaleDown = "xjnts4g-B";
 const slideOutUp = "xyz4r9t-B";
 const slideOutDown = "xyz4r9t-B";
 const slideOutRight = "x1qkfcoh-B";
@@ -121,9 +121,9 @@ exports[`commonJS results of exported styles and variables animationNames.stylex
     1,
   ],
   [
-    "x1uvjygu-B",
+    "xjnts4g-B",
     {
-      "ltr": "@keyframes x1uvjygu-B{to{transform:scale(.75);}}",
+      "ltr": "@keyframes xjnts4g-B{to{transform:scale(0.75);}}",
       "rtl": null,
     },
     1,
@@ -259,7 +259,7 @@ exports[`commonJS results of exported styles and variables animationNames.stylex
   [
     "x1p4jv38",
     {
-      "ltr": ":root{--xwgfw4z:x1wv65fh-B;--xwpxwog:x3cospo-B;--x1mrv0ld:x1mi9bte-B;--x1f9mpsk:xd93vs1-B;--x1dlahej:x1gdf4cp-B;--xchc88h:x1uvjygu-B;--x1wwe1u9:xyz4r9t-B;--xojb453:xyz4r9t-B;--x1erxhtw:x1qkfcoh-B;--x2p2omt:x1c1el34-B;--x1lyv700:x5q0om7-B;--x1dhg8ry:xiaildr-B;--x14d2ijb:x1pzz5b5-B;--x1r6uxce:x2i3tye-B;--x1o3zfci:xui5qpo-B;--xhf4ud:x1oudpiw-B;--x7jv0fk:x1uh2x5g-B;--x1x4v7e3:xk6fz2t-B;--xg5no4m:x13kz0yu-B;--x7mxyyy:xtacmzc-B;--xs1cbdk:xmu8adp-B;--x1gf7j19:x1wtl5zh-B;}",
+      "ltr": ":root{--xwgfw4z:x1wv65fh-B;--xwpxwog:x3cospo-B;--x1mrv0ld:x1mi9bte-B;--x1f9mpsk:xd93vs1-B;--x1dlahej:x1gdf4cp-B;--xchc88h:xjnts4g-B;--x1wwe1u9:xyz4r9t-B;--xojb453:xyz4r9t-B;--x1erxhtw:x1qkfcoh-B;--x2p2omt:x1c1el34-B;--x1lyv700:x5q0om7-B;--x1dhg8ry:xiaildr-B;--x14d2ijb:x1pzz5b5-B;--x1r6uxce:x2i3tye-B;--x1o3zfci:xui5qpo-B;--xhf4ud:x1oudpiw-B;--x7jv0fk:x1uh2x5g-B;--x1x4v7e3:xk6fz2t-B;--xg5no4m:x13kz0yu-B;--x7mxyyy:xtacmzc-B;--xs1cbdk:xmu8adp-B;--x1gf7j19:x1wtl5zh-B;}",
       "rtl": null,
     },
     0,

packages/style-value-parser/src/css-types/time.js

@@ -20,8 +20,8 @@ export class Time {
   toString(): string {
     // Always use the shortest representation
     if (this.unit === 'ms') {
-      if(this.value <= 99) {
-        return `${this.value}ms`
+      if (this.value <= 99) {
+        return `${this.value}ms`;
       }
       return `${this.value / 1000}s`;
     }

packages/style-value-parser/src/properties/__tests__/box-shadow.test.js

@@ -67,7 +67,7 @@ describe('Test CSS property: `box-shadow`', () => {
     );
   });
 
-  test('Multiple shadows seperated by comma', () => {
+  test('Multiple shadows separated by comma', () => {
     expect(
       BoxShadow.parse.parseToEnd(
         '10px 10px 5px 10px #000000 inset, 3px 3px 2px 0px #0ba266',
@@ -87,7 +87,7 @@ describe('Test CSS property: `box-shadow`', () => {
           new Px(3),
           new Px(2),
           new Px(0),
-          new HashColor('0ba266'),
+          new HashColor((0x0ba266).toString(16)),
         ),
       ]),
     );