Preprocessing mangling css about babel-plugin-styled-components

[kitten]

Thanks for the report, as discussed on twitter DMs :)

Do you mind including the babel output of the js file containing the component that is being incorrectly preprocessed?

Edit: Actually, I can explain what's going on here. We can't target the media.bpSmall function, since we don't know that it is a css template literal during build time, so you'll have to adapt the implementation, so that the usage matches:

media.bpSmall(css`margin-top: 0;`)

Same for the clearfix. Make sure that it returns a value, wrapped using the css helper. Also, the css helper must be used as a tagged template literal :) I hope this clears things up for you

[silverlight513]

Thanks for the quick response!

Wrapping styles in the css helper did fix a problem where values weren't being returned (on other components) but I'm not sure it's done anything to help parsing in a this case.

I've updated the component to look like this

const Wrapper = styled.div`
  ${css`${clearFix()}`}
  margin-top: ${css`${rem('10px')}`};

  ${media.bpSmall(css`
    margin-top: 0;
  `)}
`;

It's now outputting:

/* sc-component-id: Header__Wrapper-s1pjgzvd-0 */
.Header__Wrapper-s1pjgzvd-0 {}

.lhoWrm{;margin-top: ;;}.lhoWrm{&::after {
  clear: both; content: ""; display: table;
};}.lhoWrm{0.625rem;}.lhoWrm@media (min-width: 34.375rem){.lhoWrm{;}}.lhoWrm{margin-top: 0;}

[kitten]

Ok, so this is not doing anything. You have to wrap the return value of the clearfix function in css.

css is meant to be used for mixins. This means that any block of css in any interpolation needs to be parsable at build time. So this means whatever you return in clearFix needs to return its css inside the css helper.

E.g.:

const clearFix = () => css`some css...`

The media helper is looking fine, assuming you update media.bpSmall not to accept all args, but to be sth like:

const bpSmall = mixin => css`
  @media (max-width: 1000px) {
    ${mixin}
  }

Then it of course just inlines the mixin, which is wrapped outside inside css.

The rem output on the other hand must not to be wrapped, since it's a value.