Importing a .stylex.ts does not work with tsconfig paths settings
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
**The problem**
When importing a variable file like is listed in [the docs](https://stylexjs.com/docs/learn/theming/defining-variables/), 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](https://stylexjs.com/docs/learn/theming/defining-variables/).
**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
Contributor guide
Assessment
This issue has not been assessed yet.