Comments (12)
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.
Related Issues (20)
- [RFC] Defining styles inline HOT 36
- [RFC] Ref - A solution for complex CSS selectors HOT 3
- [RFC] Descendent and Sibling selectors HOT 8
- Referencing static assets HOT 1
- Logical properties for border-block-x incorrectly map. HOT 9
- Compatibility with `react-app-rewired` and `react-aria` ? HOT 4
- Document the requirement for a CSS file in a Next.js Project HOT 1
- Nested pseudo classes within pseudo elements HOT 5
- color value must be one of HOT 1
- TypeError: String.prototype.concat called on null or undefined (v0.6.1) HOT 13
- Release notes HOT 1
- Is stylex/open-props automatically generated from argyleink/open-props? HOT 5
- Color Format issues HOT 2
- [Question] How to get generated styles filename if use stylex on server with webpack?
- Errors displaying an error line and part of code
- CSS Custom Property Inheritance Problem HOT 3
- How to capture var values for third-party library styling? HOT 2
- A good way to write complex css + compose local styles would be nice. HOT 1
- esbuild plugin has undeclared dependency on babel-plugin-syntax-hermes-parser
- How to Contribute
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stylex.