Add @emotion/core/macro, remove @emotion/css

docs/babel-macros.mdx

@@ -4,11 +4,11 @@ title: 'Babel Macros'
 
 [Create React App recently added support for Babel Macros](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) which makes it possible to run Babel transforms without changing a Babel config.
 
-Most of Emotion's Babel Macros are available by adding `/macro` to the end of the import you'd normally use. (assuming you're using Create React App v2 or you've added babel-plugin-macros to your .babelrc) For example, to use the macro for styled, use `@emotion/styled/macro`. The one exception to this is `@emotion/core`, `@emotion/core` doesn't have a Babel Macro because Babel Macros doesn't support macros for custom JSX pragmas. There is a Babel macro available for `css` from `@emotion/core` if you import it from `@emotion/css/macro` though.
+All of Emotion's Babel Macros are available by adding `/macro` to the end of the import you'd normally use. (assuming you're using Create React App v2 or you've added babel-plugin-macros to your .babelrc) For example, to use the macro for styled, use `@emotion/styled/macro`.
 
 ```jsx
 import styled from '@emotion/styled/macro'
-import css from '@emotion/css/macro'
+import css from '@emotion/core/macro'
 import { css, keyframes, injectGlobal } from 'emotion/macro'
 ```
 

package.json

@@ -193,7 +193,6 @@
     "babel-plugin-codegen": "^3.0.0",
     "babel-plugin-fix-dce-for-classes-with-statics": "^0.1.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "babel-plugin-macros": "^2.0.0",
     "babel-plugin-react-native-web": "^0.9.6",
     "babel-plugin-transform-define": "^1.3.0",
     "benchmark": "^2.1.4",
@@ -260,4 +259,4 @@
     "webpack-bundle-analyzer": "3.3.2",
     "worker-loader": "2.0.0"
   }
-}
+}

packages/babel-plugin-emotion/README.md

@@ -323,6 +323,6 @@ Instead of using `babel-plugin-emotion`, you can use emotion with [`babel-plugin
 ```jsx
 import styled from 'react-emotion/macro'
 import { css, keyframes, injectGlobal, flush, hydrate } from 'emotion/macro'
-import css from '@emotion/css/macro'
+import { css } from '@emotion/core/macro'
 import styled from '@emotion/styled/macro'
 ```

packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap

@@ -34,16 +34,16 @@ exports[`babel css inline code already transpiled by emotion plugin (avoid doubl
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css2 } from \\"emotion\\";
-import { keyframes as _keyframes2 } from \\"emotion\\";
+import { keyframes as _keyframes } from \\"emotion\\";
+import { css as _css } from \\"emotion\\";
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\";
 }
 
 let someCls =
 /*#__PURE__*/
-_css2(process.env.NODE_ENV === \\"production\\" ? {
+_css(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"1jwq1yt-someCls\\",
   styles: \\"color:hotpink;;label:someCls;\\"
 } : {
@@ -55,7 +55,7 @@ _css2(process.env.NODE_ENV === \\"production\\" ? {
 
 let rotate360 =
 /*#__PURE__*/
-_keyframes2(process.env.NODE_ENV === \\"production\\" ? {
+_keyframes(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"1k98dea-rotate360\\",
   styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
 } : {
@@ -68,100 +68,96 @@ _keyframes2(process.env.NODE_ENV === \\"production\\" ? {
 
 exports[`babel css inline label format with dirname, filename, and local 1`] = `
 "
-    import {css} from 'emotion'
+    import { css } from 'emotion'
     let cls = css({color:'hotpink'})
     
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"emotion\\";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
 
+import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
+css(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\",
   styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\"
 } : {
   name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\",
   styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
 `;
 
 exports[`babel css inline label format with filename and local 1`] = `
 "
-    import {css} from 'emotion'
+    import { css } from 'emotion'
     let cls = css({color:'hotpink'})
     
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"emotion\\";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
 
+import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
+css(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"jnyc7-my-css-css-requires-options-cls\\",
   styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\"
 } : {
   name: \\"jnyc7-my-css-css-requires-options-cls\\",
   styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
 `;
 
 exports[`babel css inline label format with filename that is index and local 1`] = `
 "
-    import {css} from 'emotion'
+    import { css } from 'emotion'
     let cls = css({color:'hotpink'})
     
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"emotion\\";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
 
+import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
+css(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"v8qj0c-my-css-some-directory-cls\\",
   styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\"
 } : {
   name: \\"v8qj0c-my-css-some-directory-cls\\",
   styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
 `;
 
 exports[`babel css inline label format with only local 1`] = `
 "
-    import {css} from 'emotion'
+    import { css } from 'emotion'
     let cls = css({color:'hotpink'})
     
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"emotion\\";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
 
+import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
+css(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"ryhvpw-my-css-cls\\",
   styles: \\"color:hotpink;;label:my-css-cls;\\"
 } : {
   name: \\"ryhvpw-my-css-cls\\",
   styles: \\"color:hotpink;;label:my-css-cls;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
 `;
@@ -170,7 +166,7 @@ exports[`babel css inline label on code transpiled by TS 1`] = `
 "
     import { __makeTemplateObject } from 'tslib'
 
-    import css from '@emotion/css'
+    import { css } from '@emotion/core'
 
     var templateObject_1
 
@@ -185,11 +181,10 @@ exports[`babel css inline label on code transpiled by TS 1`] = `
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _css from \\"@emotion/css\\";
 import { __makeTemplateObject } from 'tslib';
+import { css } from '@emotion/core';
 var templateObject_1;
-
 const someVar =
 /*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\"], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\"])));"
+css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\"], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\"])));"
 `;