HorusGoul / vite-plugin-stylex

Vite Plugin for StyleX
MIT License
116 stars 12 forks source link

Monorepo with Stylex styles defined in a package fail to build #75

Closed kennetpostigo closed 1 month ago

kennetpostigo commented 4 months ago

Hi, I'm using this plugin in a vite app in my monorepo.

The monorepo has apps folder and packages folder.

Inside of packages I have two packages of interest design-system and ui. The design-system package defines global static styles and themes. The ui package consumes those themes from the design system and also exports react components that use stylex.create(...).

Inside of the apps folder there is a documentation folder that consumes design-system and ui but also uses stylex for styling.

Here is my vite config:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import mdx from '@mdx-js/rollup';
import styleX from 'vite-plugin-stylex';
import { TanStackRouterVite } from '@tanstack/router-vite-plugin';
import webfontDownload from 'vite-plugin-webfont-dl';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    webfontDownload([...]),
    TanStackRouterVite(),
    { enforce: 'pre', ...mdx() },
    react({ include: /\.(mdx|md|tsx|ts)$/ }),
    styleX({
      libraries: ['@mono/design-system', '@mono/ui'],
    }),
  ],
});

I get this error in console:

[vite] Internal server error: StyleX Error: mono/packages/ui/src/Text.tsx: Only static values are allowed 
inside of a stylex.create() call.

💡 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.

  Plugin: vite-plugin-stylex
  File: mono/packages/ui/src/Text.tsx

I've added the libraries to the stylex({...}) call in the vite.config.ts but it still isn't happy with it. Can someone help me figure out why the stylex plugin may be unhappy with the libraries?

Note that design-system and ui packages don't build the code at all they don't have a build step.