facebook/stylex

This system is StyleX, a compile-time CSS-in-JS library that transforms JavaScript style definitions into optimized, atomic CSS classes during the build process. It provides a comprehensive ecosystem including a Babel plugin, a universal bundler plugin for tools like Vite and Webpack, and an ESLint plugin for validation. The project also includes a CLI for pre-compilation, a runtime for dynamic style injection, and a browser extension for debugging, all supported by extensive examples across various frontend frameworks.

33 changes.

The project underwent a significant structural overhaul by removing legacy packages, including the dev-runtime, Next.js plugin, and shared runtime utilities, alongside their associated test suites. This cleanup was accompanied by a migration to Yarn workspaces, an update to ESLint and Node.js configurations, and the addition of Flow type stubs to support the new tooling environment.

63 changes.

This period focused on releasing the universal @stylexjs/unplugin to standardize StyleX integration across major bundlers and introducing experimental nested design token APIs for complex theming. The work also included a major refactor of the style-value-parser to a token-based architecture and expanded runtime capabilities for dynamic style injection.

4 changes.

This period focused on expanding the StyleX ecosystem by introducing a new CLI for project scaffolding and a cross-browser DevTools extension. It also added support for SvelteKit and a new atomic styles package to enhance developer experience and framework compatibility.

The style-value-parser now includes support for parsing \border-radius\, \box-shadow\, and \transform\ CSS properties. This adds the ability to correctly parse shorthand border-radius values (including asymmetric radii with the slash syntax), multiple box-shadows with optional blur, spread, and inset keywords, and combined transform functions like matrix, rotate, and scale.

packages/style-value-parser/src/properties · high confidence

A new example application has been added to the examples/example-rollup directory, demonstrating how to integrate StyleX with a React project using Rollup as the build tool. This example includes the necessary configuration files (rollup.config.mjs, babel.config.mjs, eslint.config.cjs) and source code (src/App.js, src/index.js) to show users how to set up a basic development environment for styling React components with StyleX.

examples/example-rollup · high confidence

A new SvelteKit example project has been added to the repository, providing a complete starter template for users. This includes the necessary configuration files (svelte.config.js, vite.config.ts, tsconfig.json), a basic route structure with a counter page demonstrating Svelte 5 runes and StyleX for styling, and ESLint configuration supporting Svelte and TypeScript. The example serves as a reference implementation for integrating SvelteKit with the project's tooling.

examples/example-sveltekit · high confidence

Introduces a new example demonstrating how to integrate StyleX into a Waku application. The example includes configuration for the \@stylexjs/unplugin\ within the Vite layer, a custom client component to handle dev-only CSS injection and Hot Module Replacement (HMR) since Waku owns the root HTML shell, and ESLint rules for validating StyleX usage.

examples/example-waku · high confidence

The example-waku application now includes components (Header, Footer, Counter) and layout files that demonstrate the integration of StyleX for styling. The Counter component specifically showcases StyleX usage with shared UI tokens and components, while the Header and Footer utilize StyleX for responsive layout properties. A new DevStyleXInject component handles development-time CSS injection via a virtual module, and global styles are defined in a CSS file with a comment indicating where StyleX-generated CSS will be appended.

examples/example-waku/src/components · high confidence

The example-waku application now includes page components (index, about, and layout) that utilize @stylexjs/stylex for styling. Users can see how to integrate StyleX with the Waku framework, including layout structures, responsive design patterns, and component composition within a static rendering context.

examples/example-waku/src/pages · high confidence

A new example application demonstrates how to configure StyleX with Webpack using the \@stylexjs/unplugin\. The example includes a React setup with \MiniCssExtractPlugin\ for CSS extraction, ESLint rules for StyleX validation, and a Babel configuration that handles React/ES features while the unplugin manages StyleX compilation and CSS aggregation at build time.

examples/example-webpack · high confidence

New example projects demonstrating how to integrate StyleX with esbuild and Rspack via the \@stylexjs/unplugin\ bundler plugin. The esbuild example shows how to configure the plugin to extract styles at build time and append them to an existing CSS file, while the Rspack example demonstrates integration with \CssExtractRspackPlugin\ to merge generated CSS into the bundle. Both examples include ESLint configurations for StyleX rules and serve as reference implementations for users adopting these bundlers.

examples/example-esbuild · high confidence

The StyleX runtime now supports dynamic updates to CSS custom properties defined at compile time via the new \inject.js\ module. This module tracks dependencies between CSS rules and constants, allowing the runtime to automatically re-inject and update affected styles when a constant's value changes, enabling more dynamic styling scenarios without full recompilation.

packages/@stylexjs/stylex/src · high confidence

The shared-ui package now exports a Button component and a set of design tokens (primaryColor, secondaryColor, padding) using the StyleX library. This introduces a new, reusable UI element with built-in hover effects and theme-based styling, allowing consumers to import and use these components directly.

packages/shared-ui · high confidence

A new size benchmark has been added to measure the output bundle size of the StyleX compiler when handling dynamic styles. This includes a new fixture (\lotsOfStylesDynamic.js\) that exercises dynamic style creation with various CSS properties, and an updated benchmark runner (\run.js\) that calculates minified and Brotli-compressed sizes for the generated JavaScript and CSS. The benchmark suite has also been reorganized from the \apps\ directory into the \packages/benchmarks/size\ workspace.

