fix(cli): add styled-components aliasing.
#7298
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
No changes to documentation |
|
Component Testing Report Updated Aug 2, 2024 4:07 AM (UTC)
|
There was a problem hiding this comment.
This is an awesome initiative and will solve a lot of problems 💖 We're planning on introducing a utility in next-sanity to accomplish this for embedded studio users too :)
We should be using the browser build of styled-components though, as we're not SSR-ing the Studio today so it doesn't make sense for the heavier and slower build of styled-components to be used 🙌
| }, | ||
| { | ||
| find: /^styled-components$/, | ||
| replacement: expect.stringContaining('styled-components.esm.js'), |
There was a problem hiding this comment.
| replacement: expect.stringContaining('styled-components.esm.js'), | |
| replacement: expect.stringContaining('styled-components.browser.esm.js'), |
| expect(aliases).toMatchObject({ | ||
| ...resolvedDevAliases, | ||
| 'styled-components/package.json': expect.stringContaining('styled-components/package.json'), | ||
| 'styled-components': expect.stringContaining('styled-components.esm.js'), |
There was a problem hiding this comment.
| 'styled-components': expect.stringContaining('styled-components.esm.js'), | |
| 'styled-components': expect.stringContaining('styled-components.browser.esm.js'), |
| // entry point | ||
| aliases.push({ | ||
| find: /^styled-components$/, | ||
| replacement: path.resolve(styledComponentsRoot, styledComponentsPkg.module), |
There was a problem hiding this comment.
| replacement: path.resolve(styledComponentsRoot, styledComponentsPkg.module), | |
| replacement: path.resolve(styledComponentsRoot, styledComponentsPkg.browser[styledComponentsPkg.module]), |
I have had some doubt about using the Fairly certain that if you point at the module folder as the alias, it still does its normal entrypoint resolution, eg psuedo-code: // will point to a specific file which might be the node.js one,
// eg not the one we want to use
const scFilePath = resolveFrom(studioPath, 'styled-components')
// find the root of the module, eg the closest folder with a `package.json`
// (could check for `.name` if we wanted to be super-safe)
const scPath = recursivelyFindClosestPackageJson(scFilePath)
aliases['styled-components'] = scPathJust a thought. What do you think? |
Oh that's definitely the way to do it if that works. I assumed it didn't. I'll test and report back! |
Alright I've did some research into this issue, and I've found that making the alias the module folder does not always do what we want. Here's a claude paste of my findings:
Given these findings, we need to be more careful with how we set up aliases, especially for modules with complex export structures. The behavior can vary significantly between modules with and without On another note, I actually want to throw away this implementation and use vite's I'll close this PR and open another that does that. |
Description
The following PR adds additional aliasing for styled-components for both the internal build in the monorepo and any user builds.
What to review
Do the changes make sense? Are the updated tests adequate?
Testing
test-studiowith the new styled-component aliases and without. See below.monorepo-aliasing.mp4
Notes for release
styled-componentsto prevent missing context errors.