{"action":"created","issue":{"url":"https://api.github.com/repos/emotion-js/emotion/issues/826","repository_url":"https://api.github.com/repos/emotion-js/emotion","labels_url":"https://api.github.com/repos/emotion-js/emotion/issues/826/labels{/name}","comments_url":"https://api.github.com/repos/emotion-js/emotion/issues/826/comments","events_url":"https://api.github.com/repos/emotion-js/emotion/issues/826/events","html_url":"https://github.com/emotion-js/emotion/pull/826","id":355312340,"node_id":"MDExOlB1bGxSZXF1ZXN0MjExODcxMDA1","number":826,"title":"styled-elements proof of concept","user":{"login":"tkh44","id":662750,"node_id":"MDQ6VXNlcjY2Mjc1MA==","avatar_url":"https://avatars2.githubusercontent.com/u/662750?v=4","gravatar_id":"","url":"https://api.github.com/users/tkh44","html_url":"https://github.com/tkh44","followers_url":"https://api.github.com/users/tkh44/followers","following_url":"https://api.github.com/users/tkh44/following{/other_user}","gists_url":"https://api.github.com/users/tkh44/gists{/gist_id}","starred_url":"https://api.github.com/users/tkh44/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tkh44/subscriptions","organizations_url":"https://api.github.com/users/tkh44/orgs","repos_url":"https://api.github.com/users/tkh44/repos","events_url":"https://api.github.com/users/tkh44/events{/privacy}","received_events_url":"https://api.github.com/users/tkh44/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":29,"created_at":"2018-08-29T20:04:22Z","updated_at":"2018-08-29T23:46:54Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/emotion-js/emotion/pulls/826","html_url":"https://github.com/emotion-js/emotion/pull/826","diff_url":"https://github.com/emotion-js/emotion/pull/826.diff","patch_url":"https://github.com/emotion-js/emotion/pull/826.patch"},"body":"<!--\r\nThanks for your interest in the project. I appreciate bugs filed and PRs submitted!\r\n\r\nPlease make sure that you are familiar with and follow the Code of Conduct for\r\nthis project (found in the CODE_OF_CONDUCT.md file).\r\n\r\nAlso, please make sure you're familiar with and follow the instructions in the\r\ncontributing guidelines (found in the CONTRIBUTING.md file).\r\n\r\nIf you're new to contributing to open source projects, you might find this free\r\nvideo course helpful: http://kcd.im/pull-request\r\n\r\nPlease fill out the information below to expedite the review and (hopefully)\r\nmerge of your pull request!\r\n-->\r\n\r\n<!-- What changes are being made? (What feature/bug is being fixed here?) -->\r\n**What**:\r\nThis is adding a new feature to the emotion 10 custom `createElement`. It allows the developer to style elements in a context provider that are applied to the elements as they are created.\r\n\r\n```js\r\n/** @jsx jsx */\r\n\r\n<StyledElementsProvider\r\n  components={{\r\n    div: { display: 'flex', color: 'hotpink' },\r\n    h1: { fontSize: 18 },\r\n    button: { outline: 'none', border: 'none', backgroundColor: 'purple' }\r\n  }}\r\n>\r\n  <div>\r\n    <h1>Hello</h1>\r\n    <button>Click Me</button>\r\n  </div>\r\n</StyledElementsProvider>\r\n```\r\n\r\nWill output:\r\n```html\r\n.emotion-2 {\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  color: hotpink;\r\n}\r\n\r\n.emotion-0 {\r\n  font-size: 18px;\r\n}\r\n\r\n.emotion-1 {\r\n  outline: none;\r\n  border: none;\r\n  background-color: purple;\r\n}\r\n\r\n<div\r\n  className=\"emotion-2\"\r\n>\r\n  <h1\r\n    className=\"emotion-0\"\r\n  >\r\n    Hello\r\n  </h1>\r\n  <button\r\n    className=\"emotion-1\"\r\n  >\r\n    Click Me\r\n  </button>\r\n</div>\r\n```\r\n\r\nA few more supported cases as of right now:\r\n```js\r\n<StyledElementsProvider\r\n  components={{ div: ({ fontSize }) => ({ fontSize: fontSize || 8 }) }}\r\n>\r\n  <div fontSize={24} />\r\n</StyledElementsProvider>\r\n```\r\n\r\n```js\r\n<StyledElementsProvider\r\n  components={{ div: ({ theme }) => ({ color: theme.color }) }}\r\n>\r\n  <ThemeProvider theme={{ primary: 'green' }}>\r\n    <div />\r\n  </ThemeProvider>\r\n</StyledElementsProvider>\r\n```\r\n<!-- Why are these changes necessary? -->\r\n**Why**:\r\n\r\nTalking to @ChristopherBiscardi about how MDX custom component providers work I wanted to see if we could build something like that into emotion. This concept allows for a more focused approach to styling default elements. This concept should be expanded to include custom elements and add proper support for nested `StyledElementProvider`'s.\r\n\r\n<!-- How were these changes implemented? -->\r\n**How**:\r\n\r\nAdded some simple hooks into the `jsx` but I fear I may added some perf regressions with this initial attempt. Any help here would be appreciated.\r\n\r\n<!-- Have you done all of these things?  -->\r\n**Checklist**:\r\n<!-- add \"N/A\" to the end of each line that's irrelevant to your changes -->\r\n<!-- to check an item, place an \"x\" in the box like so: \"- [x] Documentation\" -->\r\n- [ ] Documentation\r\n- [x] Tests\r\n- [x] Code complete\r\n\r\n<!-- feel free to add additional comments -->\r\n\r\n<!-- Please add a `Tag:` prefixed label from the labels so that this PR shows up in the changelog -->\r\n"},"comment":{"url":"https://api.github.com/repos/emotion-js/emotion/issues/comments/417143859","html_url":"https://github.com/emotion-js/emotion/pull/826#issuecomment-417143859","issue_url":"https://api.github.com/repos/emotion-js/emotion/issues/826","id":417143859,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNzE0Mzg1OQ==","user":{"login":"mitchellhamilton","id":11481355,"node_id":"MDQ6VXNlcjExNDgxMzU1","avatar_url":"https://avatars1.githubusercontent.com/u/11481355?v=4","gravatar_id":"","url":"https://api.github.com/users/mitchellhamilton","html_url":"https://github.com/mitchellhamilton","followers_url":"https://api.github.com/users/mitchellhamilton/followers","following_url":"https://api.github.com/users/mitchellhamilton/following{/other_user}","gists_url":"https://api.github.com/users/mitchellhamilton/gists{/gist_id}","starred_url":"https://api.github.com/users/mitchellhamilton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mitchellhamilton/subscriptions","organizations_url":"https://api.github.com/users/mitchellhamilton/orgs","repos_url":"https://api.github.com/users/mitchellhamilton/repos","events_url":"https://api.github.com/users/mitchellhamilton/events{/privacy}","received_events_url":"https://api.github.com/users/mitchellhamilton/received_events","type":"User","site_admin":false},"created_at":"2018-08-29T23:46:54Z","updated_at":"2018-08-29T23:46:54Z","author_association":"MEMBER","body":"Yeah, if you want to."}}
{"actor":{"display_login":"mitchellhamilton"}}