vite-plugin-stylex

vite-plugin-stylex copied to clipboard

Hi,

It is impossible to use variables because when using variables raises the error:

[plugin:vite-plugin-stylex] /index.stylex.js: Only static values are allowed inside of a stylex.create() call.

My tokens.stylex.js:

import * as stylex from '@stylexjs/stylex';
export const colors = stylex.defineVars({
  primary: { default: '#F8B420' }
});

Using the colors.primary variable:

import * as stylex from '@stylexjs/stylex';

import { colors } from '../../styles/tokens.stylex';

const styles = stylex.create({
  content: {
    color: colors.primary,
  }
});

export default styles;

Please share a repository that reproduces the issue.

Here is an example: https://github.com/netuno-org/cluar/tree/main/website

Then there is a StyleX basic implementation here: https://github.com/netuno-org/cluar/tree/main/website/src/base/Cookies

The LESS file is unused.

With this, if you try to use variables, the error will occur.

You probably can't run the code directly because you need some injections created when the backend starts.

But you should replicate the error using the same package.json and vite.config.js.

I remember testing with NodeJS using PNPM and NPM, the error also occurred.

Finally, this project is now with BUN, Vite/SWC, and I installed with PNPM.

I'm seeing the same error on an nx-driven vite project built with regular npm on Node.

I am having the same problem, but only when the file is imported using an vite-tsconfig-paths alias.

I am having the same problem, but only when the file is imported using an vite-tsconfig-paths alias.

Which can be solved by using StyleX's aliases setting. (See https://github.com/facebook/stylex/issues/426) E.g. configuration:

import * as path from "node:path";
import tsconfig from "./tsconfig.json";
// ...

const stylexAliases = Object.fromEntries(
  Object.entries(tsconfig.compilerOptions.paths).map(([alias, paths]) => [
    alias,
    paths.map((p) => path.resolve(import.meta.dirname, p)),
  ])
);

export default defineConfig({
  plugins: [
    tsconfigPaths(),
    styleX({
      aliases: stylexAliases,
    }),
  ],
});

I think the stylex.js files are supposed to only have definevars in them, not create

I am having the same problem, but only when the file is imported using an vite-tsconfig-paths alias.

Which can be solved by using StyleX's aliases setting. (See facebook/stylex#426) E.g. configuration:

import * as path from "node:path";
import tsconfig from "./tsconfig.json";
// ...

const stylexAliases = Object.fromEntries(
  Object.entries(tsconfig.compilerOptions.paths).map(([alias, paths]) => [
    alias,
    paths.map((p) => path.resolve(import.meta.dirname, p)),
  ])
);

export default defineConfig({
  plugins: [
    tsconfigPaths(),
    styleX({
      aliases: stylexAliases,
    }),
  ],
});

This does seem to solve the problem, but on mac this is not needed, which tells me this might still actually be an issue if aliases is required only for windows (which uses \ as path separator instead of /) instead of just getting the same aliases from tsconfig.compilerOptions.paths, like it seems to do on mac..

Vite cannot resolve paths when using index.ts exports.

This works:

This is not working:

vite.config

tsconfig

Vite cannot resolve paths when using index.ts exports.

@dszmaj7 , judging by your error above, that does not look like a vite import error for "styles/index.ts" file, since it detects the re-exported file ".../...stylex.ts" in the error. It looks like a StyleX error detecting that what is imported and used in stylex.create() is not from a static import file, like xyz.stylex.ts which is required for it to know to parse the files when compiling the static vars.

You would get the same error when importing spacings.ts from @/styles/spacings instead of re-exporting everything in a "barrel export" index.ts file.

Please see rules for when importing variables: https://stylexjs.com/docs/learn/theming/using-variables/#rules-when-using-variables

On a mac and tried the tsconfig config solution with no luck. I am also using vite-tsconfig-paths. As a work around I'm simply directly linking to the file and that seems to work. Not using barrel files and directly importing a named export form a tokens.stylex.ts file.

This workaround is fine for now, but when I have time I'll try to come back and see if I can reproduce it in a blank repo.

Versions are

"@stylexjs/stylex": "^0.8.0",
"vite": "^5.4.1",
"vite-plugin-stylex": "^0.12.0",
"vite-tsconfig-paths": "^5.0.1"