Remove comments from styles in babel-plugin-emotion

[emmatown]

What:

Remove comments from styles in babel-plugin-emotion

Why:

Closes #647 + the comments won't be included in prod so bundles will be smaller

How:

Use some stuff from babel-plugin-styled-components and put it into @emotion/babel-utils and use that here.

Checklist:

• Documentation N/A
• Tests
• Code complete

[codecov]

Codecov Report

Merging #650 into master will decrease coverage by 0.06%.
The diff coverage is 100%.

Impacted Files	Coverage Δ
packages/babel-plugin-emotion/src/source-map.js	100% <100%> (ø)	⬆️
packages/babel-plugin-emotion/src/index.js	96.87% <100%> (+0.04%)	⬆️
packages/babel-plugin-emotion/src/babel-utils.js	96.82% <100%> (-0.1%)	⬇️

[StJohn3D]

Hi @mitchellhamilton, Is this supposed to work with @emotion/styled/macro ?

From my testing I am still seeing inline comments like the one below appearing in my CRA 3.1.1 production bundle.

import styled from '@emotion/styled/macro'

export const StyledTest = styled.div`
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0 ;
  /* This comment should not be in production bundles */
`

[Andarist]

Should work the same, could you prepare a repro case (runnable repository) that could be investigated?

[StJohn3D]

Hi @Andarist thanks for the quick reply! I'll try to follow tomorrow.

[StJohn3D]

Hi @Andarist, so after further investigation I realized that my issue is that since I'm writing a component library - my components are only compiled with typescript and so there's no babel in the process until lib files are consumed by a real CRA. But by then it's too late. Unless there's some similar macro for ts files I think I'll have to invent one.
I'll be investigating this - https://iamturns.com/typescript-babel/

[Andarist]

Well - with CRA, unfortunately, you have limited configuration possibilities. You'd have to compile your component library with both TS and babel (which shouldn't be that hard to setup - it might be worth doing).

[StJohn3D]

@Andarist yup, that's exactly what I did. The article I linked above and this https://github.com/Microsoft/TypeScript-Babel-Starter were both very helpful in getting me there.
Thanks again for all your help!