facebook / facebook/stylex

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

Open
#40 15 comments 8 reactions 0 assignees View on GitHub
enhancement help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.