https://github.com/damassi/styled-components-ssr-issue
Styled Components 4.0.3 issue repro where `collectStyles` fails on symlinked modules
https://github.com/damassi/styled-components-ssr-issue
Last synced: about 1 year ago
JSON representation
Styled Components 4.0.3 issue repro where `collectStyles` fails on symlinked modules
- Host: GitHub
- URL: https://github.com/damassi/styled-components-ssr-issue
- Owner: damassi
- Created: 2019-01-14T03:40:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-14T05:30:17.000Z (over 7 years ago)
- Last Synced: 2025-02-07T10:49:10.642Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://github.com/styled-components/styled-components/issues/2322
- Size: 29.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## styled-components@4.0.3
This reproduces an issue where styled-components@4.0.3 fails to collect styles (`ServerStyleSheet#collectStyles`) from modules that are `yarn link`d.
**Issue**: https://github.com/styled-components/styled-components/issues/2322
```sh
yarn setup
yarn start
```
### Output:
```sh
[/3rd-party-lib]
This is the main component library. Components are created here and exported
for consumption in other apps.
When developing locally, this module is accessed from other modules via yarn link.
Running `collectStyles` from here will properly extract CSS:
CSS:
/* sc-component-id: sc-bdVaJa */
.sc-bdVaJa {} .UoSJW{width:100%;}
/* sc-component-id: sc-bwzfXH */
.sc-bwzfXH {} .jSiEbM{color:blue;}
/* sc-component-id: sc-htpNat */
.sc-htpNat {} .cyinBP{color:green;}
/* sc-component-id: sc-bxivhb */
.sc-bxivhb {} .gNxrLP{color:red;}
/* sc-component-id: sc-ifAKCX */
.sc-ifAKCX {} .fDAdfP{color:yellow;}
HTML:
Hello
Are
You
-------------------
[/app]
This is an app that imports the linked module /3rd-party-lib for use.
Running `collectStyles` from here fails to collect styles since the instance
of styled-components that created the components is located in a linked module.
CSS:
HTML:
Hello
Are
You
-------------------
[/]
This is the project root that imports /app and /3rd-party-lib, and yarn links.
Running `collectStyles` from here fails to collect styles since the instance
of styled-components that created the components is located in a linked module.
CSS:
HTML:
Hello
Are
You
```