packages/benchmarks/size · high confidence

A new example project at examples/example-vite demonstrates how to integrate StyleX into a Vite + React application using the @stylexjs/unplugin bundler plugin. The example includes a Vite configuration that enables StyleX transforms alongside React Fast Refresh, an ESLint configuration with StyleX-specific rules (valid-styles, no-unused, etc.), and a sample React application that utilizes StyleX for styling and shared UI components.

examples/example-vite · high confidence

The @stylexjs/babel-plugin now includes a browser-compatible bundle (lib/index.browser.js) built via Rollup, enabling usage in browser environments by stubbing Node.js modules and integrating with @babel/standalone. Additionally, the plugin exports a new processStylexRules function that allows users to collect CSS rules from Babel transformation metadata and generate final CSS output, supporting configuration options like useLayers for CSS @layer grouping and legacyDisableLayers for disabling specificity polyfills.

packages/@stylexjs/babel-plugin · high confidence

The example-nextjs components now showcase the experimental nested APIs for style tokens. A new Card component uses defineMarker() to enable ancestor-based hover animations, while the NestedDemo and CrossFileNestedDemo components demonstrate consuming tokens defined via unstable\_defineVarsNested, unstable\_defineConstsNested, and unstable\_createThemeNested across files. This provides a concrete reference for using nested token structures and custom markers in Next.js applications.

examples/example-nextjs/components · high confidence

This change introduces the new \@stylexjs/rollup-plugin\, a Rollup plugin that integrates the StyleX babel plugin into the build process. It transforms StyleX imports by leveraging \@babel/core\ and \lightningcss\ for CSS processing, automatically handling browser target resolution via \browserslist\. The plugin supports custom import sources, CSS layer configuration, and integrates with Rollup's asset emission to output the final CSS file.

packages/@stylexjs/rollup-plugin/src · high confidence

This release adds a new command-line interface (CLI) tool that allows you to pre-compile StyleX usage across a folder of files and generate a separate CSS bundle. The CLI supports specifying input and output directories, enabling a watch mode for automatic recompilation on file changes, and includes experimental support for compiling dependencies from node modules. It also features a caching mechanism to optimize build performance and allows for custom Babel presets and plugins to be passed through during the transformation process.

packages/@stylexjs/cli · high confidence

The new @stylexjs/postcss-plugin allows users to extract StyleX styles directly within a PostCSS build pipeline. By adding the @stylex directive to a CSS file, the plugin automatically discovers and compiles StyleX rules from JavaScript/TypeScript source files, supporting custom import sources, CSS layers, and auto-discovery of dependencies. This provides an alternative to the Babel plugin for integrating StyleX into PostCSS-based workflows.

packages/@stylexjs/postcss-plugin · high confidence

The new @stylexjs/unplugin package provides a universal bundler plugin for StyleX, supporting Vite, Rollup, Webpack, Rspack, esbuild, Bun, Farm, Rolldown, and Unloader. It compiles StyleX at build time, aggregates CSS from all transformed modules, and appends the result into an existing CSS asset produced by your bundler (or emits a stable fallback when none exists). The plugin includes dev helpers for hot CSS reloads via virtual modules and automatically discovers installed packages that depend on @stylexjs/stylex to ensure their StyleX code is transformed.

packages/@stylexjs/unplugin · high confidence

Users can now scaffold new StyleX projects using the \npx create-stylex-app\ command. This new CLI tool provides an interactive interface to select from a variety of pre-configured templates—including Next.js, Vite, Webpack, and others—and automatically sets up the project structure, fetches the necessary code from the StyleX repository, and installs dependencies. It also supports custom templates via GitHub URLs and allows users to skip dependency installation if needed.

packages/@stylexjs/create-stylex-app · high confidence

The new @stylexjs/atoms package provides compile-time helpers for authoring StyleX atomic styles using a namespaced object (e.g., x.display.flex) and call syntax for dynamic values (e.g., x.color(variable)). This location contributes the Babel transform logic (babel-transform.js) that converts these utility style expressions into compiled StyleX objects, along with the runtime proxy (index.js) that ensures these imports are stripped during compilation and throws if accessed at runtime. Static styles are resolved at compile time, while dynamic styles are handled via call expressions, enabling the same optimizations as standard stylex.create without introducing a new runtime styling system.

packages/@stylexjs/atoms · high confidence

Added a new example demonstrating React Server Components with React Router 7 and StyleX. The example uses the \@stylexjs/unplugin\ for CSS compilation and \@vitejs/plugin-rsc\ for the RSC runtime, featuring a Vite configuration that registers the StyleX plugin before the RSC plugin to ensure shared CSS between client and server bundles. It includes entry points for RSC, SSR, and browser hydration, along with a dev-only HMR listener that supports both the legacy \\_\router\ and new \\\_reactRouterDataRouter\ handles to ensure CSS updates trigger revalidation without full page reloads.

examples/example-react-router · high confidence

Added a new Storybook example in the \examples/example-storybook\ directory that demonstrates how to integrate StyleX with React components. This example includes configuration files for Babel, PostCSS, Vite, and ESLint to support StyleX's compile-time CSS generation, along with sample Button and Card components styled using StyleX. It also sets up Storybook with Vitest for testing stories, providing a complete reference for users to adopt StyleX in their own component documentation workflows.

