Skip to content

Commit

Permalink
Move @emotion/styled-base to @emotion/styled/base (#1575)
Browse files Browse the repository at this point in the history 
* Change @emotion/styled-base to @emotion/styled/base

* Fix some stuff

* Fix some stuff

* Fix another thing

* Remove styled-base from CodeSandbox CI config

* Make @emotion/styled/base TS types working

* Restore flowtype tests for @emotion/styled/base

* Fix last reference to @emotion/styled-base

* fix some flow errors

* Brought back @emotion/styled-base, but throw a deprecation error at runtime

* fix styled Flow tests (#1615)

* fix flow type error

* Add changeset

* Update spotty-llamas-mate.md

* Update index.js

* Remove @emotion/styled-base from some changesets
  • Loading branch information
@emmatown
emmatown committed Nov 8, 2019
1 parent 1ab8ec2 commit f9feab1
Show file tree
Hide file tree
Showing 41 changed files with 169 additions and 350 deletions.
1 change: 0 additions & 1 deletion .changeset/curvy-timers-decide.md
View file
@@ -1,5 +1,4 @@
---
'@emotion/styled-base': major
'@emotion/styled': major
---

Expand Down
7 changes: 7 additions & 0 deletions .changeset/spotty-llamas-mate.md
View file
@@ -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.
1 change: 0 additions & 1 deletion .changeset/strange-pumas-suffer.md
View file
@@ -1,5 +1,4 @@
---
'@emotion/styled-base': patch
'@emotion/styled': patch
---

Expand Down
1 change: 0 additions & 1 deletion .changeset/two-baboons-mate.md
View file
Expand Up @@ -4,7 +4,6 @@
'@emotion/native': major
'@emotion/primitives-core': major
'@emotion/primitives': major
'@emotion/styled-base': major
'@emotion/styled': major
---

Expand Down
3 changes: 1 addition & 2 deletions .codesandbox/ci.json
View file
Expand Up @@ -8,8 +8,7 @@
"packages/emotion",
"packages/emotion-theming",
"packages/serialize",
"packages/styled",
"packages/styled-base"
"packages/styled"
],
"sandboxes": ["pk1qjqpw67"]
}
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -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"
},
{
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap
View file
Expand Up @@ -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).\\"; }
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap
View file
@@ -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\\"
Expand All @@ -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\\"
Expand Down
28 changes: 14 additions & 14 deletions packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap
View file
Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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); }
Expand Down Expand Up @@ -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\\",
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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\\", {
Expand All @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand All @@ -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).\\"; }
Expand Down Expand Up @@ -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\\",
Expand Down Expand Up @@ -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\\", {
Expand All @@ -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\\",
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap
View file
Expand Up @@ -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\\",
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap
View file
Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand Down
28 changes: 14 additions & 14 deletions packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap
View file
Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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); }
Expand Down Expand Up @@ -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\\",
Expand Down Expand Up @@ -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).\\"; }
Expand Down Expand Up @@ -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\\", {
Expand All @@ -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).\\"; }
Expand Down Expand Up @@ -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).\\"; }
Expand All @@ -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).\\"; }
Expand Down Expand Up @@ -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\\",
Expand Down Expand Up @@ -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\\", {
Expand All @@ -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\\",
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-plugin-emotion/src/index.js
View file
Expand Up @@ -16,7 +16,7 @@ import {
} from './utils'

let webStyledMacro = createStyledMacro({
importPath: '@emotion/styled-base',
importPath: '@emotion/styled/base',
originalImportPath: '@emotion/styled',
isWeb: true
})
Expand Down Expand Up @@ -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': {
Expand Down
10 changes: 5 additions & 5 deletions packages/core/__tests__/css.js
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/emotion-server/test/util.js
View file
Expand Up @@ -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};
Expand Down

0 comments on commit f9feab1

Please sign in to comment.