Skip to content

Implement the plugin as a babel macro#142

Merged
emmatown merged 35 commits into
emotion-js:masterfrom
emmatown:babel-macro
Jul 16, 2017
Merged

Implement the plugin as a babel macro#142
emmatown merged 35 commits into
emotion-js:masterfrom
emmatown:babel-macro

Conversation

@emmatown
Copy link
Copy Markdown
Member

@emmatown emmatown commented Jul 13, 2017

What:

Allow people to use the plugin as a babel macro.

import styled from 'emotion/react/macro'
import { css } from 'emotion/macro'

Why:

#132

How:

Abstract stuff in babel.js

Checklist:

  • Documentation
  • Tests
  • Code complete

I based this off #130 so I could make the react styled import emotion/react/macro (we need to have separate macros for each runtime version of styled since we have to add imports to the runtime, I'm gonna abstract this away so it won't have a big maintenance cost)

This is very work in progress and it will have to change a bunch.

The only thing that we can't do with a babel macro is the css prop. (I think)

  • styled tagged template literal
  • styled object
  • css
  • keyframes
  • injectGlobal
  • fontFace
  • commonjs requires babel-macros only supports importing defaults with commonjs so just supporting this for styled doesn't seem worth it imo. Throw an error if the macro is imported with commonjs
  • Vue
  • import paths; emotion/macro, emotion/react/macro, emotion/vue/macro
  • use ES imports to import runtime
  • export things in index that don't need transforming from macro

Closes #132
Closes #112

Just a note: #130 should be merged before this

@codecov-io
Copy link
Copy Markdown

codecov-io commented Jul 13, 2017

Codecov Report

Merging #142 into master will increase coverage by 1.07%.
The diff coverage is 98.13%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #142      +/-   ##
==========================================
+ Coverage   89.08%   90.15%   +1.07%     
==========================================
  Files          18       22       +4     
  Lines         632      701      +69     
  Branches      145      167      +22     
==========================================
+ Hits          563      632      +69     
  Misses         56       56              
  Partials       13       13
Impacted Files Coverage Δ
src/vue/index.js 100% <ø> (ø)
src/macro-styled.js 100% <100%> (ø)
src/react/macro.js 100% <100%> (ø)
src/babel-utils.js 100% <100%> (ø)
src/macro.js 100% <100%> (ø)
src/babel.js 98.11% <96.7%> (-0.02%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a66bb0e...dac1dca. Read the comment docs.

@emmatown emmatown requested a review from tkh44 July 15, 2017 09:54
@emmatown emmatown merged commit b83fc85 into emotion-js:master Jul 16, 2017
@emmatown emmatown deleted the babel-macro branch July 16, 2017 03:55
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.

Implement the plugin as a babel macro. babel-macros compat

3 participants