Importing a .stylex.ts does not work with tsconfig paths settings

[ethanjdiamond]

trafficstars

The problem When importing a variable file like is listed in the docs, the build is only succeeding if the import path is a relative path (i.e. ../src/lib/theme/theme.stylex), but fails if the import path uses the tsconfig "paths" setting (i.e. @/lib/theme/theme.stylex when tsconfig paths is { '@/*' : '.src/*'} ).

With non-relative paths, it gives the Only static values are allowed inside of a stylex.create() call error message.

How to reproduce

Steps to reproduce:

1. Create a next.js app with the default of paths: { '@/*' : '.src/*'} in the tsconfig.json file.
2. Create a file called theme.stylex.ts in /src/lib/ that defines a color using export const colors = stylex.defineVars({test: '#000000'})
3. Try to import the colors using import { colors } from @/lib/theme.stylex and use colors.test in a stylex.create call.

Expected behavior I would expect this to allow colors to be used in stylex.create as specified in the docs.

Environment (include versions). Did this work in previous versions?

• next 14.0.2 using an app router
• @stylexjs/stylex - 0.3.0
• @stylexjs/nextjs-plugin - 0.3.0

[rayan1810]

If this support is not deliberately excluded, I would like to work on a PR to add this feature. @necolas

[nmn]

The StyleX Babel plugin relies on the require.resolve function to determine the absolute file path of the module being imported. If aliases are setup in a way that Node would understand, they would work. e.g. mono-repos.

@rayan1810 Happy for accept your contribution to solve this problem! Please start by describing an outline of how you would solve it. Here's the relevant code: https://github.com/facebook/stylex/blob/48e6d169db176a5d704401213aa79fc023612687/packages/babel-plugin/src/utils/state-manager.js#L169

[rayan1810]

I just did a POC, so if I check if it's a NextJS application and If it has aliases added in tsconfig.json or jsconfig.json. I can check for import paths that starts with "@" and resolve the path based on the aliasing received from tsconfig.json or jsconfig.json. Then this resolved path can be passed into the require.resolve.

[nmn]

@rayan1810 This solution feels too specific to Next and TS. Perhaps there is a way to pass in an alias configuration to the Babel plugin itself? Then, the Next.js plugin can read the aliases and inject them into the Babel plugin while using it.

[rayan1810]

I agree @nmn, tested the flow with a POC and it works. Working on a PR for the same.

[nmn]

@rayan1810 I've given this problem some thought: https://github.com/facebook/stylex/discussions/111

[AbhiPartha]

This issue seems to even happen for relative imports

For example you can use this repo to reproduce it. https://github.com/millnut/storybook_foundations/tree/feature/stylex-support

Any idea why this could be happening ? Node version: v18.18.2

[nmn]

A quick update is that StyleX can now be configured to resolve aliases, although the configuration requires absolute paths. See the Next example in the repo for an example.

@AbhiPartha Please don't post the same comment in multiple issues. I'll keep this one as it's on an open issue and delete the other one for now.

[AbhiPartha]

I was able to make it work using @storybook/next in combination with stylex next plugin https://github.com/AbhiPartha/StyleXComponentLibrary Thanks for that !!

Although giving more info about the above issue, It says only if tsconfig paths are set and can leave devs thinking it works for relative imports, the error happens irrespective of setting tsconfig alias or not.

Error: Only static values are allowed inside of a stylex.create() call

[nmn]

@AbhiPartha yes. this is a known issue. The StyleX babel plugin can be configured to understand aliases. We don't automatically discover and read aliases defined in a tsconfig file.

[jderboven]

Any clues on how we could do it for a nx monorepo project with a lib containing styleX ? I would like to make a shareable theming lib within my monorepo with variables and styles defined with stylex so I can be able to share tokens to all of my apps.

Actually getting the same issue but there are no relative paths here.

[nmn]

@jderboven Depends on the framework/bundler you're using. AFAIK, using nx should not change how it is configured.

Generally, you need to configure the build for your app to also compile the packages you're importing. These external packages may be from your mono-repo or node_modules. In Next.js, for example, you need to add the package names to transpilePackages key.

Vite has a similar option AFAIK. (Although, you'd need to delete the Vite cache between builds for things to work consistently.)

Actually getting the same issue but there are no relative paths here.

Could you explain what this means?