Telemetry: Track StyleX as a styling package

[valentinpalkovic]

Closes #

What I did

We report Tailwind, Emotion and styled-components in the stylingPackages telemetry group today, but a project using StyleX reports nothing at all. StyleX is Meta's compiler-based CSS-in-JS library, and adoption has picked up noticeably lately (Linear and Cursor both migrated to it), so we are currently blind to it. This PR adds the detection, as the first step towards a StyleX recipe linked from @storybook/addon-themes.

The whole production change is one entry:

// code/core/src/shared/utils/ecosystem-identifier.ts
   'styled-components',
+  '@stylexjs/*',
   'bootstrap',

STYLING_PACKAGES has two consumers, so both pick StyleX up from that single entry:

package.json dependencies
        │
        └─► matchesPackagePattern(dep, STYLING_PACKAGES)
               │
               ├─► get-known-packages.ts        ──► telemetry `stylingPackages`
               └─► categorize-render-errors.ts  ──► "styling-related" error bucket

The second consumer is worth calling out explicitly: a preview render error whose stack touches @stylexjs/* is now categorized as styling-related. That is intentional, though. It is exactly the treatment every other entry in that list already gets.

Before and after, for the four @stylexjs packages a real StyleX project pulls in:

@stylexjs/stylex             before=false after=true
@stylexjs/postcss-plugin     before=false after=true
@stylexjs/babel-plugin       before=false after=true
@stylexjs/open-props         before=false after=true

And the resulting telemetry group, captured from analyzeEcosystemPackages against a StyleX-flavored package.json:

{
  "stylingPackages": {
    "@stylexjs/stylex": "^0.15.4",
    "@stylexjs/postcss-plugin": "^0.15.4",
    "@stylexjs/babel-plugin": "^0.15.4",
    "postcss": "^8.5.6"
  }
}

Why the scope glob, and nothing else

@stylexjs/stylex is the runtime that every StyleX project imports from, hence the scope glob alone already gives us complete adoption detection, and it picks up babel-plugin, postcss-plugin, nextjs-plugin and open-props for free.

I deliberately left out the third-party integrations (@stylexswc/*, vite-plugin-stylex). Projects using those still depend on @stylexjs/stylex, so we lose no adoption signal, only a bundler-integration detail we have no use for today. Happy to add them if we decide we want that breakdown, though.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

code/core/src/telemetry/get-known-packages.test.ts now asserts that both a runtime package and a plugin package land in stylingPackages, so the glob is covered in both shapes:

expect(result.stylingPackages).toEqual({
  emotion: '11.0.0',
  tailwindcss: '3.0.0',
  'styled-components': '6.0.0',
  '@stylexjs/stylex': '0.15.4',
  '@stylexjs/postcss-plugin': '0.15.4',
});

Manual testing

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Create a sandbox: yarn task sandbox --template react-vite/default-ts --start-from auto
2. cd ../storybook-sandboxes/react-vite-default-ts and add the StyleX runtime: yarn add @stylexjs/stylex
3. Start Storybook with telemetry logging enabled: STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
4. In the terminal, find the [telemetry] line and the JSON payload printed right after it
5. Confirm metadata.knownPackages.stylingPackages contains "@stylexjs/stylex". On next that entry is absent for the same project.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

No docs change here. This is internal instrumentation with no user-facing surface. The user-facing part is the StyleX recipe and the @storybook/addon-themes link, which will follow in a separate PR.

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 133ae7a7-f6b0-4c47-a5b4-b4f294d35eb5

📥 Commits

Reviewing files that changed from the base of the PR and between 8256cee and ca29597.

📒 Files selected for processing (2)

• code/core/src/shared/utils/ecosystem-identifier.ts
• code/core/src/telemetry/get-known-packages.test.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

Changes

StyleX package classification

Layer / File(s)	Summary
Styling-package pattern and test coverage code/core/src/shared/utils/ecosystem-identifier.ts, code/core/src/telemetry/get-known-packages.test.ts	STYLING_PACKAGES now matches @stylexjs/*. Telemetry tests include @stylexjs/stylex and @stylexjs/postcss-plugin with their versions.

Merge Risk: ⚪ Minimal · up to ca295

This localized change adds StyleX package detection to styling telemetry and error categorization, with unit-test coverage; no actionable merge-blocking risk remains beyond normal checks and review.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands.}