className interpolation alternative

• emotion version: 10.0.6
• react version: 16.8.0-alpha.1

Relevant code:

import { css } from 'emotion';

const childClass = css`
  display: none;
`;

const containerClass = css`
  &:hover .${childClass} {
    display: block;
  }
`;

const Home = () => (
  <div className={containerClass}>
    <h1>Hello world</h1>
    <div className={childClass}>Hi there!</div>
  </div>
);

Problem description:

Hello, I’m getting a warning that class interpolation will not be supported in the next major release of Emotion, but I didn’t find any migration instructions for it and I’m not sure how to implement the example above without interpolation and without using “regular” class names.

I know its use is problematic when using it with composition, but I also don’t know about the alternative in the use cases like the one above. Does the warning mean the feature will be removed or does it mean it will be undocumented in 11 and there will be no guarantees after that (could be removed without notice)?

https://github.com/emotion-js/emotion/blob/86700d21ccd8bcc6fc2740c5d6b381dfe8a9bce1/packages/serialize/src/index.js#L208

[tkh44]

The easiest way is to use attributes or class names as you would before.

Class Names

import { css, cx } from 'emotion';

const childClass = css`
  display: none;
`;

const containerClass = css`
  &:hover .hidden {
    display: block;
  }
`;

const Home = () => (
  <div className={containerClass}>
    <h1>Hello world</h1>
    <div className={cx('hidden', childClass)}>Hi there!</div>
  </div>
);

Attributes

import { css } from 'emotion';

const childClass = css`
  display: none;
`;

const containerClass = css`
  &:hover [data-hidden] {
    display: block;
  }
`;

const Home = () => (
  <div className={containerClass}>
    <h1>Hello world</h1>
    <div className={childClass} data-hidden>Hi there!</div>
  </div>
);

Note that this works for any version of emotion. If the className is not recognized by emotion it will simply be appended to the className prop.

[Andarist]

Sorry, we don’t plan to bring back support for this - truth to be told we don’t believe using any descendant selectors is a good idea. It’s sometimes convenient - that’s for sure, but it makes for a tightly coupled styles which are harder to maintain over the long period of time.

And we are not alone with that. Let’s take a look at a recent post by Facebook - https://engineering.fb.com/web/facebook-redesign/ . We can find this there:

We guarantee that the styles are applied in a stable order, and we don’t support CSS descendant selectors.

If you really need to target a descendant element with emotion the best you can do is to use data attributes to select them, but again - we don’t recommend this.