Emotion: Version 8 blog article

[tkh44]

Any help reviewing and editing would be appreciated. Please let me know what you think and if I should cover any topics.

Draft Link
https://medium.com/@tkh44/css-in-js-has-arrived-9f892346d0af

Thanks!

[probablyup]

Is __PURE__ still a thing? I thought that was removed in favor of the side-effects package.json flag

[tkh44]

It looks like __PURE__ is actually an Uglify feature. I'll clear that up. Thanks @probablyup

[utopiaio]

There should be a mention of the other _breaking_ change of nested class selectors. My switch from emotion 6 to 7 caused a bit of a bump (no pun intended 😁)

---

Thank you very much for emotion, an absolute joy to work with

[smashercosmo]

Worth to mention this (very upsetting) side effect of removing "component as selector" - https://github.com/emotion-js/emotion/issues/370

[richardanaya]

I think removal of component as a selector encourages to better css component isolation. BEM offers some great suggestions of proper ways to do sub elements. Is there away to use the generated class name in as a selector with itself? Perhaps that is worth mentioning.

css' %generated-name%-subelement { color: blue; } '

My suggestion would be to also mention the new CDN packages and a link to a Jsfiddle with hello world type example! 😊

[richardanaya]

Here's my shot at a concise BEM ( http://getbem.com/introduction/ ) example:

https://codesandbox.io/s/wk2vo6zx87

import React from "react";
import { render } from "react-dom";
import { css } from "emotion";


const cssHotDog = css`
 &--hotdog-button, &--not-hotdog-button {
    border: solid 1px black;
    padding: 5px;
    margin-left: 5px
  }

  &--hotdog-button {
    background: red;
    color: white;    
  }

  &--not-hotdog-button {
    background: yellow;
    color: black;
  }
`;
const cssHotDog__hotdog_button = cssHotDog + "--hotdog-button";
const cssHotDog__not_hotdog_button = cssHotDog + "--not-hotdog-button";

const Hotdog = () => (
  <div className={cssHotDog}>
    🌭
    <button className={cssHotDog__hotdog_button}>Hotdog</button>
    <button className={cssHotDog__not_hotdog_button}>Not Hotdog</button>
  </div>
);

render(<Hotdog />, document.getElementById("root"));;