{"action":"created","issue":{"url":"https://api.github.com/repos/emotion-js/emotion/issues/637","repository_url":"https://api.github.com/repos/emotion-js/emotion","labels_url":"https://api.github.com/repos/emotion-js/emotion/issues/637/labels{/name}","comments_url":"https://api.github.com/repos/emotion-js/emotion/issues/637/comments","events_url":"https://api.github.com/repos/emotion-js/emotion/issues/637/events","html_url":"https://github.com/emotion-js/emotion/issues/637","id":318580512,"node_id":"MDU6SXNzdWUzMTg1ODA1MTI=","number":637,"title":"Emotion 10","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},"labels":[{"id":711065630,"node_id":"MDU6TGFiZWw3MTEwNjU2MzA=","url":"https://api.github.com/repos/emotion-js/emotion/labels/discussion","name":"discussion","color":"fbca04","default":false},{"id":1003219029,"node_id":"MDU6TGFiZWwxMDAzMjE5MDI5","url":"https://api.github.com/repos/emotion-js/emotion/labels/pinned","name":"pinned","color":"4732e5","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":77,"created_at":"2018-04-27T23:59:35Z","updated_at":"2018-12-18T18:38:24Z","closed_at":null,"author_association":"MEMBER","body":"Emotion 10 is going to introduce some new APIs for React users.\r\n\r\nThe main aim with these new APIs is to move all insertion to inside the React tree, this enables a couple of things:\r\n\r\n* SSR just works because we can render style elements directly into the React tree.\r\n* Setting things like nonces, container elements and stylis plugins is much easier since it only requires a Provider at the top of the tree.\r\n* Global styles can change over time and be removed\r\n* It forces people to think in terms of styling elements instead of creating class names\r\n* The css prop works without the babel plugin because it's implemented as a custom `createElement` (this isn't necessarily a result of moving things inside the React tree but a side-effect of the new implementation)\r\n\r\nThe main new APIs are a custom `createElement` for the css prop and a `Global` component for global styles.\r\n\r\n### Example\r\n\r\n> The exact APIs are likely to change before Emotion 10 is released.\r\n\r\n```jsx\r\n/** @jsx jsx */\r\nimport { jsx, Global } from '@emotion/core'\r\nimport css from '@emotion/css'\r\nimport { render } from 'react-dom'\r\n\r\nrender(\r\n  <div>\r\n    <h1\r\n      css={css`\r\n        font-size: 500px;\r\n      `}\r\n    >\r\n      This is really big\r\n    </h1>\r\n    <Global\r\n      css={{\r\n        body: {\r\n          backgroundColor: 'hotpink'\r\n        }\r\n      }}\r\n    />\r\n  </div>,\r\n  document.getElementById('root')\r\n)\r\n```\r\n\r\nIf you want to try this, look at https://github.com/emotion-js/next but note that there **will** be breaking changes very often for now.\r\n\r\nAnother change that emotion@10 will bring is that `styled.div` and etc. will work without a babel plugin. The tag list will be included in `@emotion/styled` but if you use `@emotion/styled.macro` with [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) or the babel plugin, `styled.div` will be replaced with `styled('div')` and `@emotion/styled-base` will be imported instead which doesn't include the tag list.\r\n\r\n## Compatibility with Preact and non-React-like libraries\r\n\r\nWhile the majority of Emotion users use React, there are some users who don't use React and we have to figure out how to cater for them.\r\n\r\n### Non-React-like libraries\r\n\r\nSince all the packages on the `@emotion` scope are very modular, we can build the current emotion APIs with the packages on the `@emotion` scope. This should be pretty simple.\r\n\r\n### Preact\r\n\r\nThere are only a few APIs that we use that are new.\r\n\r\n##### Fragment\r\n\r\nFragments are only used for SSR so we could have an alternative SSR API for that similar to `extractCritical` now.\r\n\r\n##### createContext\r\n\r\nWe could tell people to use `create-react-context` and essentially polyfill `createContext`.\r\n\r\n##### forwardRef\r\n\r\nWe could conditionally use forwardRef so if it's not available then we don't use it. I'm not a huge fan of this because I think it would be confusing to tell people they should use `ref` when using React and `innerRef` when using Preact but I'm not totally sure yet.\r\n\r\nThe other option to all of this is to not support the new APIs on Preact and have Preact users use the current emotion API.\r\n\r\n## Migration\r\n\r\nThis is something I'm still thinking about and I've got some ideas about but nothing concrete yet. I'm thinking of migrating [emotion.sh](https://emotion.sh) and seeing what's difficult, how to make incremental migration easy, what can be done automatically with codemods and what warnings would be useful to provide.\r\n\r\n## Removing `extractStatic`\r\n\r\n`extractStatic` hasn't been something that we've encouraged for a long time so @tkh44 and I think it's time to remove it. For people who like static extraction, libraries like [Linaria](https://linaria.now.sh/) and [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader) do static extraction much better than Emotion does so those people should use those libraries.\r\n\r\n## Only do transformations when emotion is imported\r\n\r\n`babel-plugin-emotion` currently transforms anything with the names of emotion's exports. While this works it transforms things for other libraries (#626 and #344) so we should only transform . I want to do this in Emotion 10 since it could be a breaking change for some people.\r\n\r\n### TODO\r\n\r\n* [x] Support source maps in `@emotion`\r\n* [x] Try to make the `keyframes` API more convenient\r\n* [x] Reorganize some internals\r\n* [x] Add a babel plugin for hoisting objects in the css prop and adding a css call around the object since we can't use a babel macro.\r\n* [x] Add an alternative SSR API to get around the caveats with rendering style elements\r\n* [x] Add component selectors to `@emotion/styled.macro`\r\n* [x] Add a dev warning when `:first-child` and selectors like it are used and recommend replacements because of problems when rendering style elements in SSR and those selectors targeting the style elements.\r\n* [x] Move https://github.com/emotion-js/next into this repo\r\n* [x] Decide on how versioning should work since there are lots of packages that will likely have breaking changes that don't affect most end-users so should we do major versions really often(probably not) or do independent versioning for each package and if so should we start at 1.0.0 or 10.0.0?\r\n* [x] docs. docs. docs.\r\n* [x] Add a deprecation notice for `extractStatic` in babel-plugin-emotion and add a notice to the docs (if anyone wants to submit a PR for this, that would be great!!)\r\n* [x] Remove `extractStatic`\r\n* [x] probably more stuff\r\n* [x] Make it so the new snapshot serializer doesn't mutate the object that's passed in\r\n"},"comment":{"url":"https://api.github.com/repos/emotion-js/emotion/issues/comments/448324529","html_url":"https://github.com/emotion-js/emotion/issues/637#issuecomment-448324529","issue_url":"https://api.github.com/repos/emotion-js/emotion/issues/637","id":448324529,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0ODMyNDUyOQ==","user":{"login":"slikts","id":137872,"node_id":"MDQ6VXNlcjEzNzg3Mg==","avatar_url":"https://avatars2.githubusercontent.com/u/137872?v=4","gravatar_id":"","url":"https://api.github.com/users/slikts","html_url":"https://github.com/slikts","followers_url":"https://api.github.com/users/slikts/followers","following_url":"https://api.github.com/users/slikts/following{/other_user}","gists_url":"https://api.github.com/users/slikts/gists{/gist_id}","starred_url":"https://api.github.com/users/slikts/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/slikts/subscriptions","organizations_url":"https://api.github.com/users/slikts/orgs","repos_url":"https://api.github.com/users/slikts/repos","events_url":"https://api.github.com/users/slikts/events{/privacy}","received_events_url":"https://api.github.com/users/slikts/received_events","type":"User","site_admin":false},"created_at":"2018-12-18T18:38:24Z","updated_at":"2018-12-18T18:38:24Z","author_association":"NONE","body":"I didn't say they're unsupported, just that the examples in the readme and elsewhere used to use template literals. It would be just:\r\n```js\r\nimport { css } from \"emotion\";\r\n\r\nrender(<div className={css`\r\n  color: red;\r\n`} />, root);\r\n```\r\nThis was what I found elegant and why I used emotion; using CSS syntax, and having a clear model that, for example, you wouldn't have to explain to a colleague if they read your code. In contrast, the changes with pragmas and seemingly unused imports are hacky and fiddly. They're using a feature of Babel that I can't even find where it's documented, and I had to piece together what it is from a random blog post. The emotion readme just drops it there as if you'd be supposed to be familiar with it. Then, to actually use CSS syntax, I have to add an another import. I basically wouldn't even try to sell the new pattern to someone else who's possibly skeptical of CSS-in-JS as such, because it doesn't look good, requires an explanation, and even with an explanation it's like magic."}}
{"actor":{"display_login":"slikts"}}