examples/example-storybook · high confidence

Added a new example demonstrating how to layer \@vitejs/plugin-rsc\ on top of React while using \@stylexjs/unplugin\ to compile StyleX at build time. The example configures Vite with three environments (RSC, SSR, and client) and ensures that each RSC/SSR/client environment receives a single CSS asset with the aggregated StyleX output appended. It includes a \DevStyleXInject\ component to handle dev-only CSS/runtime injection and provides ESLint configuration for StyleX rules.

examples/example-vite-rsc · high confidence

Added a new example project in \examples/example-vite-react\ that demonstrates a TypeScript-ready React application using Vite and the \@stylexjs/unplugin\ bundler plugin. The setup configures Vite to compile StyleX styles at build time, aggregating them into a single CSS asset, and includes ESLint rules for StyleX validation. This serves as a reference implementation for integrating StyleX with the Vite ecosystem.

examples/example-vite-react · high confidence

The \examples/example-cli\ directory now contains a complete example application built with Next.js and StyleX. This example showcases modern StyleX patterns, including the use of \stylex.defineVars\ for global tokens (text, spacing, colors) and \stylex.createTheme\ for dynamic theming (CardThemes). It replaces the previous \apps/nextjs-example\ structure, moving components into a \source/app\ and \source/components\ layout, and updates the styling API usage from the legacy \className\ prop to the new \stylex.props\ spread syntax. The example also includes a \Counter\ component to demonstrate state-driven styling and keyframe animations.

examples/example-cli · high confidence

Added two new starter examples demonstrating how to integrate StyleX with different build tools using the new \@stylexjs/unplugin\. The Bun example (\examples/example-bun\) shows how to bundle a React app with Bun, using the esbuild adapter to compile StyleX at build time and aggregate styles into the emitted CSS asset. The RedwoodSDK example (\examples/example-redwoodsdk\) demonstrates integrating StyleX with RedwoodSDK's Vite-based toolchain for Cloudflare Workers, configuring the plugin for CSS-only dev mode and persisting rules to disk to support multiple Vite environments.

examples/example-redwoodsdk · high confidence

A new \tools/npm/release.js\ script has been added to streamline the release process for the monorepo. This tool automates updating version numbers across all workspace packages and their internal dependencies, handles yarn installation, and manages git commits for the release. It also includes logic to publish public packages to npm with the correct access flags, ensuring that scoped packages are published correctly while gracefully handling failures for individual packages without aborting the entire release.

tools/npm · high confidence

