Add import mapping to babel plugin #1220

emmatown · 2019-02-10T01:38:08Z

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 · 2019-02-10T01:41:28Z

Preview Docs

Built with commit 2f410be

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

ndelangen · 2019-02-10T10:13:48Z

Yeah this API would be awesome IMHO!

codecov · 2019-02-10T12:09:46Z

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 · 2019-02-15T02:11:56Z

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 · 2019-02-24T14:19:45Z

@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 · 2019-03-05T13:19:57Z

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 · 2019-03-17T07:46:59Z

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 · 2019-04-09T11:30:49Z

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 · 2019-04-09T12:25:34Z

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 · 2019-04-11T04:23:39Z

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 · 2019-04-23T14:11:07Z

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)

Andarist · 2019-05-30T15:48:34Z

@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 · 2019-05-30T21:28:42Z

@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 · 2019-08-27T17:50:07Z

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 · 2019-08-27T20:20:31Z

@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 · 2019-08-29T04:14:53Z

Sounds good @Andarist 😄

codesandbox-ci · 2019-11-07T14:12:33Z

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 · 2019-11-07T14:13:59Z

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

Andarist · 2019-11-07T16:57:27Z

packages/babel-plugin-emotion/src/index.js

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


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

Andarist · 2019-11-07T16:57:42Z

packages/babel-plugin-emotion/src/index.js

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


what could be handled but is not?

Minifying styles for keyframes and Global

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

packages/babel-preset-css-prop/src/index.js

ndelangen · 2019-11-08T16:56:06Z

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

ersinakinci · 2020-05-01T15:46:45Z

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 · 2020-05-01T21:35:21Z

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.

* 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

Add stuff to babel plugin readme

7362ca9

emmatown added 3 commits February 10, 2019 21:30

Refactor styled macro

6e43050

Refactor other macros

5e02adb

WIP more refactoring

3be7410

Fix stuff

96acab5

WIP

33325b4

emmatown added 4 commits March 6, 2019 12:27

stuff

a557cba

Merge branch 'master' into babel-plugin-import-mapping

e61677d

WIP stuff

2f410be

More WIP stuff

97913a5

WIP

4210def

kristofdombi mentioned this pull request May 14, 2019

Component selectors don't work with TypeScript CreateStyled<Theme> #1320

Closed

Andarist mentioned this pull request Jun 6, 2019

Component selectors not working with @emotion/babel-preset-css-prop #1346

Closed

Andarist mentioned this pull request Jul 16, 2019

transpile typescript to babel-plugin-emotion doesn't work #535

Closed

emmatown added 6 commits November 7, 2019 23:27

Remove instances option and other things

9542156

Fix some stuff

d66f1e7

A bunch of FlowFixMes

5d9d9fa

Finish implementation and add a changeset

6062999

Update more things

b8c7a5d

Words

d1eb462

Remove obselete snapshots

ed0f63e

Andarist reviewed Nov 7, 2019

View reviewed changes

packages/babel-preset-css-prop/src/index.js Show resolved Hide resolved

github-actions bot mentioned this pull request Nov 7, 2019

Version Packages #1612

Merged

emmatown added 4 commits November 8, 2019 07:17

Fix stuff

9943f1a

Fix docs

b74fc93

Fix things

c05d09b

Fix a bug

dcc98dd

emmatown merged commit c5b12d9 into next Nov 8, 2019

emmatown deleted the babel-plugin-import-mapping branch November 8, 2019 11:06

Andarist mentioned this pull request Nov 28, 2019

babel-emotion-plugin not working with custom instances #1657

Closed

hennessyevan mentioned this pull request Jan 21, 2020

Emotion v11 styled-components/xstyled#84

Closed

lychyi mentioned this pull request Feb 19, 2020

fix(button): Fix Component Selector Issue Workday/canvas-kit#474

Merged

9 tasks

Andarist mentioned this pull request Mar 13, 2020

babel-preset-css-prop fails to put label when theme is typed #1785

Closed

Andarist mentioned this pull request Sep 8, 2020

[babel-plugin] Component name in className dosnt work when use CreateStyled #2001

Closed

github-actions bot mentioned this pull request Nov 10, 2020

Version Packages #2046

Merged

JackUait mentioned this pull request Jun 12, 2022

fix(react-ui): CSS minification skbkontur/retail-ui#2913

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add import mapping to babel plugin #1220

Add import mapping to babel plugin #1220

emmatown commented Feb 10, 2019

netlify bot commented Feb 10, 2019 •

edited

Loading

ndelangen commented Feb 10, 2019

codecov bot commented Feb 10, 2019 •

edited

Loading

knpwrs commented Feb 15, 2019

ndelangen commented Feb 24, 2019

knpwrs commented Mar 5, 2019

ghost commented Mar 17, 2019

sqal commented Apr 9, 2019

knpwrs commented Apr 9, 2019

emmatown commented Apr 11, 2019

ghost commented Apr 23, 2019 •

edited by ghost

Loading

Andarist commented May 30, 2019

emmatown commented May 30, 2019

fforres commented Aug 27, 2019

Andarist commented Aug 27, 2019

fforres commented Aug 29, 2019

codesandbox-ci bot commented Nov 7, 2019

codesandbox-ci bot commented Nov 7, 2019 •

edited

Loading

Andarist Nov 7, 2019

Andarist Nov 7, 2019

emmatown Nov 7, 2019

Andarist Nov 7, 2019

ndelangen commented Nov 8, 2019

ersinakinci commented May 1, 2020

Andarist commented May 1, 2020

Add import mapping to babel plugin #1220

Add import mapping to babel plugin #1220

Conversation

emmatown commented Feb 10, 2019

netlify bot commented Feb 10, 2019 • edited Loading

ndelangen commented Feb 10, 2019

codecov bot commented Feb 10, 2019 • edited Loading

Codecov Report

knpwrs commented Feb 15, 2019

ndelangen commented Feb 24, 2019

knpwrs commented Mar 5, 2019

ghost commented Mar 17, 2019

sqal commented Apr 9, 2019

knpwrs commented Apr 9, 2019

emmatown commented Apr 11, 2019

ghost commented Apr 23, 2019 • edited by ghost Loading

Andarist commented May 30, 2019

emmatown commented May 30, 2019

fforres commented Aug 27, 2019

Andarist commented Aug 27, 2019

fforres commented Aug 29, 2019

codesandbox-ci bot commented Nov 7, 2019

codesandbox-ci bot commented Nov 7, 2019 • edited Loading

Andarist Nov 7, 2019

Choose a reason for hiding this comment

Andarist Nov 7, 2019

Choose a reason for hiding this comment

emmatown Nov 7, 2019

Choose a reason for hiding this comment

Andarist Nov 7, 2019

Choose a reason for hiding this comment

ndelangen commented Nov 8, 2019

ersinakinci commented May 1, 2020

Andarist commented May 1, 2020

netlify bot commented Feb 10, 2019 •

edited

Loading

codecov bot commented Feb 10, 2019 •

edited

Loading

ghost commented Apr 23, 2019 •

edited by ghost

Loading

codesandbox-ci bot commented Nov 7, 2019 •

edited

Loading