Cannot import VarGroup using an alias defined only in TS.

[GensIto]

Describe the feature request

Hello,

I am currently working on creating a custom UI library using @stylexjs/stylex in a Vite project. However, I am encountering an issue when trying to use values defined with stylex.defineVars in stylex.create().

Here's the error message I receive during the build process:

✓ 5 modules transformed.
[vite-plugin-stylex] /privateWorkspace/vite-react/src/components/Button/styles.ts: Only static values are allowed inside of a stylex.create() call.
file: /Users/itougenta/Desktop/workspace/privateWorkspace/vite-react/src/components/Button/styles.ts
error during build:
This error suggests that only static values are allowed inside of a stylex.create() call. However, I am using values that I've defined with stylex.defineVars, and I expected them to be treated as static.

Could you please help me understand why this issue is occurring and suggest any possible solutions? I've double-checked my setup and code, but I can't seem to resolve this issue.

Thank you for your assistance.

Best regards,

[olivierpascal]

Where did you use stylex.defineVars()?

[GensIto]

@olivierpascal
thanks
I used src/styles/color.stylex.ts

import stylex from "@stylexjs/stylex";

export const colors = stylex.defineVars({
  primary: "black",
  secondary: "#333",
  accent: "blue",
  white: "white",
  black: "black",
  gray: "#333",
  lightGray: "#666",
  darkGray: "#222",
  red: "red",
  green: "green",
});

src/ui/Button.tsx

import stylex from "@stylexjs/stylex";
import { colors } from "@/styles/color.stylex";

export const styles = stylex.create({
  button: {
    color: colors.white,  // <- this
    fontSize: "1rem",
    padding: "1rem",
    backgroundColor: "black",
    border: "none",
    borderRadius: "0.25rem",
    cursor: "pointer",
    filter: {
      default: "drop-shadow(0 0 2em #646cffaa)",
      ":hover": "drop-shadow(0 0 2em #61dafbaa)",
    },
  },
});

errors occur when used in this way

[nmn]

The problem is that you're using an alias to import the variables. Replace "@/styles/color.stylex"; with a relative import to fix the problem.

You should also be able to configure StyleX with the aliases option to resolve these aliases for you. For now, the configuration needs absolute file paths. See the nextjs example in the repo for an example of how to do this.

[GensIto]

@nmn
I use vite as a build tool but it does not work well. Can you tell me how to fix this?

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import styleX from "vite-plugin-stylex";

export default defineConfig({
  plugins: [react(), styleX()],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "index",
      fileName: "index",
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

[olivierpascal]

I think you should use the aliases option of stylex:

styleX({
  aliases: {
    '@/*': [path.join(__dirname, 'src', '*')],
  },
})

See:

stylex/apps/docs/docs/api/configuration/babel-plugin.mdx

Lines 127 to 135 in c974210

	### `aliases`
	```ts
	aliases: {[key: string]: string | Array<string>} // Default: undefined
	```
	`aliases` option allows you to alias project directories to absolute paths, making it easier to import modules.
	Example: `'@/components/*': [path.join(__dirname, './src/components/*')]`

[GensIto]

@olivierpascal
Thank you, that went well😊