Getting an Error when passing a defined variable to a stylex.create

[SKLC1]

Title; Compilation Error, with Stylex. Values allowed inside the stylex.create() function

Environment;
Operating System; Ubuntu 22.04 (WSL)
Next.js Version; 14.0.2
Stylex Version; 0.3.0
Webpack Version; (Included with Next.js)

Description;
I encountered an issue while trying to compile a Next.js project that uses Stylex for styling. The build process. Displays an error message stating that only static values can be used inside the stylex.create() function call. This problem occurs even though I followed the documentation, which instructs to define variables using stylex.defineVars() and use them within stylex.create().

like so:

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

export const staticColors = stylex.defineVars({
    colorsBaseBlack: "#000000",
    colorsBaseWhite: "#ffffff",
    colorsBlue100: "#d1e9ff",
    colorsBlue200: "#b2ddff",
    colorsBlue25: "#f5faff",
// ...
})

and used it like so:

import { staticColors } from "@/themes/static-colors.stylex";
import * as stylex from "@stylexjs/stylex";

export const styles = stylex.create({
    container: {
        display: "flex",
        padding: "0 24px",
        alignItems: "flex-start",
        gap: 8,
        alignSelf: "stretch",
    },
    title: {
        color: staticColors.colorsGray900,
        fontSize: "1.25rem",
        fontStyle: "normal",
        fontWeight: 600,
        lineHeight: 1.5,
    },
});

Steps to Reproduce;

1. Define CSS variables by utilizing stylex.defineVars() in a file called tokens.stylex.ts.
2. Import these variables and incorporate them within a stylex.create() call in a component.
3. Execute the build command to compile the project.

Expected Result;
The project should successfully compile, with Stylex processing the CSS variable definitions and applying them as intended.

Actual Result;
The build process encounters an error that states;

Failed to compile

./src/components/atoms/slideout menu header/style.stylex.ts
Error;
.../src/components/atoms/slideout menu header/style.stylex.ts; Only static values are allowed inside of a stylex.create() call.
 , at transformFile.next (<anonymous>)
  at run.next (<anonymous>)
  at transform.next (<anonymous>)

This error indicates that there might be dynamic values being passed to stylex.create() which is not supported.

Additional Information;
The Next.js configuration has been customized to utilize the @stylexjs/webpack plugin for StyleX.
Due to the issue, with Google Fonts and the Next.js StyleX plugin it was decided to use the Webpack plugin

Note: It is observed that the compilation works when stylex.create() is used with a function that returns the style object, as shown below:

export const styles = stylex.create({
    container: () => ({
        backgroundColor: staticColors.colorsBaseWhite,
    }),
});

However, this approach is contrary to the examples provided in the Stylex documentation where stylex.create() is directly given an object. The expected usage, as per the documentation, which is currently not working, is:

import * as stylex from '@stylexjs/stylex';
import { staticColors } from '../path/to/tokens.stylex';

const styles = stylex.create({
    container: {
        backgroundColor: staticColors.colorsBaseWhite,
    },
});

This inconsistency between the documentation and the actual working solution suggests a potential issue with the library's handling of variable definitions within stylex.create() calls.

Thanks for reviewing the issue, we are looking forward to use this in our app,
Samplead Team

[necolas]

Have you tried removing the stylex suffix from style.stylex.ts? That's only meant to be for files defining tokens AFAIK

[nmn]

As far as I can tell, this is an issue with the "@/themes/static-colors.stylex"; import syntax.

StyleX's Babel plugin uses require.resolve to determine file paths when importing variables. Next.js and typescript let you set up aliases separately from Node which causes this breakage.

[necolas]

I wonder why these tools haven't standardized on Node.js subpath imports instead
https://nodejs.org/api/packages.html#subpath-imports

Related issue: #40

[nmn]

Related Issues: #40 #63

[yonatan2703]

I wonder why it works when using dynamic styles like here:

export const styles = stylex.create({
    container: () => ({
        backgroundColor: staticColors.colorsBaseWhite,
    }),
});

But doesn't work when using static styles, If it's a compiler issue I would assume it wouldn't work in both situations
@nmn can you explain why there's a difference?

[mrlmark]

I wonder why it works when using dynamic styles like here:

export const styles = stylex.create({
    container: () => ({
        backgroundColor: staticColors.colorsBaseWhite,
    }),
});

But doesn't work when using static styles, If it's a compiler issue I would assume it wouldn't work in both situations @nmn can you explain why there's a difference?

Dynamic styles can't be compiled, that's why it works, the container function is executed at runtime.

[Jilesh980]

hi @necolas can i work on this, i can provide with better solution for this.
Thank you.

[nmn]

Note: functions generate "dynamic styles". I.e, it sets styles at runtime by setting inline styles. Excessive use of dynamic styles is a performance pitfall. It should definitely not be used for importing variable which can imported statically.

@Jilesh980 What changes do you propose?

[Jilesh980]

Hello @nmn i am working on to fix the issue which is getting on compilation so that better output is produced with CSS.

[nmn]

Yes, @Jilesh980 I'm asking about some basic details on how you're solving this issue. I don't want you to waste your time using an approach we cannot support.

[SKLC1]

As far as I can tell, this is an issue with the "@/themes/static-colors.stylex"; import syntax.

StyleX's Babel plugin uses require.resolve to determine file paths when importing variables. Next.js and typescript let you set up aliases separately from Node which causes this breakage.

changing this worked, thanks for clarifying 🚀

Have you tried removing the stylex suffix from style.stylex.ts? That's only meant to be for files defining tokens AFAIK

This didnt seem to have an effect, however we did change it to style.ts as stated in the docs

[nmn]

Closing this issue as we're already tracking the issue with NextJS aliases.