create() and createTheme() break when building

[Sparkmasterflex]

We've been developing with this plugin, vite, react and stylex for a few weeks and basically only using storybook for development. Now we're at the point where we're configuring our project to be published as a package and when we run vite build we get the error Only static values are allowed inside of a stylex.create() call

The workaround we found for places where it's actually pointing to stylex.create({}) was to just make everything a function.

  const styles = stylex.create({
    root: () => ({ ...  }),

    viewport: () => ({ ... }),

    title: () => ({ ... })
  })

This is a bit annoying but NBD. The problem that we can't work around is that it gets upset with this same error when we call stylex.createTheme() and there's little to go on for tracking down a workaround or the actual issue.

theme.ts

  import { createTheme } from '@stylexjs/stylex'
  import { colors } from '@theme/tokens.stylex'

  const DARK = '@media (prefers-color-scheme: dark)'

  export const realgeeks = createTheme(colors, {
    defaultText: { default: colors.gray120, [DARK]: '#FCFCFD' },
    secondaryText: { default: colors.gray100, [DARK]: '#F6F7F9' },
    accent: { default: colors.blue120, [DARK]: '#96C9FF' },
  })

We've tried doing string values for defaults but same issue.

import * as stylex from '@stylexjs/stylex'

export const colors = stylex.defineVars({
  defaultText: '',
  secondaryText: '',
  accent: '',
  blue120: '#...',
  gray100: '#...',
  gray120: '#...',
})

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import styleX from 'vite-plugin-stylex'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default defineConfig({
  plugins: [
    react(), 
    styleX(),
    cssInjectedByJsPlugin(),
  ],
  server: {
    port: 3301,
  },

  resolve: { ... },
  build: {
    cssCodeSplit: true,
    lib: { ... },
    outDir: './dist',
    emptyOutDir: true,
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        assetFileNames: 'assets/[name][extname]',
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        }
      }
    }
  }
})

package versions

"@stylexjs/dev-runtime": "^0.4.1",
"@stylexjs/stylex": "^0.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.6.10",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"vite-plugin-stylex": "^0.5.0"
"vite-plugin-css-injected-by-js": "^3.3.1"

[HorusGoul]

Please share a repository that reproduces the issue.

[Sparkmasterflex]

I'm currently seeing it on a company repo that I can't share but in the AM I'll make a public repo and try to reproduce there.

[Sparkmasterflex]

Here's the repo. I confirmed that with the setup if I run npm run build it gives me that error as I'm seeing in my other repo

https://github.com/Sparkmasterflex/stylex-theme-issue

also if you change this key/value from a function to normal object and adjust usage accordingly it'll also error out on the same error.

[HorusGoul]

Ok it seems like either the plugin or stylex aren't handling the aliases the right way. I'm going to check what can be done from my side.