Goal is to publish, consume, and build an external dependency that uses stylex to author styling
This is not a monorepo, each folder is a separate thing. Use pnpm to install dependencies in each folder/package.
stylex-component-export is published to npm. It uses vite to build with a tsconfig scaffolded from pnpm create vite. It transpiles each file from src (stylex will need this for variable support, and we also want to support preserving directives for React Server Components) and does not apply the stylex plugin as it will rely on the consumer to do that. As such the babel file here is redundant. See evaluation for more details.
nextjs-stylex-import is scaffolded using pnpx create-next-app and stylex integration follows instructions from the stylex docs (adding babelrc and plugin to next config).
Stylex is still fairly new as a public package so things move quickly. I have added notes against specific versions, expect things to change.
Stylex version in packages will be updated so if you want a historical reference find the diff that bumped stylex version (I'll try to add tags when this happens).
- External dependencies can bundle css, but stylex works best when consumers build the css. ESM is not currently supported, this diff might fix that (or maybe some BABEL_ENV stuff).
- Dependencies using stylex also need to be included in NextJS transpile modules (possibly for the babel interop stuff).
- A custom babel config is required to enable the stylex plugin which disables SWC as a compiler for Next. This, in turn, invalidates some NextJS packages (next/font, probably server actions, probably more). This diff will likely fix this.
- Repo contains a babel config for
stylex-component-exportbut this is unnecessary. It is kept as we want to test building css for each package alongside exporting the JS only (consumer builds css).