The StyleX Babel plugin now exports new utility functions in the \@stylexjs/babel-plugin/src/shared/when\ module to help construct complex CSS selectors based on the state of related elements. Specifically, \ancestor\, \descendant\, \siblingBefore\, \siblingAfter\, and \anySibling\ are available to generate \:where()\ clauses that observe pseudo-classes (like \:hover\ or \:focus\) or attribute selectors on ancestors, descendants, or siblings. These helpers validate that selectors start with \:\ or \\[\ and do not use pseudo-elements (\::\), allowing developers to conditionally style elements based on the interactive state of other parts of the DOM.

packages/@stylexjs/babel-plugin/src/shared/when · high confidence

The stylesheet module now supports runtime injection of CSS styles, enabling dynamic style management in the browser. This includes creating and managing CSS style sheets (including within Shadow DOM contexts), inserting rules in a specific order using group-based markers to ensure correct cascade precedence, and updating existing rules. A utility function also adds specificity levels to selectors to polyfill @layer behavior, ensuring styles apply correctly even when injected at runtime.

packages/@stylexjs/stylex/src/stylesheet · high confidence

The StyleX Babel plugin now exposes a \processStylexRules\ function in its public API, allowing users to manually process and generate CSS from collected rules. This function supports new configuration options including \useLayers\ (with \before\, \after\, and \prefix\ sub-options), \enableLTRRTLComments\, and \legacyDisableLayers\. The plugin's TypeScript definitions (\index.d.ts\) have been updated to reflect these new options and the \Rule\ type structure, which now includes \constKey\ and \constVal\ fields. Additionally, the plugin's internal logic for handling CSS layers and rule sorting has been adjusted to support these configurations.

packages/@stylexjs/babel-plugin/src · high confidence

The shared implementation for the StyleX Babel plugin has been reorganized and expanded to support new nested design token APIs. This change introduces \stylex.unstable\_defineVarsNested\, \stylex.unstable\_defineConstsNested\, and \stylex.unstable\_createThemeNested\, which allow users to define variables, constants, and themes using nested object structures that are automatically flattened for compilation. The update also adds the \stylex.positionTry\ API for anchor positioning fallbacks, a \stylexFirstThatWorks\ utility for CSS property fallbacks, and a \stylexDefaultMarker\ for default state handling. Under the hood, the plugin now uses a shared hashing mechanism (MurmurHash2) for stable class names and includes comprehensive type definitions and error messages for these new features.

packages/@stylexjs/babel-plugin/src/shared · high confidence

The StyleX DevTools extension is now available for Chrome, Firefox, and Safari, providing browser-specific capabilities such as source previews and navigation in Chrome, copy-only source locations in Firefox, and a full Web Inspector tab for Safari. The extension includes a dedicated build process that produces clean, browser-specific directories and adds comprehensive test coverage for the panel UI, browser adapters, and style collection logic.

packages/@stylexjs/devtools-extension · high confidence

The StyleX ESLint plugin has been moved to the @stylexjs package scope and restructured to expose a comprehensive set of linting rules. The plugin now includes \enforce-extension\ to enforce file extensions for \defineVars\, \defineConsts\, and \defineMarker\ exports; \no-conflicting-props\ to prevent using \className\ or \style\ alongside \stylex.props()\; \no-lookahead-selectors\ to flag unsupported \stylex.when\ selectors; and \no-legacy-contextual-styles\ to enforce modern media query and pseudo-class syntax. Additionally, \valid-styles\ and \valid-shorthands\ provide expanded validation and autofix capabilities for CSS properties, while \sort-keys\ and \no-unused\ help maintain consistent and clean style definitions.

packages/@stylexjs/eslint-plugin/src · high confidence

The Babel plugin now supports a suite of new StyleX APIs, including \stylex.defineConsts\, \stylex.defineMarker\, \stylex.defaultMarker\, \stylex.positionTry\, and \stylex.viewTransitionClass\. It also introduces experimental nested APIs (\unstable\_defineVarsNested\, \unstable\_defineConstsNested\, \unstable\_createThemeNested\) that allow for recursive variable references and nested theme overrides. Additionally, the plugin now handles imports from the \@stylexjs/atoms\ package and supports the \stylex.unstable\_conditional\ API for conditional styling.

packages/@stylexjs/babel-plugin/src/visitors · high confidence

The file \packages/shared/src/types/index.js\, which contained Flow type definitions and classes for CSS values (such as \Angle\, \Color\, \Url\, \Image\, \Integer\, \Length\, and \Percentage\), has been deleted. This removes the internal type system for CSS syntax validation from this location, likely as part of a migration away from Flow or a restructuring of how CSS types are handled in the shared package.

packages/shared/src/types · high confidence

The Babel plugin source files \babel-path-utils.js\, \babel-path-utils.d.ts\, \babel-path-utils.js.flow\, and \index.js\ have been removed from the \packages/babel-plugin/src\ directory. This deletion eliminates the internal path utility wrappers and the main plugin entry point that previously handled StyleX transformations, imports, and rule processing.

packages/babel-plugin/src · high confidence

The Babel plugin has removed several internal visitor files (\imports.js\, \stylex-create-theme.js\, \stylex-define-vars.js\, and \stylex-props.js\) from the \packages/babel-plugin/src/visitors\ directory. This change eliminates the internal logic responsible for parsing import declarations, transforming \stylex.createTheme\ and \stylex.defineVars\ calls, and handling \stylex.props\ optimizations, indicating a structural shift in how the plugin processes these specific stylex features.

packages/babel-plugin/src/visitors · high confidence

The \StyleXSheet\ class, which managed runtime CSS injection and theme handling, has been removed from the \packages/stylex/src\ directory. Additionally, the legacy Flow and TypeScript type definition files (\StyleXTypes.js\ and \StyleXTypes.d.ts\) have been deleted, indicating a shift away from the previous runtime type structures and stylesheet management approach.

packages/stylex/src · high confidence

The \packages/shared/src\ directory has been completely removed, eliminating the legacy runtime implementation and associated Flow type definitions. This deletion removes the core style compilation logic (including \stylex-create\, \stylex-define-vars\, \stylex-create-theme\, and \stylex-keyframes\), the CSS rule generation utilities (\convert-to-className\, \generate-css-rule\), the hashing mechanism (\hash.js\), and the public API entry point (\index.js\). Users relying on these shared internal modules for runtime style injection or type checking will no longer have access to these components in this package.

packages/shared/src · high confidence

The \packages/shared/src/utils\ directory has been removed, eliminating several internal utility modules including \Rule.js\ (which defined style rule classes), \default-options.js\ (which provided default configuration), \genCSSRule.js\ (which generated CSS selectors), \normalize-value.js\ (which processed CSS values), \object-utils.js\ (which provided object manipulation helpers), and \split-css-value.js\ (which parsed CSS values). This change removes these specific implementation details from the shared package.

packages/shared/src/utils · high confidence

The \isNumber.js\ rule file and the \stylex-valid-styles.js\ module have been removed from the ESLint plugin. This deletion eliminates the previous implementation for validating numeric values and the broader set of CSS style rules, indicating a structural change to how style validity is enforced within the plugin.

packages/eslint-plugin/src · high confidence

The \packages/shared/src/preprocess-rules\ directory has been removed, deleting the \PreRule.js\, \basic-validation.js\, and \index.js\ files. This eliminates the internal preprocessing logic responsible for validating style namespaces, handling conditional styles, and expanding shorthand properties (such as application-order and property-specificity resolutions) before CSS compilation.

packages/shared/src/preprocess-rules · high confidence

The \stylex-create\ visitor file has been deleted from the Babel plugin source code. This removes the logic responsible for transforming \stylex.create\ calls, including the handling of dynamic styles, keyframes, and dev/test mode class name injection.

packages/babel-plugin/src/visitors/stylex-create · high confidence

The @stylexjs/dev-runtime package has been deleted from the repository. This change removes the package entirely, including its source code, documentation, and benchmarking scripts, effectively eliminating the development-time runtime functionality for StyleX from this location.

packages/dev-runtime · high confidence

The Next.js plugin package has been deleted, removing the custom Webpack loader and plugin that previously processed StyleX imports in JavaScript/TypeScript files and emitted or appended CSS assets. Users relying on this plugin for StyleX integration in Next.js applications will no longer have this bundler-specific support available.

packages/nextjs-plugin/src · high confidence

The Webpack plugin source code has been deleted, removing the ability to process StyleX styles within Webpack builds. Users relying on this specific integration will no longer have StyleX transformations applied by Webpack.

packages/webpack-plugin/src · high confidence

The \packages/dev-runtime\ package has been deleted, removing the runtime module that previously monkey-patched the StyleX API to inject styles during development. This eliminates the \inject\ function and associated utilities like \defineVars\ and \createTheme\ that were used to patch the core library for development-time style insertion.

packages/dev-runtime/src · high confidence

The \packages/rollup-plugin/src/index.js\ file has been deleted, removing the previous Rollup plugin implementation that relied on \@babel/core\ and \@stylexjs/babel-plugin\ for CSS extraction. This change eliminates the specific build-time CSS generation logic previously provided by this module.

packages/rollup-plugin/src · high confidence

The \packages/open-props\ directory, which provided a comprehensive set of design tokens (including animations, colors, easings, fonts, gradients, layouts, masks, and shadows) via the \@stylexjs/stylex\ library, has been deleted. This change removes the associated source files and the corresponding compile-time snapshot tests, meaning these pre-defined style variables and animation utilities are no longer available for import.

packages/open-props · high confidence

The \webpack.config.js\ file has been deleted from the \apps/webpack-example\ directory. This removes the specific webpack setup that previously configured entry points, babel-loader for JavaScript processing, and the StylexPlugin for CSS generation, effectively stripping the example of its build configuration.

apps/webpack-example · high confidence

The utility functions responsible for normalizing CSS values—specifically \font-size-px-to-rem\, \timings\, \whitespace\, and \zero-dimensions\—have been removed from the shared package. This deletion eliminates the automatic conversion of pixel font sizes to rems, the normalization of timing units (e.g., milliseconds to seconds), whitespace standardization, and the stripping or standardization of units on zero values (e.g., converting \0px\ to \0\ or \0ms\ to \0s\).

packages/shared/src/utils/normalizers · high confidence

The \generate-ltr.js\ and \generate-rtl.js\ modules in \packages/shared/src/physical-rtl\ have been deleted. These utilities previously handled the conversion of logical CSS properties (such as \margin-start\, \text-align\, and \float\) to their physical equivalents (\left\/\right\) for LTR and RTL layouts respectively. With their removal, the system no longer performs this automatic polyfilling or transformation of logical CSS values.

packages/shared/src/physical-rtl · high confidence

The ESLint plugin's internal reference data has been reorganized to improve maintainability and clarity. CSS property ordering logic is now split into two distinct, named priority lists: \cleanOrderPriorities\ (based on stylelint-config-clean-order) and \recessOrderPriorities\ (based on stylelint-config-recess-order), allowing users or rules to choose a specific sorting convention. Additionally, the comprehensive list of supported CSS properties and their validation rules has been extracted into a new \cssProperties.js\ file, separating the schema definition from the rule logic. The \namedColors.js\ reference file was also moved to its new location within the \@stylexjs\ workspace scope.

packages/@stylexjs/eslint-plugin/src/reference · high confidence

A new pre-commit hook has been added to the tools/husky directory. When a commit is made, this hook automatically executes lint-staged via npx, allowing for staged file linting before the commit is finalized.

tools/husky · high confidence

This change introduces new Flow type stubs to improve type-checking coverage for third-party dependencies. Specifically, it adds definitions for Babel plugins (\@babel/plugin-syntax-typescript\, \@babel/plugin-transform-typescript\, \@babel/plugin-syntax-flow\, \@babel/plugin-syntax-jsx\, and \babel-plugin-syntax-hermes-parser\) and creates a stub for the \@chromatic-com/storybook\ package. These additions allow the codebase to perform static type analysis on these modules without requiring precise internal type definitions, reducing false positives in Flow checks.

flow-typed · high confidence

The style-value-parser has been restructured to consume tokens from the @csstools/css-tokenizer library instead of using character-based parsing. This introduces a new token-parser module with a TokenParser class that supports chaining operations like map, flatMap, and or, alongside a TokenList utility for managing token streams. The parser now exports token-based parsing capabilities for CSS properties such as transforms, box shadows, and border radii, providing a more robust and standardized foundation for parsing CSS values.

packages/style-value-parser/src · high confidence

The \Integer\ and \Num\ type classes in the shared types module now convert numeric inputs to strings when storing the value. Previously, passing a number like \1\ to \Integer.create()\ or \integer()\ would result in a numeric value; it now returns the string \'1'\. This behavioral change ensures that all CSS type values are consistently represented as strings, aligning with CSS syntax requirements.

packages/@stylexjs/babel-plugin/src/shared/types · high confidence

The \@stylexjs/eslint-plugin\ package now includes a comprehensive README detailing its rules (\valid-styles\, \sort-keys\, \valid-shorthands\, \enforce-extension\, \no-unused\, \no-legacy-contextual-styles\) and their configuration options. Notably, the \sort-keys\ rule now supports an \enableMediaQueryOrder\ option to preserve authored media query order when StyleX's corresponding feature is enabled, and all rules support a \validImports\ configuration to specify allowed import sources. The package structure has also been reorganized into the \@stylexjs\ workspace namespace.

packages/@stylexjs/eslint-plugin · high confidence

The \packages/@stylexjs/eslint-plugin/src/utils\ directory has been restructured to support enhanced CSS shorthand validation and improved code formatting. New utility functions have been added to handle import tracking (\createImportTracker\), AST evaluation (\evaluate\), and property name resolution (\getPropertyName\, \resolveKey\). The plugin now includes logic to format properties with correct indentation (\formatPropertiesWithNodeIndentation\, \getNodeIndentation\) and to determine property priority and type for sorting (\getPropertyPriorityAndType\). A significant addition is the \splitShorthands.js\ module, which provides comprehensive parsing and expansion for CSS shorthand properties (such as border, flex, grid, and animation) using the \postcss-value-parser\ and \@csstools/css-tokenizer\ libraries. Several existing utilities were renamed or moved to align with the new \@stylexjs\ package namespace.

packages/@stylexjs/eslint-plugin/src/utils · high confidence

The type definitions in \packages/@stylexjs/stylex/src/types\ have been significantly updated to support newer CSS features and improve type safety. New CSS properties and values are now recognized, including \positionTry\ and \viewTransitionClass\ for anchor positioning and view transitions, \cornerShape\ for border styling, and \flow-root\ and \-webkit-box\ for display modes. The type system now enforces opaque types for \StyleXVar\ and \StyleXClassName\ to prevent accidental misuse, and \StyleXStyles\ has been extended to accept \StyleXMarker\ for passing styles between component boundaries. Additionally, legacy CSS properties like \boxFlex\ and \boxOrdinalGroup\ now accept string values, and \fontWeight\ supports string and number types for better compatibility.

packages/@stylexjs/stylex/src/types · high confidence

The \stylex-valid-styles\ ESLint rule now enforces stricter validation for several CSS value types. It introduces dedicated checks for absolute length units (px, mm, in, pc, pt) and relative length units (including viewport units like vh/vw and container query units like cqmin/cqmax), ensuring values end in the correct suffix. Number validation has been improved to support local \const\ variables, unary minus, numeric binary operators (+, -, \*, /), and standard \Math\ functions (abs, ceil, floor, round). Additionally, the rule now accepts \stylex.env\ member expressions (e.g., \stylex.env.responsive.belowSmall\) as valid object keys, allowing dynamic media query keys, and supports \positionTry\ function calls in template literals for CSS position-try fallbacks.

packages/@stylexjs/eslint-plugin/src/rules · high confidence

The style-value-parser's media query handling has been significantly enhanced to support more complex CSS media queries. It now correctly processes 'not' and 'only' keywords, parses inequality operators (like \< and \>) for width and height, and supports calc() expressions within media query values. Additionally, the parser normalizes media queries by combining nested negations and adjusting epsilon values for max-width comparisons to avoid rounding issues in Chromium browsers.

packages/style-value-parser/src/at-queries · high confidence

The project has switched its package manager from npm to Yarn, requiring developers to use \yarn install\ and \yarn workspace\ commands instead of npm equivalents. The ESLint configuration has been updated to support TypeScript files via \@typescript-eslint/parser\, added the \headers\ plugin for copyright enforcement, and updated the React version setting to 18.0. Additionally, the \.nvmrc\ file now specifies Node.js version 22, and the Flow configuration has been adjusted to map internal packages under the \@stylexjs\ scope.

(repo-wide) · high confidence

The Babel plugin now includes new normalizers that convert font sizes from px to rem, remove leading zeros from decimal numbers, and shorten timing values from milliseconds to seconds (for values ≥10ms). It also standardizes whitespace around functions and commas, and enforces consistent zero-unit formatting (e.g., 0deg, 0s, 0fr, 0%) while stripping units for other zero values. Additionally, the plugin now detects and throws an error for unclosed strings in style definitions.

packages/@stylexjs/babel-plugin/src/shared/utils/normalizers · high confidence

The Next.js example has been updated to demonstrate StyleX's experimental nested design-token APIs (unstable\_defineVarsNested, unstable\_defineConstsNested, and unstable\_createThemeNested) and runtime theming. The app now features a dark-mode toggle and a color theme picker (Red, Green, Blue) that dynamically re-skins the UI using StyleX themes. It also includes dedicated demo routes (/nested-demo and /ds-demo) that showcase the three-tier token architecture (Primitives → Semantics → Themes) and cross-file token resolution, alongside a new ESLint configuration for StyleX linting rules.

examples/example-nextjs · high confidence

The Babel plugin's shared utility functions have been reorganized into the \@stylexjs/babel-plugin\ package, introducing new modules for rule representation (\Rule.js\), CSS generation (\generate-css-rule.js\), and value normalization (\normalize-value.js\). This refactor enhances how CSS values are processed: \content\ properties are now robustly quoted by detecting CSS functions and keywords rather than relying on simple string matching, and unitless number properties (such as \fontSizeAdjust\, \zoom\, and various grid properties) are correctly handled without appending 'px'. Additionally, the plugin now supports \stylex.when\ selectors with increased specificity and applies a 'last media query wins' behavior to ensure correct CSS cascade order.

packages/@stylexjs/babel-plugin/src/shared/utils · high confidence

The shared package now exports explicit priority constants for pseudo-classes, at-rules, and pseudo-elements, replacing the previous internal \PRIORITIES\ object. This change introduces a new \getCompoundPseudoPriority\ function to correctly calculate specificity for compound selectors (e.g., \:hover:focus\), ensuring accurate cascade resolution. Additionally, support for the new \corner-shape\ CSS property and its longhands has been added to the shorthand expansion logic, and border-color/style/width properties have been correctly categorized into physical rather than logical hand sets.

packages/@stylexjs/shared · high confidence

The RTL transformation logic in the Babel plugin has been restructured into dedicated \generate-ltr.js\ and \generate-rtl.js\ modules. This change introduces support for polyfilling logical inline properties (such as \margin-inline-start\, \border-inline-end\, and \inset-inline-start\) to their physical equivalents (\left\/\right\) when the \legacy-expand-shorthands\ style resolution is enabled. It also adds explicit handling for logical \float\ and \clear\ values, and implements legacy value flipping for \cursor\, \box-shadow\, and \text-shadow\ properties, controlled by the \enableLegacyValueFlipping\ option.

packages/@stylexjs/babel-plugin/src/shared/physical-rtl · high confidence

The \evaluate-path.js\ and \state-manager.js\ files have been removed from the Babel plugin's utility directory. This eliminates the custom static code evaluation engine (previously used to evaluate imports and theme references at compile time) and the centralized state management class that tracked import paths, style maps, and module resolution logic. Users relying on the previous internal mechanisms for static evaluation or specific module resolution behaviors will see these capabilities removed, as the plugin now likely handles these concerns through different internal structures or updated dependencies.

packages/babel-plugin/src/utils · high confidence

The \packages/scripts\ directory has been reorganized into a \flow-translator\ subdirectory, consolidating utilities for converting Flow types to TypeScript definitions. This change introduces several behavioral improvements for developers: the type generation script now handles Windows line endings to prevent translation errors, adds support for translating \$ReadOnlySet\ types alongside \$ReadOnlyMap\, and updates console output messages. Additionally, the import rewriting script now recursively processes nested directories instead of only flat structures, correctly preserves directory hierarchies in output, and fixes a syntax issue in the \stylex.js\ export statement.

packages/scripts · high confidence

The preprocess-rules module has been reorganized into the @stylexjs/babel-plugin package, introducing new PreRule and validation logic that tracks key paths for better error reporting. The plugin now supports the new corner-shape shorthand property and its variants (e.g., cornerTopLeftShape) in the application-order expansion mode. Additionally, the legacy-expand-shorthands mode has been updated to correctly expand inset, margin, and padding properties using logical CSS naming (e.g., marginInlineStart instead of marginStart) and to handle containIntrinsicSize and list-style shorthands more robustly.

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules · high confidence

The utility layer of the StyleX Babel plugin has been reorganized under the \@stylexjs\ workspace, introducing new modules for AST manipulation (\ast-helpers\), static code evaluation (\evaluate-path\), and configuration validation (\validate\). A key behavioral change is the replacement of the custom \canBeIdentifier()\ check with Babel's native \isValidIdentifier()\ in \js-to-ast\, ensuring consistent identifier generation. The static evaluator has been hardened to prevent prototype-chain escape attacks by blocking access to \constructor\, \\_\proto\\_\, and \prototype\ properties, as well as restricting global method calls to a strict allowlist. Additionally, the plugin now supports custom debug file paths via the \debugFilePath\ option and improves sourcemap data injection for better debugging visibility.

packages/@stylexjs/babel-plugin/src/utils · high confidence

The @stylexjs/stylex package now includes explicit build configuration files (.babelrc.js, rollup.config.mjs, jest.config.js) to standardize compilation and testing, alongside updated documentation (README.md) that clarifies the API usage for style creation and property application. These changes support improved tree-shakability and consistent module output formats (ESM/CJS) for consumers.

packages/@stylexjs/stylex · medium confidence

The project's Flow type definitions have been refreshed to align with Flow v0.289 and modern syntax standards. This update introduces comprehensive type stubs for browser environments (BOM, CSSOM, DOM, HTML, JSX) and Node.js, covering modern APIs such as Gamepad, Permissions, Web Share, and Streams. Additionally, stubs for several @babel packages (cli, eslint-parser, node, preset-env, preset-flow, preset-react, preset-typescript) have been regenerated to target Flow v0.267.0, ensuring type-checking compatibility with the updated toolchain.

flow-typed/environments, flow-typed/npm/@babel · high confidence

Add performance benchmarks for stylex.create and stylex.createTheme transforms; Added Flow type tests for stylex.create, contextual styles, and theming; Added TypeScript type tests for StyleX API surface; Added benchmark suite for CSS token parser performance; Added comprehensive tests for CSS type parsers in style-value-parser; Added legacy-mode test suite for the StyleX Babel plugin; Added tests for StyleX runtime sheet management and constant injection; Added tests for media query parsing, transformation, and validation; Added tests for nested defineVars, defineConsts, and createTheme transforms; Added tests for the StyleX Rollup plugin; Added tests for the TokenParser module; Added unit tests for style-to-class-name conversion and value transformation; Expanded test coverage for StyleX ESLint plugin rules; Removal of Babel plugin test suite; Removal of Flow type tests for stylex.create; Removal of Webpack plugin test suite and fixtures; Removal of stylex-valid-styles test suite; Removed dev-runtime test suite; Removed legacy border shorthand test file; Removed legacy test suite for stylex core functions; Removed rollup-plugin integration tests; Removed test suite for theme import evaluation; Removed tests for StyleXSheet.

Added Flow type definitions for the @csstools/css-tokenizer library (v3.x.x), enabling static type checking for CSS tokenization utilities such as token cloning, type assertions, and hash token handling within the project.

flow-typed/npm/@csstools · high confidence

This update adds new Flow type definition stubs for a wide range of npm packages used in the project, including ansis, autoprefixer, babel-loader, benchmark, brotli-size, clean-css, codemirror, cross-env, css-loader, esbuild, fast-glob, file-loader, html-webpack-plugin, husky, jest, and others. These stubs provide basic module declarations to support Flow type checking for these libraries, with most using generic 'any' exports while a few (like clsx, colors, and js-yaml) include more specific type definitions.

flow-typed/npm · high confidence

The StyleX monorepo has been released as version 0.19.1, upgrading all core packages (including \@stylexjs/stylex\, \@stylexjs/babel-plugin\, \@stylexjs/unplugin\, and \@stylexjs/cli\) to this version. This release adds new example applications for Bun, Rspack, and Storybook, while removing the legacy \apps/\ directory and the deprecated \@stylexjs/nextjs-plugin\ and \@stylexjs/dev-runtime\ packages. Several dependencies have been updated, including \next\ to 16.3.3, \svelte\ to 5.55.7, \@sveltejs/kit\ to 2.60.1, \vite\ to 7.3.2, and \storybook\ to 9.1.19.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 59 → 58 (-0.7)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 59 → 62 (+3.2)
• Architecture 95 → 96 (+0.5)
• Maturity 70 → 66 (-4.1)
• Readiness 53 → 49 (-4.1)
• Security 61 → 67 (+6.4)
• Accessibility 78 → 78 (+0.0)
• Performance 73 (new)

• Coverage not measured — JavaScript/TypeScript suite
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no project overview (README.md)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High: security finding (details withheld)
• Medium CVE: [GHSA redacted] (yarn.lock)
• …and 7 more

• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical vulnerability: [GHSA redacted] (yarn.lock)
• Documentation: no usage examples (README.md)
• High CVE: [CVE redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High: security finding (details withheld)
• Hotspot: packages/@stylexjs/babel-plugin/src/index.js (packages/@stylexjs/babel-plugin/src/index.js)
• Hotspot: packages/@stylexjs/unplugin/src/vite.js (packages/@stylexjs/unplugin/src/vite.js)
• Medium CVE: [GHSA redacted] (yarn.lock)
• Medium CVE: [GHSA redacted] (yarn.lock)
• …and 56 more

• 38 commits — 25 feature/other, 13 fixes

• packages/@stylexjs — 20 commits
• (root) — 9 commits
• packages/style-value-parser — 4 commits
• packages/docs — 2 commits
• .github/workflows — 1 commit
• examples/example-react-router — 1 commit
• examples/example-redwoodsdk — 1 commit

• fix: Fix Inset.toString() shortest-form serialization (#1744)
• fix: Fix StyleX CSS injection for Rspack unplugin (#1745)
• fix: Fix double-negation of negative numbers in value parsers (#1746)
• fix: Fix length validators wrongly accepting comma-prefixed values (#1741)
• fix: Fix two correctness bugs in style-value-parser (shorthand hex + border-radius) (#1742)
• fix: Fix zero-unit stripping inside functions after the first (#1750)
• fix: [babel-plugin] Fix corrupted class names from null coercion in dynamic styles (#1731)
• fix: [babel-plugin] Fix positionTry emitting every declaration twice (#1850)
• fix: [style-value-parser] Fix BorderRadiusShorthand.toString dropping vertical radii (#1759)
• fix: fix(babel-plugin): insert constant values verbatim, not as replace patterns (#1872)
• fix: fix(docs): avoid inline-flex on heading anchor links (#1899)
• fix: fix(unplugin): do not let Vite dev polling timer keep the process alive (#1846)
• fix: fix: stylex.attrs doesn't work with dynamic styles when using multi-word properties (#1711)
• change: Accept Marker type in StyleXStyles for passing between component prop boundaries (#1820)
• change: Allow stylex.env member expressions as valid styles keys (#1809)
• change: Bump @hono/node-server from 1.19.14 to 1.19.17 (#1807)
• change: Bump devalue from 5.8.1 to 5.9.2 (#1895)
• change: Bump fast-uri from 3.1.2 to 3.1.7 (#1837)
• change: Bump hono from 4.12.26 to 4.13.8 (#1864)
• change: Bump http-proxy-middleware from 2.0.9 to 2.0.10 (#1751)
• …and 18 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

facebook/stylex was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.