facebook · nmn · Dec 6, 2023 · Dec 6, 2023 · Dec 6, 2023 · Dec 6, 2023
diff --git a/.github/workflows/typos.yml b/.github/workflows/typos.yml
@@ -0,0 +1,15 @@
+name: Spell Check 
+on:
+  pull_request:
+  push:
+    branches:
+      - "main"
+jobs:
+  typos:
+    name: Spell Check with Typos
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Actions Repository
+        uses: actions/checkout@v4
+      - name: Check spelling
+        uses: crate-ci/typos@master
diff --git a/apps/docs/blog/2023-12-05-introducing-stylex.md b/apps/docs/blog/2023-12-05-introducing-stylex.md
@@ -120,7 +120,7 @@ extremely fast and the results are then memoized.
 
 ## The origins of StyleX
 
-The previous Facebook website used something akin to CSS modules and sufferred
+The previous Facebook website used something akin to CSS modules and suffered
 from various problems that inspired
 [the initial idea for CSS-in-JS](https://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html).
 The average visitor to [facebook.com](https://www.facebook.com/) would download

diff --git a/apps/docs/docs/api/configuration/eslint-plugin.mdx b/apps/docs/docs/api/configuration/eslint-plugin.mdx
@@ -39,7 +39,7 @@ type Options = {
 };
 
 type PropLimits = {
-  // The propery name as a string or a glob pattern
+  // The property name as a string or a glob pattern
   [propertyName: string]: {
     limit: 
       // Disallow the property

diff --git a/apps/docs/docs/api/types/StyleXStylesWithout.mdx b/apps/docs/docs/api/types/StyleXStylesWithout.mdx
@@ -17,7 +17,7 @@ import type {StyleXStylesWithout} from '@stylexjs/stylex';
 type Props = {
   // ...
   style?: StyleXStylesWithout<{
-    postion: unknown,
+    position: unknown,
     display: unknown,
     top: unknown,
     start: unknown,

diff --git a/apps/docs/docs/learn/02-thinking-in-stylex.mdx b/apps/docs/docs/learn/02-thinking-in-stylex.mdx
@@ -378,7 +378,7 @@ styling rules for a project.
 
 When dealing with a large amount of CSS, lazy-loading CSS is a way to speed up
 the initial load time of a page. However, it comes at the cost of slower
-update times, or the *Interation to Next Paint (INP)* metric. Lazy-loading
+update times, or the *Interaction to Next Paint (INP)* metric. Lazy-loading
 any CSS on a page triggers a recalculation of styles for the entire page.
 
 StyleX is optimized for generating a single, highly optimized, CSS bundle that

diff --git a/apps/docs/docs/learn/06-static-types.mdx b/apps/docs/docs/learn/06-static-types.mdx
@@ -199,7 +199,7 @@ import type {StyleXStylesWithout} from '@stylexjs/stylex';
 import * as stylex from '@stylexjs/stylex';
 
 type NoLayout = StyleXStylesWithout<{
-  postion: unknown,
+  position: unknown,
   display: unknown,
   top: unknown,
   start: unknown,
@@ -253,7 +253,7 @@ import type {StyleXStylesWithout} from '@stylexjs/stylex';
 import * as stylex from '@stylexjs/stylex';
 
 type NoLayout = StyleXStylesWithout<{
-  postion: mixed,
+  position: mixed,
   display: mixed,
   top: mixed,
   start: mixed,

diff --git a/apps/nextjs-example/app/globalTokens.stylex.ts b/apps/nextjs-example/app/globalTokens.stylex.ts
@@ -135,7 +135,7 @@ export const text = stylex.defineVars({
  * However, when talking about spacing, it is the best practice to
  * use `px` because using `rems` here makes font-size behave like zoom.
  *
- * Users that prefer larger text, don't neccessarily want larger spacing as well.
+ * Users that prefer larger text, don't necessarily want larger spacing as well.
  *
  */
 

diff --git a/packages/babel-plugin/README.md b/packages/babel-plugin/README.md
@@ -17,7 +17,7 @@ The StyleX Babel plugin does more than transform JavaScript (or Typescript) file
 An example of this can be seen in some of the tests, but the result of using Babel's `transform(...)` function returns an object contains at least two keys:
 
 1. `code` which is the transformed JS code
-2. `metadata` is an object of metatdata that the plugin may want to return as a side-effect.
+2. `metadata` is an object of metadata that the plugin may want to return as a side-effect.
 
 e.g.
 

diff --git a/packages/babel-plugin/__tests__/stylex-transform-call-test.js b/packages/babel-plugin/__tests__/stylex-transform-call-test.js
@@ -1252,7 +1252,7 @@ describe('@stylexjs/babel-plugin', () => {
         stylex.inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         export const styles = {
           sidebar: {
-            "UnkownFile__styles.sidebar": "UnkownFile__styles.sidebar",
+            "UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
             boxSizing: "x9f619",
             gridArea: "x1yc5d2u",
             gridRow: null,
@@ -1264,7 +1264,7 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           content: {
-            "UnkownFile__styles.content": "UnkownFile__styles.content",
+            "UnknownFile__styles.content": "UnknownFile__styles.content",
             gridArea: "x1fdo2jl",
             gridRow: null,
             gridRowStart: null,
@@ -1275,14 +1275,14 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           root: {
-            "UnkownFile__styles.root": "UnkownFile__styles.root",
+            "UnknownFile__styles.root": "UnknownFile__styles.root",
             display: "xrvj5dj",
             gridTemplateRows: "x7k18q3",
             gridTemplateAreas: "x5gp9wm",
             $$css: true
           },
           withSidebar: {
-            "UnkownFile__styles.withSidebar": "UnkownFile__styles.withSidebar",
+            "UnknownFile__styles.withSidebar": "UnknownFile__styles.withSidebar",
             gridTemplateColumns: "x1rkzygb",
             gridTemplateRows: "x7k18q3",
             gridTemplateAreas: "x17lh93j",
@@ -1292,14 +1292,14 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           noSidebar: {
-            "UnkownFile__styles.noSidebar": "UnkownFile__styles.noSidebar",
+            "UnknownFile__styles.noSidebar": "UnknownFile__styles.noSidebar",
             gridTemplateColumns: "x1mkdm3x",
             $$css: true
           }
         };
         ({
-          0: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4",
-          1: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x"
+          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"
         })[!!(sidebar == null) << 0];"
       `);
     });
@@ -1359,7 +1359,7 @@ describe('@stylexjs/babel-plugin', () => {
         stylex.inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         export const styles = {
           sidebar: {
-            "UnkownFile__styles.sidebar": "UnkownFile__styles.sidebar",
+            "UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
             boxSizing: "x9f619",
             gridArea: "x1yc5d2u",
             gridRow: null,
@@ -1371,7 +1371,7 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           content: {
-            "UnkownFile__styles.content": "UnkownFile__styles.content",
+            "UnknownFile__styles.content": "UnknownFile__styles.content",
             gridArea: "x1fdo2jl",
             gridRow: null,
             gridRowStart: null,
@@ -1382,14 +1382,14 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           root: {
-            "UnkownFile__styles.root": "UnkownFile__styles.root",
+            "UnknownFile__styles.root": "UnknownFile__styles.root",
             display: "xrvj5dj",
             gridTemplateRows: "x7k18q3",
             gridTemplateAreas: "x5gp9wm",
             $$css: true
           },
           withSidebar: {
-            "UnkownFile__styles.withSidebar": "UnkownFile__styles.withSidebar",
+            "UnknownFile__styles.withSidebar": "UnknownFile__styles.withSidebar",
             gridTemplateColumns: "x1rkzygb",
             gridTemplateRows: "x7k18q3",
             gridTemplateAreas: "x17lh93j",
@@ -1399,7 +1399,7 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           noSidebar: {
-            "UnkownFile__styles.noSidebar": "UnkownFile__styles.noSidebar",
+            "UnknownFile__styles.noSidebar": "UnknownFile__styles.noSidebar",
             gridTemplateColumns: "x1mkdm3x",
             $$css: true
           }
@@ -1464,14 +1464,14 @@ describe('@stylexjs/babel-plugin', () => {
         stylex.inject("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
         stylex.inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         const complex = {
-          0: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4",
-          4: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x",
-          2: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnkownFile__styles.sidebar x9f619 x1yc5d2u",
-          6: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x UnkownFile__styles.sidebar x9f619 x1yc5d2u",
-          1: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnkownFile__styles.content x1fdo2jl",
-          5: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x UnkownFile__styles.content x1fdo2jl",
-          3: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnkownFile__styles.sidebar x9f619 UnkownFile__styles.content x1fdo2jl",
-          7: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x UnkownFile__styles.sidebar x9f619 UnkownFile__styles.content x1fdo2jl"
+          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"
         }[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
       `);
     });

diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-test.js
@@ -82,7 +82,7 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
-    test('transforms style object with custom propety', () => {
+    test('transforms style object with custom property', () => {
       expect(
         transform(`
           import stylex from 'stylex';
@@ -98,7 +98,7 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
-    test('transforms style object with custom propety as value', () => {
+    test('transforms style object with custom property as value', () => {
       expect(
         transform(`
           import stylex from 'stylex';
@@ -288,7 +288,7 @@ describe('@stylexjs/babel-plugin', () => {
     });
 
     // Legacy, short?
-    test('tranforms valid shorthands', () => {
+    test('transforms valid shorthands', () => {
       expect(
         transform(`
            import stylex from 'stylex';

diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-vars-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-vars-test.js
@@ -396,7 +396,7 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
-    test('transforms variables objects with refrences to local variables', () => {
+    test('transforms variables objects with references to local variables', () => {
       expect(
         transform(
           `
@@ -434,7 +434,7 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
-    test('allows refrences to local variables with static values', () => {
+    test('allows references to local variables with static values', () => {
       expect(
         transform(
           `

diff --git a/packages/babel-plugin/__tests__/stylex-transform-override-vars-test.js b/packages/babel-plugin/__tests__/stylex-transform-override-vars-test.js
@@ -84,7 +84,7 @@ describe('@stylexjs/babel-plugin', () => {
       });
     `);
   });
-  test('ouput of stylex.defineVars()', () => {
+  test('output of stylex.defineVars()', () => {
     expect(defineVarsOutput).toMatchInlineSnapshot(`
       "import stylex from 'stylex';
       export const buttonTheme = {
@@ -313,7 +313,7 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
-    test('transforms variables objects with refrences to local variables', () => {
+    test('transforms variables objects with references to local variables', () => {
       expect(
         transform(
           `
@@ -354,7 +354,7 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
-    test('allows refrences to local variables with static values', () => {
+    test('allows references to local variables with static values', () => {
       expect(
         transform(
           `

diff --git a/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js b/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js
@@ -1223,7 +1223,7 @@ describe('@stylexjs/babel-plugin', () => {
         stylex.inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         export const styles = {
           sidebar: {
-            "UnkownFile__styles.sidebar": "UnkownFile__styles.sidebar",
+            "UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
             boxSizing: "x9f619",
             gridArea: "x1yc5d2u",
             gridRow: null,
@@ -1235,7 +1235,7 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           content: {
-            "UnkownFile__styles.content": "UnkownFile__styles.content",
+            "UnknownFile__styles.content": "UnknownFile__styles.content",
             gridArea: "x1fdo2jl",
             gridRow: null,
             gridRowStart: null,
@@ -1246,14 +1246,14 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           root: {
-            "UnkownFile__styles.root": "UnkownFile__styles.root",
+            "UnknownFile__styles.root": "UnknownFile__styles.root",
             display: "xrvj5dj",
             gridTemplateRows: "x7k18q3",
             gridTemplateAreas: "x5gp9wm",
             $$css: true
           },
           withSidebar: {
-            "UnkownFile__styles.withSidebar": "UnkownFile__styles.withSidebar",
+            "UnknownFile__styles.withSidebar": "UnknownFile__styles.withSidebar",
             gridTemplateColumns: "x1rkzygb",
             gridTemplateRows: "x7k18q3",
             gridTemplateAreas: "x17lh93j",
@@ -1263,17 +1263,17 @@ describe('@stylexjs/babel-plugin', () => {
             $$css: true
           },
           noSidebar: {
-            "UnkownFile__styles.noSidebar": "UnkownFile__styles.noSidebar",
+            "UnknownFile__styles.noSidebar": "UnknownFile__styles.noSidebar",
             gridTemplateColumns: "x1mkdm3x",
             $$css: true
           }
         };
         ({
           0: {
-            className: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
+            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
           },
           1: {
-            className: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x"
+            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
           }
         })[!!(sidebar == null) << 0];"
       `);
@@ -1336,28 +1336,28 @@ describe('@stylexjs/babel-plugin', () => {
         stylex.inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
         const complex = {
           0: {
-            className: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
+            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
           },
           4: {
-            className: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x"
+            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x"
           },
           2: {
-            className: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnkownFile__styles.sidebar x9f619 x1yc5d2u"
+            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 x1yc5d2u"
           },
           6: {
-            className: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x UnkownFile__styles.sidebar x9f619 x1yc5d2u"
+            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 x1yc5d2u"
           },
           1: {
-            className: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnkownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.content x1fdo2jl"
           },
           5: {
-            className: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x UnkownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.content x1fdo2jl"
           },
           3: {
-            className: "UnkownFile__styles.root xrvj5dj UnkownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnkownFile__styles.sidebar x9f619 UnkownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl"
           },
           7: {
-            className: "UnkownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnkownFile__styles.noSidebar x1mkdm3x UnkownFile__styles.sidebar x9f619 UnkownFile__styles.content x1fdo2jl"
+            className: "UnknownFile__styles.root xrvj5dj x7k18q3 x5gp9wm UnknownFile__styles.noSidebar x1mkdm3x UnknownFile__styles.sidebar x9f619 UnknownFile__styles.content x1fdo2jl"
           }
         }[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
       `);

diff --git a/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js b/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js
@@ -108,7 +108,7 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
-    test('calc() preserves spaces aroung "+" and "-"', () => {
+    test('calc() preserves spaces around "+" and "-"', () => {
       expect(
         transform(`
           import stylex from 'stylex';

diff --git a/packages/babel-plugin/src/index.js b/packages/babel-plugin/src/index.js
@@ -165,7 +165,7 @@ function isExported(path: null | NodePath<t.Node>): boolean {
  *
  * @param rules An array of CSS rules that has been generated and collected from all JS files
  * in a project
- * @returns A string that represets the final CSS file.
+ * @returns A string that represents the final CSS file.
  *
  * This function take an Array of CSS rules, de-duplicates them, sorts them priority and generates
  * a final CSS file.