emotion-js · emmatown · Nov 8, 2019 · Oct 27, 2019 · Oct 31, 2019 · Nov 2, 2019
diff --git a/.changeset/curvy-timers-decide.md b/.changeset/curvy-timers-decide.md
@@ -1,5 +1,4 @@
 ---
-'@emotion/styled-base': major
 '@emotion/styled': major
 ---
 

diff --git a/.changeset/spotty-llamas-mate.md b/.changeset/spotty-llamas-mate.md
@@ -0,0 +1,7 @@
+---
+'babel-plugin-emotion': major
+'@emotion/styled-base': major
+'@emotion/styled': major
+---
+
+Removed support for `@emotion/styled-base` package. It has been moved to `@emotion/styled` and is available as `@emotion/styled/base`. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when `@emotion/styled-base` was not installed explicitly by a user.
diff --git a/.changeset/strange-pumas-suffer.md b/.changeset/strange-pumas-suffer.md
@@ -1,5 +1,4 @@
 ---
-'@emotion/styled-base': patch
 '@emotion/styled': patch
 ---
 

diff --git a/.changeset/two-baboons-mate.md b/.changeset/two-baboons-mate.md
@@ -4,7 +4,6 @@
 '@emotion/native': major
 '@emotion/primitives-core': major
 '@emotion/primitives': major
-'@emotion/styled-base': major
 '@emotion/styled': major
 ---
 

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -8,8 +8,7 @@
     "packages/emotion",
     "packages/emotion-theming",
     "packages/serialize",
-    "packages/styled",
-    "packages/styled-base"
+    "packages/styled"
   ],
   "sandboxes": ["pk1qjqpw67"]
 }
