Transpilation StyleX code with @stylexjs/postcss-plugin

[Dwlad90]

Hi @nmn,

While adapting @stylexjs/postcss-plugin to work with swc-plugin, I discovered that it needs to transpile application code with @stylexjs/babel-plugin / swc-plugin twice:

1. Once during the project build by NextJS to transpile the JavaScript code
2. Once to extract the styles by postcss-plugin

I'd like to confirm if this is the expected behavior and whether it's correct that @stylexjs/babel-plugin transpiles each file twice.

Reproduction Steps

I've created reproduction repositories to demonstrate this behavior:

Scenario 1: Without babel-plugin

If I remove @stylexjs/babel-plugin from apps/nextjs-example/babel.config.js and keep only @stylexjs/postcss-plugin, I get this error:

Collecting page data  ..Error: 'stylex.defineVars' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'
    at errorForFn (/workspace/stylex/apps/nextjs-example/.next/server/chunks/691.js:1:106111)
    at Object.stylexDefineVars (/workspace/stylex/apps/nextjs-example/.next/server/chunks/691.js:1:106865)
    at 1142 (/workspace/stylex/apps/nextjs-example/.next/server/chunks/212.js:1:1582)
    at __webpack_require__ (/workspace/stylex/apps/nextjs-example/.next/server/webpack-runtime.js:1:145)
    at 5375 (/workspace/stylex/apps/nextjs-example/.next/server/chunks/212.js:1:6118)
    at Function.__webpack_require__ (/workspace/stylex/apps/nextjs-example/.next/server/webpack-runtime.js:1:145)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/workspace/stylex/apps/nextjs-example/node_modules/next/dist/build/utils.js:883:17)
    at async /workspace/stylex/apps/nextjs-example/node_modules/next/dist/build/utils.js:1094:17
    at async Span.traceAsyncFn (/workspace/stylex/apps/nextjs-example/node_modules/next/dist/trace/trace.js:105:20)

> Build error occurred
Error: Failed to collect page data for /_not-found
    at /workspace/stylex/apps/nextjs-example/node_modules/next/dist/build/utils.js:1211:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  .npm ERR! Lifecycle script `build` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: [email protected]
npm ERR!   at location: /workspace/stylex/apps/nextjs-example

Repository: https://github.com/Dwlad90/stylex/tree/next-postcss-plugin

To reproduce:

npm install && \
npm run build -w next-example

Scenario 2: Without postcss-plugin

If I remove @stylexjs/postcss-plugin from apps/nextjs-example/postcss.config.js and keep only @stylexjs/babel-plugin, the application builds successfully but styles aren't extracted.

Repository: https://github.com/Dwlad90/stylex/tree/next-postcss-plugin-v2

To reproduce:

npm install && \
npm run build -w next-example && \
npm run start -w next-example

Thanks for your help!

[javascripter]

Yes, this is the expected behavior. To avoid having to integrate deeply with each bundler:

1. Source code is transpiled by StyleX Babel Plugin using normal babel.config.js (without actually collecting metadata)
2. PostCSS is used to extract CSS as a separate step using StyleX Babel Plugin (compiling source code again and collecting metadata).

Step 1 and 2 do not share data, resulting in double compilation.

The overview of the plugin's approach is described here:
facebook/react-strict-dom#236 (comment)

[Dwlad90]

Thanks for the clarification, now it seems more justified.