Importing a .stylex.ts does not work with tsconfig paths settings about stylex HOT 12 OPEN

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

from stylex.

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:

from stylex.

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

from stylex.

@rayan1810 I've given this problem some thought: #111

from stylex.

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.

from stylex.

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.

from stylex.

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

from stylex.

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

from stylex.

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

from stylex.

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

from stylex.

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.

from stylex.

@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?

from stylex.