{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/1941","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/1941/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/1941/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/1941/events","html_url":"https://github.com/styled-components/styled-components/issues/1941","id":352826286,"node_id":"MDU6SXNzdWUzNTI4MjYyODY=","number":1941,"title":"Broken styles with 2 instances of styled-components on the same page","user":{"login":"jackrobertscott","id":6358952,"node_id":"MDQ6VXNlcjYzNTg5NTI=","avatar_url":"https://avatars1.githubusercontent.com/u/6358952?v=4","gravatar_id":"","url":"https://api.github.com/users/jackrobertscott","html_url":"https://github.com/jackrobertscott","followers_url":"https://api.github.com/users/jackrobertscott/followers","following_url":"https://api.github.com/users/jackrobertscott/following{/other_user}","gists_url":"https://api.github.com/users/jackrobertscott/gists{/gist_id}","starred_url":"https://api.github.com/users/jackrobertscott/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jackrobertscott/subscriptions","organizations_url":"https://api.github.com/users/jackrobertscott/orgs","repos_url":"https://api.github.com/users/jackrobertscott/repos","events_url":"https://api.github.com/users/jackrobertscott/events{/privacy}","received_events_url":"https://api.github.com/users/jackrobertscott/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-08-22T07:00:46Z","updated_at":"2018-08-31T15:16:23Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n🚨HOLD UP PLEASE, BEFORE DELETING THIS TEMPLATE!🚨😁\r\nThank you for contributing and please follow this guide before creating an issue! 🙌\r\n\r\n1. Do you have a usage question?\r\n=============================\r\n- Look for prior or closed issues (but please avoid replying to them if they're old)\r\n- Check the docs: https://www.styled-components.com/docs\r\n- Look for/ask questions on stack overflow: https://stackoverflow.com/questions/ask?tags=styled-components\r\n- Start a thread on our Spectrum help channel: https://spectrum.chat/styled-components/help\r\n\r\n2. Think you found a bug?\r\n=============================\r\n- Consider submitting a PR with a failing test instead\r\n- Use the \"BUG TEMPLATE\" below to report a test\r\n- Don't forget to 👉PROVIDE A REPRODUCTION PLEASE😉 (Codesandbox/Webpackbin links are provided, repositories are ok)\r\n- If you can't provide a reproduction, snippets of code can help, but are incomplete reports\r\n\r\n3. Do you have a feature request?\r\n=============================\r\n- Look for old & closed issues (replying might be ok if they're not too old or have no conclusion)\r\n- Otherwise: Remove the template below and provide thoughtful commentary *and code samples* on what this feature means for your product\r\n\r\nWhat will it allow you to do that you can't do today?\r\nHow will it make current work-arounds straightforward?\r\nWhat potential bugs and edge cases does it help to avoid?\r\nPlease keep it product-centric.\r\n-->\r\n\r\nThe problem is that I want to load 2 instances of styled-components on the same page. But when I do, the second overwrites the first's styles. This causes all the styles to break.\r\n\r\n#### Why?\r\n\r\nBecause I am building a project which injects dom onto a page and uses react/styled-components to do this. Some of the projects I will be injecting the dom into will already have styled components installed. This is where it breaks.\r\n\r\n#### Similar issues (non of which have an answer)\r\n\r\n#1032 \r\n#1102\r\n#1491 \r\n\r\n<!-- BUG TEMPLATE -->\r\n## Environment\r\n<!-- Please run this command inside your project and paste its contents here (it automatically copies to your clipboard) -->\r\n`npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown --clipboard`\r\n\r\n#### System:\r\n - OS: macOS High Sierra 10.13.3\r\n - CPU: x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz\r\n - Memory: 91.38 MB / 8.00 GB\r\n - Shell: 5.3 - /bin/zsh\r\n#### Binaries:\r\n - Node: 8.7.0 - ~/.nvm/versions/node/v8.7.0/bin/node\r\n - Yarn: 1.7.0 - /usr/local/bin/yarn\r\n - npm: 6.1.0 - ~/.nvm/versions/node/v8.7.0/bin/npm\r\n\r\n## Reproduction\r\n\r\nI have created a sandbox to illustrate where I am currently at with this problem. It is *not* a solution.\r\n\r\nhttps://codesandbox.io/s/z6npzz1zkm\r\n\r\n## Steps to reproduce\r\n\r\nLoad 2 different styled component implementations onto the same page.\r\n\r\n## Expected Behavior\r\n\r\nAll styles would be preserved for the both instances of styled components. Do *not* override the styles of the first instance of styled components.\r\n\r\nAlternatively, it would be awesome if there was the ability to rename the `<style data-styled-components=\"\"></style>` component tag.\r\n\r\n## Actual Behavior\r\n\r\nThe second instance of styled components overrides the first. I believe this has to do with the `<style data-styled-components=\"\"></style>` element which is stored in the head."},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/417696625","html_url":"https://github.com/styled-components/styled-components/issues/1941#issuecomment-417696625","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/1941","id":417696625,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNzY5NjYyNQ==","user":{"login":"nitroin","id":14164969,"node_id":"MDQ6VXNlcjE0MTY0OTY5","avatar_url":"https://avatars0.githubusercontent.com/u/14164969?v=4","gravatar_id":"","url":"https://api.github.com/users/nitroin","html_url":"https://github.com/nitroin","followers_url":"https://api.github.com/users/nitroin/followers","following_url":"https://api.github.com/users/nitroin/following{/other_user}","gists_url":"https://api.github.com/users/nitroin/gists{/gist_id}","starred_url":"https://api.github.com/users/nitroin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nitroin/subscriptions","organizations_url":"https://api.github.com/users/nitroin/orgs","repos_url":"https://api.github.com/users/nitroin/repos","events_url":"https://api.github.com/users/nitroin/events{/privacy}","received_events_url":"https://api.github.com/users/nitroin/received_events","type":"User","site_admin":false},"created_at":"2018-08-31T15:16:23Z","updated_at":"2018-08-31T15:16:23Z","author_association":"NONE","body":"We are hitting - _I think_ - the very same problem.\r\n\r\nWe are developing 3+ _independent_ `React` apps:\r\n  - 1 lib with all our UI components building blocks (`cra` + `react-styleguidist` + `styled-components`)\r\n  - 2+ apps (`cra` + `styled-components`) that uses (dep in `package.json`) the former\r\n\r\nUsing `peerDependencies` causes some dev pain (after `yarn` we are not able to import `styled-components`).\r\n\r\n## Environment\r\n#### System:\r\n - OS: macOS 10.14\r\n - CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz\r\n - Memory: 772.15 MB / 16.00 GB\r\n - Shell: 5.3 - /bin/zsh\r\n\r\n#### Binaries:\r\n - Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node\r\n - Yarn: 1.9.4 - /usr/local/bin/yarn\r\n - npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm\r\n - Watchman: 4.9.0 - /usr/local/bin/watchman\r\n"}}
{"actor":{"display_login":"nitroin"}}