StyleX styles not being applied on first Vercel deployment

[badjub1es]

Summary

Hello!

I am experiencing an interesting issue where on initial production deploy the CSS files for StyleX are not being built properly. Though on re-deploy, they are built properly and the styles are applied. Any insight would be appreciated!

Some notes

• Able to reproduce this on every deploy
• Takes place for manually triggered deploys as well as automatic deploys
• CSS file output when CSS is not applied correctly
  • /_next/static/css/290aab9f1ae88124.css 480 B
  • /_next/static/css/ba44253b25b56036.css 2.57 kB
• CSS file output when CSS is applied correctly (on re-deploy)
  • /_next/static/css/ba44253b25b56036.css 2.57 kB
  • /_next/static/css/e0ccbf7f3f4fd65e.css 2.25 kB

next.config.js

const path = require('path');
const stylexPlugin = require('@stylexjs/nextjs-plugin');

module.exports = stylexPlugin({
  aliases: {
    '@/*': [path.join(__dirname, '*')],
  },
  rootDir: __dirname,
})({});

babel.config.js

const styleXPlugin = require('@stylexjs/babel-plugin')

module.exports = {
  plugins: [
    [
      styleXPlugin,
      {
        dev: true,
        // Set this to true for snapshot testing
        // default: false
        test: false,
        // Required for CSS variable support
        unstable_moduleResolution: {
          // type: 'commonJS' | 'haste'
          // default: 'commonJS'
          type: 'commonJS',
          // The absolute path to the root directory of your project
          rootDir: __dirname,
        },
      },
    ],
  ],
};

.babelrc.js

const path = require('path');
module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      // See all options in the babel plugin configuration docs:
      // https://stylexjs.com/docs/api/configuration/babel-plugin/
      {
        dev: process.env.NODE_ENV === 'development',
        genConditionalClasses: true,
        treeshakeCompensation: true,
        aliases: {
          '@/*': [path.join(__dirname, '*')],
        },
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: path.join(__dirname, '../..'),
        },
      },
    ],
  ],
};

Additional information

No response

Example

No response

[badjub1es]

Was able to resolve this issue by ensuring that deployments built without cache enabled. This was done by setting an environment variable for my application: https://vercel.com/docs/deployments/troubleshoot-a-build#managing-build-cache