Non-static styles error with vite-plugin-stylex

[arunnan]

Created tokens.stylex.ts as below.

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

const DARK = "@media (prefers-color-scheme: dark)";

export const colors = stylex.defineVars({ 
    primary: {default: '#fff', [DARK]: '#000'},
    primaryDark: {default: '#ccc', [DARK]: '#333'},
    bg: {default: '#fff', [DARK]: '#000'},
    white: {default: '#fff', [DARK]: '#000'},
    black: {default: '#000', [DARK]: '#fff'}
})

and Buttons.tsx as below

import * as stylex from '@stylexjs/stylex';
import { ComponentProps } from "react";
import { colors } from 'src/components/tokens.stylex';

type ButtonProps = {
    variant?: "primary",
    children?: React.ReactNode,
    styles?: stylex.StyleXStyles,
} & ComponentProps<"button">

const baseStyle = {
    borderWidth: '1px',
    borderStyle: 'solid',
    color: colors.white,
    borderRadius: '5px',
    cursor: 'pointer',
    padding: '10px 15px'
};

const s = stylex.create({
    base: baseStyle,
    primary: {
        borderColor: {
            default: colors.primary
        },
        color: {
            default: colors.black
        },
        backgroundColor: {
            default: colors.primary,
            ':hover': colors.primaryDark,
            ':focus': colors.primaryDark,
            ':active': colors.primaryDark,
        },
    }
});

const Button = ({ variant = "primary", styles, ...props }: ButtonProps) => (
    <button {...stylex.props(s.base, s[variant], styles)} {...props} />
);

export default Button;

I am getting the below error

[plugin:vite-plugin-stylex] C:\Users\Arun\Documents\GitHub\black\packages\frontend\src\components\buttons\Button.tsx: Only static values are allowed inside of a stylex.create() call.

Kindly suggest a fix.

[nmn]

The problem is with the import:

import { colors } from 'src/components/tokens.stylex';

You need to use relative paths to actual file. StyleX doesn't know about aliases set up in the tsconfig.

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

We're already working to add support for aliases to StyleX.

---

Why is baseStyles defined as a separate constant object?

[arunnan]

I have used the relative path, still it is not working. Below is my Vite config file.

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

export default defineConfig({
  plugins: [react({
    babel: {
      plugins: [
        "styled-jsx/babel"
      ],
      }
    }), stylex()],
  resolve: {
    alias: {
      src: "/src",
    },
  },
})

[nmn]

@arunnan vite-plugin-stylex seems to be passing the correct configuration to the Babel plugin. Can you try updating all your dependencies?

Also, can you try putting the stylex() plugin before the other plugins in your Vite config?

[arunnan]

@nmn I've updated all my dependencies and moved stylex() before all the plugins, but I'm still facing the issue.

[nmn]

@arunnan It might also be useful to:

1. Try the other Vite plugin for StyleX (see: https://stylexjs.com/docs/learn/ecosystem/#vite)
2. Create an issue for vite-plugin-stylex

Other than that, share more details about your build setup if you want more help.
I don't have enough context about your project to help any further.

[nonzzz]

I'll explain why you can't make it works. Currently vite-plugin-stylex support for path alias just replaces the resolve option passed in by the user But the rollup process logic is resolveId then load then transform and then repeat the cycle, But the transformed result might not be relative path.(So you may meet this error). Therefore plugin should handle those logic by manually. Full details see patch-aliases. This file will handle all of path alias to relative path.