diff --git a/package.json b/package.json
@@ -138,7 +138,7 @@
       "threshold": "7 Kb"
     },
     {
-      "path": "./packages/styled-base/dist/styled-base.umd.min.js",
+      "path": "./packages/styled/base/dist/styled.umd.min.js",
       "threshold": "9.7 Kb"
     },
     {

diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap
@@ -195,7 +195,7 @@ function Logo(props) {
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 

diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`styled inline babel 6 hash generation no file system 1`] = `
-"import _styled from \\"@emotion/styled-base\\";
+"import _styled from \\"@emotion/styled/base\\";
 
 _styled(\\"h1\\", {
   target: \\"e1vqloan0\\"
@@ -12,7 +12,7 @@ _styled(\\"h1\\", {
 `;
 
 exports[`styled inline babel 7 hash generation no file system 1`] = `
-"import _styled from \\"@emotion/styled-base\\";
+"import _styled from \\"@emotion/styled/base\\";
 
 _styled(\\"h1\\", {
   target: \\"e1vqloan0\\"

diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap
@@ -10,7 +10,7 @@ const SomeComponent = styled.div\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -38,7 +38,7 @@ const SomeComponent = styled('div')\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -74,7 +74,7 @@ dfwf */
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -121,7 +121,7 @@ let OneLastComponent = styled.div({
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -194,7 +194,7 @@ styled('button', cfg)({})
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -255,7 +255,7 @@ let Avatar = styled.img\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 let Avatar = _styled(\\"img\\", {
   target: \\"ecty2dv0\\",
@@ -288,7 +288,7 @@ class Thing {
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -362,7 +362,7 @@ const H1 = styled.h1\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 // yes, this was actually a bug at one point
 const H1 = _styled(\\"h1\\", {
@@ -385,7 +385,7 @@ const SomeOtherComponent = styled.button\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -471,7 +471,7 @@ const SomeComponent = styled.div({ color: 'hotpink' })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -497,7 +497,7 @@ const SomeComponent = styled('div')({ color: 'hotpink' })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -525,7 +525,7 @@ const SomeComponent = styled.div(props => ({ color: props.color }))
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 const SomeComponent = _styled(\\"div\\", {
   target: \\"e1i0tb8p0\\",
@@ -620,7 +620,7 @@ const H1 = styled.h1({ fontSize })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 let fontSize = window.whatever;
 
 const H1 = _styled(\\"h1\\", {
@@ -639,7 +639,7 @@ const H1 = styled.h1({ ...window.whatever })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 const H1 = _styled(\\"h1\\", {
   target: \\"e18quw4k0\\",

diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap
@@ -38,7 +38,7 @@ let Comp = styled.div({ color: 'hotpink' })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 let Comp = _styled(\\"div\\", {
   target: \\"e4zcdjx0\\",

diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap
@@ -139,7 +139,7 @@ const SomeComponent = styled.div({
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -167,7 +167,7 @@ const SomeComponent = styled.div\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 

diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap
@@ -10,7 +10,7 @@ const SomeComponent = styled.div\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -38,7 +38,7 @@ const SomeComponent = styled('div')\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -74,7 +74,7 @@ dfwf */
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -121,7 +121,7 @@ let OneLastComponent = styled.div({
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -194,7 +194,7 @@ styled('button', cfg)({})
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -255,7 +255,7 @@ let Avatar = styled.img\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 let Avatar = _styled(\\"img\\", {
   target: \\"ecty2dv0\\",
@@ -288,7 +288,7 @@ class Thing {
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -362,7 +362,7 @@ const H1 = styled.h1\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 // yes, this was actually a bug at one point
 const H1 = _styled(\\"h1\\", {
@@ -385,7 +385,7 @@ const SomeOtherComponent = styled.button\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -467,7 +467,7 @@ const SomeComponent = styled.div({ color: 'hotpink' })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -493,7 +493,7 @@ const SomeComponent = styled('div')({ color: 'hotpink' })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
@@ -521,7 +521,7 @@ const SomeComponent = styled.div(props => ({ color: props.color }))
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 const SomeComponent = _styled(\\"div\\", {
   target: \\"e1i0tb8p0\\",
@@ -603,7 +603,7 @@ const H1 = styled.h1({ fontSize })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 let fontSize = window.whatever;
 
 const H1 = _styled(\\"h1\\", {
@@ -622,7 +622,7 @@ const H1 = styled.h1({ ...window.whatever })
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
 
 const H1 = _styled(\\"h1\\", {
   target: \\"e18quw4k0\\",

diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js
@@ -16,7 +16,7 @@ import {
 } from './utils'
 
 let webStyledMacro = createStyledMacro({
-  importPath: '@emotion/styled-base',
+  importPath: '@emotion/styled/base',
   originalImportPath: '@emotion/styled',
   isWeb: true
 })
@@ -47,7 +47,7 @@ let transformersSource = {
   '@emotion/styled': {
     default: [
       styledTransformer,
-      { styledBaseImport: ['@emotion/styled-base', 'default'], isWeb: true }
+      { styledBaseImport: ['@emotion/styled/base', 'default'], isWeb: true }
     ]
   },
   '@emotion/primitives': {

diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js
@@ -247,12 +247,12 @@ test('handles camelCased custom properties in object styles properly', () => {
 })
 
 test('applies class when css prop is set to nil on wrapper component', () => {
-  // $FlowFixMe
   const Button = props => <button css={{ color: 'hotpink' }} {...props} />
-  // $FlowFixMe
-  const WrappedButton = ({ children, buttonStyles }) => (
-    <Button css={buttonStyles}>{children}</Button>
-  )
+
+  const WrappedButton: React.StatelessFunctionalComponent<any> = ({
+    children,
+    buttonStyles
+  }) => <Button css={buttonStyles}>{children}</Button>
 
   const tree = renderer.create(
     <React.Fragment>

diff --git a/packages/emotion-server/test/util.js b/packages/emotion-server/test/util.js
@@ -74,7 +74,7 @@ export const getComponents = (
     label: hoverStyles;
   `
 
-  // this is using react-emotion which uses @emotion/styled-base
+  // this is using @emotion/styled/base
   // so the call syntax has to be used
   const Main = styled('main')`
     ${hoverStyles};