Share theming variables in a (turbo) monorepo

[tilnea]

Hi,

I'm working in a turborepo, and I have a file theme.stylex.ts that has a lot of theme variables looking similar this

export const baseColors = defineVars({
  "coal-100": "#FAFAFA",
  "coal-200": "#E4E4E4",
  "coal-300": "#D4D4D8",
  "green-100": "#E8F4F4",
  "green-200": "#D0E4E2",
  "green-300": "#B2D4D0",
  "neutral-400": "#B7BABD",
  "salmon-700": "#D23434",
});

I'm exporting it from my ui package like this

"exports": {
    ".": "./index.ts",
    "./global.css": "./src/global.css",
    "./theme": "./src/shared/theme.stylex.ts"
 }

I'm using Vite in my projects, and my vite.config.js looks something like this

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import styleX from 'vite-plugin-stylex';

import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    react(),
    styleX({
      aliases: {
        '@repo/ui': '@repo/ui',
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue']
  },
  server: {
    port: 8080
  }
})

Creating and working with StyleX in this project works fine, but when I try to import my baseColors I get this error

[plugin:vite-plugin-stylex] StyleX Error: path/src/components/border/Border.styles.jsx: Only static values are allowed inside of a stylex.create() call.
  1 | import * as stylex from "@stylexjs/stylex";
  2 | import { theme } from "@repo/ui/theme";
> 3 | export const styles = stylex.create({
    |                       ^
  4 |   border: {
  5 |     border: "1px solid red",
  6 |     color: baseColors["coal-100"]
  
💡 If you're importing StyleX tokens or styles from another file using aliases, make sure to define those in your Vite config or in the StyleX Plugin options.

Any idea how I can get it to work?

[nmn]

The setup can be made to work, but the alias setup for StyleX needs to resolve to absolute file paths.

Specifically, in your Vite Config, you'd need something like this:

styleX({
  aliases: {
    '@repo/ui': path.join(fileURLToPath(new URL('./src', import.meta.url)), 'packages/ui')
  }
}),

When using the theming APIs, StyleX needs to resolve the actual file path where defineVars is used for it to work correctly.

---

If this doesn't work, please share a repro project so I can help further. Also make sure to try both Vite plugins (vite-plugin-stylex-dev being the other one).

[tilnea]

It did not work for me, but I created a repo for you to play with :)

https://github.com/tilnea/stylex-turbo-demo

I know its a weird setup, having react in vue and such, but I thought its best to just make it as close to the real reop as possible, where we are starting to convert parts to react bit by bit :)

Its this config and here you can see the path.

Thanks ✨

[nonzzz]

Let me explain why your project can't run well. The current community integration solutions don't consider the case of mono repo. so they can't do as well as. But i clone the repo and use my plugin stylex-extend/vite and put the config in following code. every things works well now :D

npm install @stylex-extend/vite -D

// vite.config.js


import { stylex } from '@stylex-extend/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    ..., // your plugins
    stylex({ importSources: ['@repo/ui'] })
  ]
})

and i changed import { theme } from '../../../../../packages/ui/src/shared/theme.stylex' as import { theme } from '@repo/ui/theme' and set import 'virtual:stylex.css' in main.js every ting work well

@tilnea I think you can have a try (Maybe helpful)

[nonzzz]

Some integrated help for developers:

• Evaluate all path alias or module resolve as possible as in your bundle tool (Dependency on styleX may not work)

• Respect workspace root (for plug-in developer)

Here are some code snippets where i solved this prolem (I hope it can helps other developers)

// Note: for rollup/vite

const rewriteImportStmts = async (code: string, id: string, ctx: RollupPluginContext, plugins: BabelParserPlugins = []) => {
    const stmts = parseStmts(code, id, plugins)
    let i = 0
    for (const stmt of stmts) {
      const { n } = stmt
      if (n) {
        if (isPotentialCSSFile(n)) { continue }
        if (path.isAbsolute(n) || n[0] === '.') {
          continue
        }
        // respect the import sources
        if (!options.importSources?.some((i) => n.includes(typeof i === 'string' ? i : i.from))) {
          continue
        }

        const resolved = await ctx.resolve(n, id)
        if (resolved && resolved.id && !resolved.external) {
          if (resolved.id === id) {
            continue
          }
          if (!resolved.id.includes('node_modules')) {
            const p = './' + normalizePath(path.relative(path.dirname(id), resolved.id).replace(/\.\w+$/, ''))
            const start = stmt.s + i
            const end = stmt.e + i
            code = code.slice(0, start) + p + code.slice(end)
            i += p.length - (end - start)
          }
        }
      }
    }
    return code
  }