Emotion: Babel plugin doesn't work with v10 (known issue?)

[jfrolich]

When I add the v10 version of the babel plugin, all the styles are rendered incorrectly. Is this a known issue? In the codebase I don't have legacy v9 code anymore. Let me know if this is expected.

Without the babel plugin it works fine, but I kind of miss the extra things like naming and sourcemaps in development.

If necessary I can provide a repro case.

[mitchellhamilton]

This isn't expected, a repro would be great.

[ChristopherBiscardi]

I swapped some code over to v10 (including the babel plugin and all relevant libs to their v10 names) tonight and it's working as expected, so it's at least working for me.

[jfrolich]

Okay good to know. Some styles work for me but a lot is not working. I'll figure out which pattern is the culprit.

[jfrolich]

/** @jsx jsx */
import React from "react";
import ReactDOM from "react-dom";
import { jsx, css } from "@emotion/core";

const Boxy = ({ className }) => (
  <div
    css={[
      css`
        color: blue;
      `,
      className
    ]}
  >
    BLA
  </div>
);
const Box = () => (
  <div
    css={css`
      background-color: red;
    `}
  />
);

ReactDOM.render(<Box>{title}</Box>, document.getElementById("app"));

module.hot.accept();

[jfrolich]

This works correctly without the plugin, but not with

[mitchellhamilton]

It's more of a bug that that works at all, I'm gonna change it so that doesn't work at all.

You should be doing something like this instead to get the behavior you're wanting.

<div
  className={className}
  css={css`
    color: blue;
  `}
>
  BLA
</div>

[jfrolich]

It's more of a bug that that works at all, I'm gonna change it so that doesn't work at all.

You should be doing something like this instead to get the behavior you're wanting.

<div
  className={className}
  css={css`
    color: blue;
  `}
>
  BLA
</div>

Whoops really? That would really break my whole app! (and a lot of work to fix it).

If we have className and css as separate things and we cannot compose these, there is no control on precedence. Often in the real world you'd like to pass styles to a component but add custom styles before or after.

[jfrolich]

Given that it works now, why not keep it and make it a feature?

[jfrolich]

I know that with ClassNames there is a way to compose classnames, but that is really clunky for such a common use case.

[mitchellhamilton]

If we have className and css as separate things and we cannot compose these

They are composed. The class name takes precedence. It's been discussed in the past(#753) and we haven't seen a usecase for having the css prop take precedence over the class name.

[mitchellhamilton]

Given that it works now, why not keep it and make it a feature?

It disables lots of build time optimizations.

[jfrolich]

@mitchellhamilton: Actually went through hundreds of instances in our app and 95% of the time the className as higher precedence makes sense! So I think this API makes sense. But not so great for people migrating.

[tkh44]

fwiw I updated the css prop docs to document some of this better @jfrolich. Please feel free to leave feedback on that pr if you have any suggestions to improve it.

[asvetliakov]

This works:

import styled from "@emotion/styled";
const A = styled("div")`
  color: green;
`;

This doesn't:

import styled from "../some_styled_reexport";
const A = styled("div")`
  color: green;
`;

[Andarist]

Seems like the issue has been explained - emotion works as intended. Also, extra documentation around this has been added. Therefore it seems it's appropriate to close this.