facebook · nmn · Nov 23, 2025 · Nov 23, 2025
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.8",
-    "@babel/eslint-parser": "^7.26.8",
+    "@babel/eslint-parser": "^7.28.5",
     "@babel/plugin-syntax-flow": "^7.26.0",
     "@babel/preset-env": "^7.26.8",
     "@babel/preset-flow": "^7.25.9",

@@ -79,6 +79,8 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
     // Persist rules to disk in dev to bridge multiple plugin containers/processes.
     // Off by default; enable if your dev setup runs separate Node processes per environment.
     devPersistToDisk = false,
+    // Skip import-source detection and always run the transform
+    skipImportCheck = false,
     // Dev integration mode: 'full' (runtime + html), 'css-only' (serve CSS endpoint only), 'off'
     devMode = 'full',
     ...stylexOptions
@@ -253,7 +255,7 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
       // Only handle JS-like files; avoid parsing CSS/JSON/etc
       const JS_LIKE_RE = /\.[cm]?[jt]sx?(\?|$)/;
       if (!JS_LIKE_RE.test(id)) return null;
-      if (!shouldHandle(code)) return null;
+      if (!skipImportCheck && !shouldHandle(code)) return null;
       const result = await runBabelTransform(code, id, '@stylexjs/unplugin');
       const { metadata } = result;
       if (!stylexOptions.runtimeInjection) {

@@ -32,6 +32,8 @@ applications, reusable component libraries, and statically typed codebases.
 4. StyleX is fully typed and provides type utilities to allow fine-grained
    control over what properties and values can be accepted by a component.
 
+{/* truncate */}
+
 ## What are the advantages of StyleX?
 
 ### Fast

@@ -25,6 +25,8 @@ fixing bugs and making improvements. Here are some of the highlights:
 - Bundler plugins will now skip files that don't contain StyleX, resulting in
   faster build times.
 
+{/* truncate */}
+
 ## Bug Fixes
 
 - Fixed a bug where the ESLint plugin was sometimes unable to resolve local

@@ -21,6 +21,8 @@ We are introducing a new `attrs` function so StyleX works well in more
 places. `attrs` returns an object with a `class` string and a `style`
 string.
 
+{/* truncate */}
+
 ## New `sort-keys` rule for the Eslint plugin
 
 A new `@stylexjs/sort-keys` plugin has been introduced which will sort styles

@@ -25,6 +25,8 @@ You can now provide a fallback value for variables defined with the `defineVars`
 This new capability does not introduce any new API. Instead, the existing `firstThatWorks` API
 now supports variables as arguments.
 
+{/* truncate */}
+
 ```tsx
 import * as stylex from '@stylexjs/stylex';
 import {colors} from './tokens.stylex';

@@ -31,6 +31,8 @@ We are excited to offer this alternative to the bundler-based setup and are
 choosing to release the CLI in an experimental state. We would love to hear
 your feedback on how it works for you and what improvements you would like to see.
 
+{/* truncate */}
+
 Special thanks to [Joel Austin](https://github.com/Jta26) for his work on the CLI.
 
 

@@ -12,4 +12,6 @@ tags:
 ---
 
 StyleX v0.7.3 is now available with a fix to the Rollup plugin, which
-didn't previously include all the necessary files in the publish to NPM.
+didn't previously include all the necessary files in the publish to NPM.
+
+{/* truncate */}
@@ -26,6 +26,8 @@ This rule enforces our opinions on when and how you should use CSS shorthand pro
 It disallows the use of multi-value shorthands for shorthands, and disallows certain
 properties altogether.
 
+{/* truncate */}
+
 ```tsx
 const styles = stylex({
   invalidShorthands: {

@@ -29,6 +29,8 @@ on the same element, *the last applied theme wins*, just as you might expect.
 However, previously, if you instead applied one theme on a parent element,
 and another theme on a child element, the themes would end up being merged.
 
+{/* truncate */}
+
 ```tsx
 // tokens.stylex.ts
 import * as stylex from '@stylexjs/stylex';

@@ -37,6 +37,8 @@ correctly highlight the location of the source code causing the error.
 
 The StyleX ESLint plugin now ships with a new `no-unused` rule that detects unused styles. (Thanks [Samantha-Zhan](https://github.com/Samantha-Zhan/))
 
+{/* truncate */}
+
 ### Other improvements
 
 The `valid-styles` rule now offers more auto-fixes, and a small bug was fixed in the `valid-shorthands` rule.

@@ -23,3 +23,5 @@ tags:
 - Replaced `crypto` with `murmurhash` for CLI caching 
 - Fixed a bug where the `import resolve` function would not respect the Windows system (Thanks [nonzzz](https://github.com/nonzzz))
 - Fixed a bug where the `initial-value` in `@Property` was invalid
+
+{/* truncate */}
@@ -17,6 +17,8 @@ tags:
 
 StyleX v0.11.0 is now available, with significant improvements in debugging, CLI caching, and documentation!
 
+{/* truncate */}
+
 import Dial from '../components/Dial';
 
 <Dial />

@@ -30,6 +30,8 @@ Compiling `createTheme` calls is now several orders of magnitude faster. This wa
 
 A new rule has been added to the StyleX ESLint plugin to flag uses of the deprecated media query and pseudo-class syntax. This rule flags usage of the legacy media query and pseudo-class syntax that wraps multiple property values inside a single `@`-rule or pseudo-class block. This pattern is deprecated and should be replaced with the updated syntax [here](https://stylexjs.com/docs/learn/styling-ui/defining-styles/#media-queries-and-other--rules). (Thanks [vincentriemer](https://github.com/vincentriemer)!)
 
+{/* truncate */}
+
 ## Bug fixes
 
 ### Styling pseudo-elements in dynamic styles

@@ -75,6 +75,8 @@ const styles = stylex.create({
 });
 ```
 
+{/* truncate */}
+
 ## Breaking changes
 
 * The `attrs` API is removed due to low usage and redundant functionality; non-React users can replace it with a wrapper around `props` as documented [here](https://stylexjs.com/docs/api/javascript/props/#not-using-react).

@@ -44,6 +44,8 @@ const transitionClass = stylex.viewTransitionClass({
 </ViewTransition>
 ```
 
+{/* truncate */}
+
 ### Linter: `validImports`
 
 The `@stylexjs/eslint-plugin` package now supports the `validImports` option for all rules, allowing you to configure where the linter expects StyleX to be imported from. This is equivalent to the [`importSources`](https://stylexjs.com/docs/api/configuration/babel-plugin/#importsources) option for the compiler. Thanks to [@javascripter](https://github.com/javascripter) for this improvement.

@@ -52,6 +52,8 @@ const styles = stylex.create({
 
 This new feature is gated behind the config option `enableMediaQueryOrder`.
 
+{/* truncate */}
+
 ## Dynamic styles improvements
 
 Dynamic styles should now work more consistently when given the same values as static styles. Improvements have been made to how we handle `null` and `undefined` values.

@@ -39,6 +39,9 @@ const styles = stylex.create({
 </div>
 ```
 
+{/* truncate */}
+
+
 Note: Lookahead selectors like `stylex.when.siblingAfter`, `stylex.when.anySibling`, and `stylex.when.descendant` rely on the CSS `has()` selector, which does not yet have [widespread browser support](https://caniuse.com/css-has).
 
 ## `defineConsts` improvements

@@ -9,6 +9,10 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
+const path = require('path');
+const stylexPlugin = require('@stylexjs/unplugin').default;
+const { themes: prismThemes } = require('prism-react-renderer');
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'StyleX',
@@ -17,7 +21,12 @@ const config = {
   baseUrl: '/',
   trailingSlash: true,
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  markdown: {
+    hooks: {
+      onBrokenMarkdownLinks: 'warn',
+    },
+  },
+
   favicon: 'img/favicon.svg',
 
   // GitHub pages deployment config.
@@ -53,9 +62,12 @@ const config = {
         disableSwitch: false,
         respectPrefersColorScheme: true,
       },
+
       prism: {
-        theme: require('prism-react-renderer/themes/dracula'),
+        theme: prismThemes.dracula,
+        darkTheme: prismThemes.dracula,
       },
+
       algolia: {
         // The application ID provided by Algolia
         // eslint-disable-next-line no-useless-concat
@@ -206,4 +218,40 @@ const config = {
     },
 };
 
+const rootDir = path.join(__dirname, '../..');
+
+config.plugins = [
+  function stylexUnplugin() {
+    return {
+      name: 'stylex-unplugin',
+      configureWebpack(_config, isServer) {
+        const isProd = process.env.NODE_ENV === 'production';
+        if (isServer || !isProd) return {};
+        return {
+          plugins: [
+            stylexPlugin.webpack({
+              enforce: 'post',
+              dev: !isProd,
+              runtimeInjection: !isProd,
+              stylexSheetName: '<>',
+              cssInjectionTarget: (fileName) =>
+                /assets\/css\/styles/i.test(fileName),
+              transformInclude: (id) =>
+                /\.(c|m)?(j|t)sx?($|\?)/i.test(id) || /\.mdx($|\?)/i.test(id),
+              devPersistToDisk: true,
+              unstable_moduleResolution: {
+                type: 'commonJS',
+                rootDir,
+              },
+              babelConfig: {
+                presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+              },
+            }),
+          ],
+        };
+      },
+    };
+  },
+];
+
 module.exports = config;
@@ -3,31 +3,32 @@
   "name": "docs",
   "version": "0.17.0",
   "scripts": {
-    "build": "rimraf ./build ./docusaurus && cross-env NODE_ENV=production docusaurus build && node ./scripts/make-stylex-sheet.js",
+    "build": "rimraf ./build ./.docusaurus && cross-env NODE_ENV=production docusaurus build",
     "clear": "docusaurus clear",
     "lint": "eslint --cache \"**/*.js\" && stylelint \"**/*.css\"",
     "serve": "docusaurus serve",
     "start": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.1",
-    "@docusaurus/preset-classic": "2.4.1",
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2",
     "@fortawesome/fontawesome-free": "^6.7.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^3.0.1",
     "@stylexjs/stylex": "0.17.0",
     "@webcontainer/api": "^1.3.0",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.16",
-    "react": "^17.0.2",
-    "react-codemirror2": "^7.3.0",
-    "react-dom": "^17.0.2",
-    "react-syntax-highlighter": "^15.6.1"
+    "react": "^19.2.0",
+    "react-codemirror2": "^9.0.1",
+    "react-dom": "^19.2.0",
+    "react-syntax-highlighter": "^16.1.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.26.8",
+    "@babel/eslint-parser": "^7.28.5",
+    "@stylexjs/unplugin": "0.17.0",
     "@stylexjs/eslint-plugin": "0.17.0",
     "@stylexjs/babel-plugin": "0.17.0",
     "clean-css": "^5.3.2",
@@ -36,8 +37,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "mkdirp": "^1.0.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "stylelint": "^14.9.1"
   },
   "browserslist": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,6 +75,8 @@ const styles = stylex.create({ @@
     });
     ```
+    {/* truncate */}
     ## Breaking changes
     * The `attrs` API is removed due to low usage and redundant functionality; non-React users can replace it with a wrapper around `props` as documented [here](https://stylexjs.com/docs/api/javascript/props/#not-using-react).
@@ Expand Down @@