Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dev hint about css object (generated by Babel) being stringified by accident #1569

Merged
merged 1 commit into from
Oct 25, 2019

Conversation

Andarist
Copy link
Member

Followup to #1219 . I haven't noticed before that Babel can generate this object too, so it bypasses the runtime serialization and thus it doesn't have this warning attached to it.

@changeset-bot
Copy link

changeset-bot bot commented Oct 25, 2019

🦋 Changeset is good to go

Latest commit: 32fa5ac

We got this.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Andarist Andarist force-pushed the dev-hint/stringified-css-obj-babel branch from 52a96cc to c63c457 Compare October 25, 2019 09:53
@codecov
Copy link

codecov bot commented Oct 25, 2019

Codecov Report

Merging #1569 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted Files Coverage Δ
...tion/src/utils/transform-expression-with-styles.js 100% <100%> (ø) ⬆️

@@ -129,6 +136,7 @@ const SomeComponent = styled.div({
↓ ↓ ↓ ↓ ↓ ↓

import _styled from \\"@emotion/styled-base\\";
var _EMOTION_STRINGIFIED_CSS_ERROR__ = \\"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).\\";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be a function?

Copy link
Member Author

@Andarist Andarist Oct 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it should - stupid mistake 🤦‍♂ fixed!

@Andarist Andarist force-pushed the dev-hint/stringified-css-obj-babel branch from c63c457 to 7a6a458 Compare October 25, 2019 11:09
@Andarist Andarist force-pushed the dev-hint/stringified-css-obj-babel branch from 7a6a458 to 32fa5ac Compare October 25, 2019 11:17
t.returnStatement(t.stringLiteral(CSS_OBJECT_STRINGIFIED_ERROR))
])
)
cssObjectToString._compact = true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this?

Copy link
Member Author

@Andarist Andarist Oct 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A hint for babel generator, in this case it doesnt matter much - can remove it if you prefer to omit this.

It basically tells generator to print the statement in a single line, so instead of

function a() {
  return 42
}

it prints

function a() { return 42 }

Babel is using this flag when inserting helpers.

Copy link
Member

@emmatown emmatown left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!!

@emmatown emmatown merged commit 3927293 into master Oct 25, 2019
@emmatown emmatown deleted the dev-hint/stringified-css-obj-babel branch October 25, 2019 21:08
@github-actions github-actions bot mentioned this pull request Oct 25, 2019
louisgv pushed a commit to louisgv/emotion that referenced this pull request Sep 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants