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 import mapping to babel plugin #1220

Merged
merged 24 commits into from Nov 8, 2019
Merged

Conversation

emmatown
Copy link
Member

Closes #1203

This is just a sketch of what I'm thinking the api should look like right now, implementation coming soon.

cc @ndelangen wdyt of this API? (ignore the naming, it'll change, just the structure)

@netlify
Copy link

netlify bot commented Feb 10, 2019

Preview Docs

Built with commit 2f410be

https://deploy-preview-1220--emotion.netlify.com

@ndelangen
Copy link
Contributor

Yeah this API would be awesome IMHO!

@codecov
Copy link

codecov bot commented Feb 10, 2019

Codecov Report

Merging #1220 into next will increase coverage by <.01%.
The diff coverage is 98%.

Impacted Files Coverage Δ
packages/babel-preset-css-prop/src/index.js 100% <ø> (ø) ⬆️
packages/babel-plugin-emotion/src/css-macro.js 100% <100%> (ø) ⬆️
packages/babel-plugin-emotion/src/emotion-macro.js 92.59% <100%> (+3.4%) ⬆️
packages/babel-plugin-emotion/src/styled-macro.js 100% <100%> (ø) ⬆️
...abel-plugin-emotion/src/utils/transformer-macro.js 100% <100%> (ø)
...kages/babel-plugin-emotion/src/utils/add-import.js 100% <100%> (ø)
packages/babel-plugin-emotion/src/index.js 94.44% <94.28%> (-1.56%) ⬇️

@knpwrs
Copy link
Contributor

knpwrs commented Feb 15, 2019

I just spent a couple hours trying to solve babel+typescript+@emotion/styled before stumbling across this PR. This would be a great addition!

@ndelangen
Copy link
Contributor

@mitchellhamilton If you'd be able to spend the time, I'd love to assist with this, maybe do some pair programming. I'd like to learn more about this topic, and assist in the long term maintenance of this feature.

I'm in the Slack channel if you'll let me know when you're working on this, I can possibly assist and learn?

@knpwrs
Copy link
Contributor

knpwrs commented Mar 5, 2019

Is there anything the community can do to help get this through? I think this would greatly improve the usability of Emotion with TypeScript.

@ghost
Copy link

ghost commented Mar 17, 2019

This also would be really useful with custom styled components that strongly type your app theme like described here. Current situation is that babel-plugin-emotion cannot create auto labels for my themed styled component so React Dev tools still shows styled(div) etc. .

@sqal
Copy link

sqal commented Apr 9, 2019

I just spent a couple hours trying to solve babel+typescript+@emotion/styled

@knpwrs I have the same problem, have you found any workaround for this issue? or do we have to wait for this pull request to be merged?

@knpwrs
Copy link
Contributor

knpwrs commented Apr 9, 2019

As far as I can tell we have to wait for this to be merged. My "workaround" for the time being is to just live without the features of the Babel plugin because I happen to value type safety more than the features, though I would love to have both.

@emmatown
Copy link
Member Author

For everyone curious about this, this definitely something we want to add but it's caused me to think about various APIs and optimizations which I'd like to change in emotion which will affect this API so I'd like to make those changes before adding this.

@ghost
Copy link

ghost commented Apr 23, 2019

Nice to hear that you are on it.
In the mean time I give up having an overview of my styled components in react dev tools 😂

PS: not meant to be rude, appreciate the work!

(using themed custom styled)
image

@Andarist
Copy link
Member

@mitchellhamilton is there anything I could do to help move this forward? including doing other work - you have mentioned you want to prepare the groundwork for some optimizations first, could help with that

@emmatown
Copy link
Member Author

@Andarist I’ve been thinking even more and the changes I mentioned there aren’t things I want to do right now so the next thing to move this forward, the next thing to do is ensure that anything that re-exports jsx also exports css from @emotion/core and that the appropriate version of css is used. If you want to submit a PR against this branch, that would be great.

Also, other things that need to happen:

  • remove instances option (the import mapping will solve the problem that that option was trying to solve)
  • figure out good names for the things in the import mapping option.

@fforres
Copy link

fforres commented Aug 27, 2019

Hey folks :)
Wanted to re-ping on this one.
(Is it still being worked on?) Did you settle on an API?
Would love to see if there's anything we can do to help with it :)

@Andarist
Copy link
Member

@fforres if you want to help with that we would certainly appreciate the help. I was supposed to get to it, but I constantly can't find enough time to dive into it - being preoccupied with other OSS work. If you'd like to help you could join our Slack and ping me so we could discuss the details.

@fforres
Copy link

fforres commented Aug 29, 2019

Sounds good @Andarist 😄

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 7, 2019

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b8c7a5d:

Sandbox Source
Emotion Configuration

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 7, 2019

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit dcc98dd:

Sandbox Source
Emotion Configuration

default: coreCssTransformer
},
'@emotion/core': {
// jsx isn't included here because it's handled differently
Copy link
Member

Choose a reason for hiding this comment

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

what does it mean that it's handled differently? would be good to point some point of reference or an explanation here

'@emotion/core': {
// jsx isn't included here because it's handled differently
css: coreCssTransformer
// TODO: maybe write transformers for keyframes and Global
Copy link
Member

Choose a reason for hiding this comment

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

what could be handled but is not?

Copy link
Member Author

Choose a reason for hiding this comment

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

Minifying styles for keyframes and Global

Copy link
Member

Choose a reason for hiding this comment

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

K, seems interesting to me so I'm going to work on those when this PR lands.

@github-actions github-actions bot mentioned this pull request Nov 7, 2019
@emmatown emmatown merged commit c5b12d9 into next Nov 8, 2019
@emmatown emmatown deleted the babel-plugin-import-mapping branch November 8, 2019 11:06
@ndelangen
Copy link
Contributor

👏👏👏👏👏👏👏👏👏👏👏👏👏

@ersinakinci
Copy link

Has this made its way into the @emotion/babel-plugin packages that are currently available on NPM? I'm using @emotion/babel-plugin@^11.0.0-next.12 and I still have trouble with custom styled imports in TS.

@Andarist
Copy link
Member

Andarist commented May 1, 2020

Yes, this should have been released quite some time ago under the next tag. If you experience any problems please create a repro case and report an issue.

louisgv pushed a commit to louisgv/emotion that referenced this pull request Sep 6, 2020
* Add stuff to babel plugin readme

* Refactor styled macro

* Refactor other macros

* WIP more refactoring

* Fix stuff

* WIP

* stuff

* WIP stuff

* More WIP stuff

* WIP

* Add a changeset

* Remove instances option and other things

* Fix some stuff

* A bunch of FlowFixMes

* Finish implementation and add a changeset

* Update more things

* Words

* Remove obselete snapshots

* Fix stuff

* Fix docs

* Fix things

* Fix a bug
@github-actions github-actions bot mentioned this pull request Nov 10, 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.

None yet

7 participants