Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Variables not Working #39

Open
eduveks opened this issue Feb 8, 2024 · 10 comments
Open

Variables not Working #39

eduveks opened this issue Feb 8, 2024 · 10 comments

Comments

@eduveks
Copy link

eduveks commented Feb 8, 2024

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;
@HorusGoul
Copy link
Owner

Please share a repository that reproduces the issue.

@eduveks
Copy link
Author

eduveks commented Feb 23, 2024

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.

@RimanDk
Copy link

RimanDk commented Feb 26, 2024

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

@lffg
Copy link

lffg commented Mar 5, 2024

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

@lffg
Copy link

lffg commented Mar 5, 2024

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,
    }),
  ],
});

@BMCwebdev
Copy link

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

@DarkAng3L
Copy link
Contributor

DarkAng3L commented Apr 12, 2024

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

@dszmaj7
Copy link

dszmaj7 commented Apr 16, 2024

Vite cannot resolve paths when using index.ts exports.

obraz
obraz

This works:
obraz

This is not working:
obraz
obraz

vite.config
obraz

tsconfig
obraz

@DarkAng3L
Copy link
Contributor

DarkAng3L commented Apr 16, 2024

Vite cannot resolve paths when using index.ts exports.

obraz

@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

@athammer
Copy link

athammer commented Oct 20, 2024

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants