Repository: tkh44/emotion (js)

Issue:
Class names generated with `getComponentId` should have the identifier name in them.

```jsx
const Block = styled('div')`display:block;`
```

should have a generated class name like `css-Block-12345`

Pull request:
Add identifier name to styled class

<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**: Add identifier name to styled class used for nested selectors

<!-- Why are these changes necessary? -->
**Why**: Closes #247

<!-- How were these changes implemented? -->
**How**: Use `getIdentifierName` to get the identifier name and add the name to the class returned by `getComponentId`

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation N/A
- [x] Tests
- [x] Code complete

<!-- feel free to add additional comments -->

This also fully removes the name property stuff

Patch:
diff --git a/package.json b/package.json
index 6d303b4c..7b2af1fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emotion",
-  "version": "7.0.12",
+  "version": "7.0.13",
   "description": "high performance css-in-js",
   "main": "lib/index.js",
   "files": [
diff --git a/src/babel.js b/src/babel.js
index 4a830a1e..84be8b5a 100644
--- a/src/babel.js
+++ b/src/babel.js
@@ -8,7 +8,7 @@ import {
   relative
 } from 'path'
 import { touchSync } from 'touch'
-import { inline } from './inline'
+import { inline, getName } from './inline'
 import { parseCSS } from './parser'
 import { getIdentifierName } from './babel-utils'
 import { map } from './utils'
@@ -136,10 +136,10 @@ const getNextId = state => {
   return id
 }
 
-const getComponentId = state => {
+const getComponentId = (state, prefix: string = 'css') => {
   // Prefix the identifier with css- because CSS classes cannot start with a number
   // Also in snapshots with jest-glamor-react the hash will be replaced with an index
-  return `css-${getFileHash(state)}${getNextId(state)}`
+  return `${prefix}-${getFileHash(state)}${getNextId(state)}`
 }
 
 export function buildStyledCallExpression(identifier, tag, path, state, t) {
@@ -158,12 +158,12 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
     state.insertStaticRules(staticCSSRules)
     return t.callExpression(identifier, [
       tag,
-      t.stringLiteral(getComponentId(state)),
+      t.stringLiteral(getComponentId(state, name)),
       t.arrayExpression([t.stringLiteral(`${name}-${hash}`)])
     ])
   }
 
-  const { src } = inline(path.node.quasi, identifierName, 'css')
+  const { src, name } = inline(path.node.quasi, identifierName, 'css')
 
   path.addComment('leading', '#__PURE__')
 
@@ -173,7 +173,7 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
   const vars = path.node.quasi.expressions.slice(composesCount)
   const args = [
     tag,
-    t.stringLiteral(getComponentId(state)),
+    t.stringLiteral(getComponentId(state, name)),
     t.arrayExpression(objs),
     t.arrayExpression(vars),
     t.functionExpression(
@@ -194,7 +194,9 @@ export function buildStyledObjectCallExpression(path, state, identifier, t) {
     : t.stringLiteral(path.node.callee.property.name)
   return t.callExpression(identifier, [
     tag,
-    t.stringLiteral(getComponentId(state)),
+    t.stringLiteral(
+      getComponentId(state, getName(getIdentifierName(path, t), 'css'))
+    ),
     t.arrayExpression(
       buildProcessedStylesFromObjectAST(path.node.arguments, path, t)
     )
diff --git a/src/inline.js b/src/inline.js
index 3d54d113..f13e1f7a 100644
--- a/src/inline.js
+++ b/src/inline.js
@@ -1,24 +1,10 @@
 // @flow
 import { hashArray } from './hash'
 
-function extractNameFromProperty(str: string) {
-  let regex = /name\s*:\s*([A-Za-z0-9\-_]+)\s*/gm
-  let match = regex.exec(str)
-  if (match) {
-    return match[1]
-  }
-}
-
-function getName(
-  extracted?: string,
-  identifierName?: string,
-  prefix: string
-): string {
+export function getName(identifierName?: string, prefix: string): string {
   const parts = []
   parts.push(prefix)
-  if (extracted) {
-    parts.push(extracted)
-  } else if (identifierName) {
+  if (identifierName) {
     parts.push(identifierName)
   }
   return parts.join('-')
@@ -53,11 +39,7 @@ export function inline(
 } {
   let strs = quasi.quasis.map(x => x.value.cooked)
   let hash = hashArray([...strs])
-  let name = getName(
-    extractNameFromProperty(strs.join('xxx')),
-    identifierName,
-    prefix
-  )
+  let name = getName(identifierName, prefix)
   let { src } = createRawStringFromQuasi(strs)
 
   return {


Test patch:
diff --git a/test/__snapshots__/server.test.js.snap b/test/__snapshots__/server.test.js.snap
index f9574381..9d5b9df7 100644
--- a/test/__snapshots__/server.test.js.snap
+++ b/test/__snapshots__/server.test.js.snap
@@ -3,7 +3,7 @@
 exports[`extractCritical returns static css 1`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}",
-  "html": "<main class=\\"css-dggzbb0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1313188322\\"><img size=\\"30\\" class=\\"css-dggzbb1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-dggzbb1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-dggzbb1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-Main-dggzbb0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"331374080\\"><img size=\\"30\\" class=\\"css-Image-dggzbb1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-dggzbb1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-Image-dggzbb1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",
@@ -40,7 +40,7 @@ Object {
 exports[`extractCritical returns static css 2`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}",
-  "html": "<main class=\\"css-dggzbb0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1508825546\\"><div data-reactid=\\"2\\">Hello</div></main>",
+  "html": "<main class=\\"css-Main-dggzbb0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"1808410600\\"><div data-reactid=\\"2\\">Hello</div></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",
@@ -73,7 +73,7 @@ Object {
 exports[`hydration only rules that are not in the critical css are inserted 1`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}",
-  "html": "<main class=\\"css-dggzbb0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1313188322\\"><img size=\\"30\\" class=\\"css-dggzbb1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-dggzbb1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-dggzbb1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-Main-dggzbb0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"331374080\\"><img size=\\"30\\" class=\\"css-Image-dggzbb1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-dggzbb1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-Image-dggzbb1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",
diff --git a/test/babel/__snapshots__/fs.test.js.snap b/test/babel/__snapshots__/fs.test.js.snap
index e0839964..f322c16c 100644
--- a/test/babel/__snapshots__/fs.test.js.snap
+++ b/test/babel/__snapshots__/fs.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`babel plugin fs creates and writes to the css file when it does not exist 1`] = `
-".css-class-1yfv4zm {
+".css-1yfv4zm {
     margin: 12px 48px;
     color: #ffffff; color: blue;
     display: -webkit-box; display: -ms-flexbox; display: flex;
@@ -15,17 +15,17 @@ exports[`babel plugin fs creates and writes to the css file when it does not exi
 exports[`babel plugin fs creates and writes to the css file when it does not exist 2`] = `
 "import \\"./fs.test.emotion.css\\";
 
-\\"css-class-1yfv4zm\\";"
+\\"css-1yfv4zm\\";"
 `;
 
 exports[`babel plugin fs does not write to the css file when it is the same as is already written 1`] = `
 "import \\"./fs.test.emotion.css\\";
 
-\\"css-class-1yfv4zm\\";"
+\\"css-1yfv4zm\\";"
 `;
 
 exports[`babel plugin fs writes to the css file when it does exist  1`] = `
-".css-class-1yfv4zm {
+".css-1yfv4zm {
     margin: 12px 48px;
     color: #ffffff; color: blue;
     display: -webkit-box; display: -ms-flexbox; display: flex;
@@ -39,5 +39,5 @@ exports[`babel plugin fs writes to the css file when it does exist  1`] = `
 exports[`babel plugin fs writes to the css file when it does exist  2`] = `
 "import \\"./fs.test.emotion.css\\";
 
-\\"css-class-1yfv4zm\\";"
+\\"css-1yfv4zm\\";"
 `;
diff --git a/test/babel/__snapshots__/macro.test.js.snap b/test/babel/__snapshots__/macro.test.js.snap
index 732ebe61..56b47295 100644
--- a/test/babel/__snapshots__/macro.test.js.snap
+++ b/test/babel/__snapshots__/macro.test.js.snap
@@ -146,7 +146,7 @@ const someCls = /*#__PURE__*/_css([], [], function createEmotionStyledRules() {
 exports[`babel macro styled object function 1`] = `
 "import _styled from '../../src/react';
 
-const SomeComponent = _styled('div', 'css-1qt67l90', [{
+const SomeComponent = _styled('div', 'css-SomeComponent-1qt67l90', [{
   'display': '-webkit-box; display: -ms-flexbox; display: flex'
 }]);"
 `;
@@ -154,7 +154,7 @@ const SomeComponent = _styled('div', 'css-1qt67l90', [{
 exports[`babel macro styled object member 1`] = `
 "import _styled from '../../src/react';
 
-const SomeComponent = _styled('div', 'css-7m1noz0', [{
+const SomeComponent = _styled('div', 'css-SomeComponent-7m1noz0', [{
   'display': '-webkit-box; display: -ms-flexbox; display: flex'
 }]);"
 `;
@@ -168,7 +168,7 @@ const someOtherVar = _thisDoesNotExist;"
 exports[`babel macro styled tagged template literal function 1`] = `
 "import _styled from '../../src/react';
 
-const SomeComponent = /*#__PURE__*/_styled('div', 'css-kctxs00', [], [], function createEmotionStyledRules() {
+const SomeComponent = /*#__PURE__*/_styled('div', 'css-SomeComponent-kctxs00', [], [], function createEmotionStyledRules() {
   return {
     'display': '-webkit-box; display: -ms-flexbox; display: flex'
   };
@@ -178,7 +178,7 @@ const SomeComponent = /*#__PURE__*/_styled('div', 'css-kctxs00', [], [], functio
 exports[`babel macro styled tagged template literal member 1`] = `
 "import _styled from '../../src/react';
 
-const SomeComponent = /*#__PURE__*/_styled('div', 'css-1mkpack0', [], [], function createEmotionStyledRules() {
+const SomeComponent = /*#__PURE__*/_styled('div', 'css-SomeComponent-1mkpack0', [], [], function createEmotionStyledRules() {
   return {
     'display': '-webkit-box; display: -ms-flexbox; display: flex'
   };
diff --git a/test/babel/__snapshots__/styled.test.js.snap b/test/babel/__snapshots__/styled.test.js.snap
index 32d18b3d..3f62331f 100644
--- a/test/babel/__snapshots__/styled.test.js.snap
+++ b/test/babel/__snapshots__/styled.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`babel styled component extract basic 1`] = `
 "import \\"./styled.test.emotion.css\\";
-const H1 = styled(\\"h1\\", \\"css-1qcxcvu0\\", [\\"styled-H1-10x82eg\\"]);"
+const H1 = styled(\\"h1\\", \\"styled-H1-1qcxcvu0\\", [\\"styled-H1-10x82eg\\"]);"
 `;
 
 exports[`babel styled component extract basic 2`] = `
@@ -37,13 +37,13 @@ exports[`babel styled component extract basic 2`] = `
 
 exports[`babel styled component extract no use 1`] = `
 "import \\"./styled.test.emotion.css\\";
-styled(\\"h1\\", \\"css-yoisj70\\", [\\"styled-0\\"]);"
+styled(\\"h1\\", \\"styled-yoisj70\\", [\\"styled-0\\"]);"
 `;
 
 exports[`babel styled component extract no use 2`] = `".styled-0 {}"`;
 
 exports[`babel styled component inline basic 1`] = `
-"const H1 = /*#__PURE__*/styled('h1', 'css-uutogn0', [], [fontSize + 'px'], function createEmotionStyledRules(x0) {
+"const H1 = /*#__PURE__*/styled('h1', 'css-H1-uutogn0', [], [fontSize + 'px'], function createEmotionStyledRules(x0) {
   return {
     'fontSize': x0
   };
@@ -56,7 +56,7 @@ exports[`babel styled component inline composes based on props 1`] = `
     'width': '20px'
   }];
 });
-const H1 = /*#__PURE__*/styled('h1', 'css-gzpfex0', [props => {
+const H1 = /*#__PURE__*/styled('h1', 'css-H1-gzpfex0', [props => {
   return props.a ? cssA : cssB;
 }], [fontSize + 'px', props => props.translateX], function createEmotionStyledRules(x0, x1) {
   return {
@@ -69,7 +69,7 @@ const H1 = /*#__PURE__*/styled('h1', 'css-gzpfex0', [props => {
 `;
 
 exports[`babel styled component inline dynamic fns 1`] = `
-"const Avatar = /*#__PURE__*/styled('img', 'css-t98w700', [], [props => props.theme.borderRadius, props => props.theme.borderColor], function createEmotionStyledRules(x0, x1) {
+"const Avatar = /*#__PURE__*/styled('img', 'css-Avatar-t98w700', [], [props => props.theme.borderRadius, props => props.theme.borderColor], function createEmotionStyledRules(x0, x1) {
   return {
     'width': '96px',
     'height': '96px',
@@ -89,7 +89,7 @@ exports[`babel styled component inline function call 1`] = `
 
 exports[`babel styled component inline interpolation in different places 1`] = `
 "
-const H1 = /*#__PURE__*/styled('h1', 'css-16hd4av0', [], [fontSize + 'px', props => props.translateX, something, something, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX], function createEmotionStyledRules(x0, x1, x2, x3, x4, x5, x6, x7, x8, x9) {
+const H1 = /*#__PURE__*/styled('h1', 'css-H1-16hd4av0', [], [fontSize + 'px', props => props.translateX, something, something, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX], function createEmotionStyledRules(x0, x1, x2, x3, x4, x5, x6, x7, x8, x9) {
   return {
     'fontSize': x0,
     'height': '20px',
@@ -104,7 +104,7 @@ const H1 = /*#__PURE__*/styled('h1', 'css-16hd4av0', [], [fontSize + 'px', props
 `;
 
 exports[`babel styled component inline media query 1`] = `
-"const H1 = /*#__PURE__*/styled(\\"h1\\", \\"css-bom4yv0\\", [], [], function createEmotionStyledRules() {
+"const H1 = /*#__PURE__*/styled(\\"h1\\", \\"css-H1-bom4yv0\\", [], [], function createEmotionStyledRules() {
   return {
     \\"@media print\\": {
       \\"fontSize\\": \\"10pt\\"
@@ -129,7 +129,7 @@ exports[`babel styled component inline media query 1`] = `
 `;
 
 exports[`babel styled component inline more than 10 dynamic values 1`] = `
-"const H1 = /*#__PURE__*/styled('h1', 'css-kzo7z60', [], ['underline', 54, 'white', 'black', 'block', '3px', '25px', '500px', 100, '18px', 'center', p => p.theme.blue], function createEmotionStyledRules(x0, x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11) {
+"const H1 = /*#__PURE__*/styled('h1', 'css-H1-kzo7z60', [], ['underline', 54, 'white', 'black', 'block', '3px', '25px', '500px', 100, '18px', 'center', p => p.theme.blue], function createEmotionStyledRules(x0, x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11) {
       return {
             'WebkitTextDecoration': x0,
             'textDecoration': x0,
@@ -149,7 +149,7 @@ exports[`babel styled component inline more than 10 dynamic values 1`] = `
 `;
 
 exports[`babel styled component inline nested 1`] = `
-"const H1 = /*#__PURE__*/styled('h1', 'css-17vfrab0', [], [fontSize + 'px'], function createEmotionStyledRules(x0) {
+"const H1 = /*#__PURE__*/styled('h1', 'css-H1-17vfrab0', [], [fontSize + 'px'], function createEmotionStyledRules(x0) {
   return {
     'fontSize': x0,
     '& div': {
@@ -178,14 +178,14 @@ exports[`babel styled component inline no use 1`] = `
 
 exports[`babel styled component inline object composes with classes 1`] = `
 "
-const H1 = styled('h1', 'css-lkmdj60', ['some-class', props => ({
+const H1 = styled('h1', 'css-H1-lkmdj60', ['some-class', props => ({
   display: props.display
 })]);"
 `;
 
 exports[`babel styled component inline objects based on props 1`] = `
 "
-const H1 = styled('h1', 'css-b0u92b0', [{
+const H1 = styled('h1', 'css-H1-b0u92b0', [{
   'padding': '10px'
 }, props => ({
   display: props.display
@@ -194,14 +194,14 @@ const H1 = styled('h1', 'css-b0u92b0', [{
 
 exports[`babel styled component inline objects fn call 1`] = `
 "
-const H1 = styled('h1', 'css-ihhgvu0', [{
+const H1 = styled('h1', 'css-H1-ihhgvu0', [{
   'display': '-webkit-box; display: -ms-flexbox; display: flex'
 }]);"
 `;
 
 exports[`babel styled component inline objects prefixed 1`] = `
 "
-const H1 = styled('h1', 'css-13vphhj0', [{
+const H1 = styled('h1', 'css-H1-13vphhj0', [{
   'borderRadius': '50%',
   'WebkitTransition': '-webkit-transform 400ms ease-in-out',
   'transition': '-webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out',
@@ -242,14 +242,14 @@ const a = () => /*#__PURE__*/css([], [], function createEmotionStyledRules() {
 `;
 
 exports[`babel styled component inline shorthand property 1`] = `
-"const H1 = styled(\\"h1\\", \\"css-1o8pmqr0\\", [{
+"const H1 = styled(\\"h1\\", \\"css-H1-1o8pmqr0\\", [{
   \\"fontSize\\": fontSize
 }]);"
 `;
 
 exports[`babel styled component inline styled component as selector 1`] = `
 "
-const SomeComponent = /*#__PURE__*/styled(\\"div\\", \\"css-1jq2uck0\\", [], [], function createEmotionStyledRules() {
+const SomeComponent = /*#__PURE__*/styled(\\"div\\", \\"css-SomeComponent-1jq2uck0\\", [], [], function createEmotionStyledRules() {
   return {};
 });
 /*#__PURE__*/styled(\\"h1\\", \\"css-1jq2uck1\\", [], [SomeComponent], function createEmotionStyledRules(x0) {
@@ -264,7 +264,7 @@ const SomeComponent = /*#__PURE__*/styled(\\"div\\", \\"css-1jq2uck0\\", [], [],
 
 exports[`babel styled component inline styled objects prefixed 1`] = `
 "
-const H1 = styled('h1', 'css-3mpmja0', [{
+const H1 = styled('h1', 'css-H1-3mpmja0', [{
   'borderRadius': '50%',
   'WebkitTransition': '-webkit-transform 400ms ease-in-out',
   'transition': '-webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out',
@@ -282,7 +282,7 @@ const H1 = styled('h1', 'css-3mpmja0', [{
 
 exports[`babel styled component inline styled. objects 1`] = `
 "
-const H1 = styled(\\"h1\\", \\"css-hqyr220\\", [{
+const H1 = styled(\\"h1\\", \\"css-H1-hqyr220\\", [{
   \\"padding\\": \\"10px\\"
 }, props => ({
   display: props.display
@@ -292,7 +292,7 @@ const H1 = styled(\\"h1\\", \\"css-hqyr220\\", [{
 exports[`babel styled component inline styled. objects with a multiple spread properties 1`] = `
 "
 const defaultText = { fontSize: 20 };
-const Figure = styled(\\"figure\\", \\"css-1f2fuyv0\\", [{
+const Figure = styled(\\"figure\\", \\"css-Figure-1f2fuyv0\\", [{
   ...defaultText,
   ...defaultFigure
 }]);"
@@ -301,7 +301,7 @@ const Figure = styled(\\"figure\\", \\"css-1f2fuyv0\\", [{
 exports[`babel styled component inline styled. objects with a multiple spread properties and other keys 1`] = `
 "
 const defaultText = { fontSize: 20 };
-const Figure = styled('figure', 'css-lb5dzq0', [{
+const Figure = styled('figure', 'css-Figure-lb5dzq0', [{
   ...defaultText,
   'fontSize': '20px',
 
@@ -313,7 +313,7 @@ const Figure = styled('figure', 'css-lb5dzq0', [{
 exports[`babel styled component inline styled. objects with a single spread property 1`] = `
 "
 const defaultText = { fontSize: 20 };
-const Figure = styled(\\"figure\\", \\"css-1mp0w960\\", [{
+const Figure = styled(\\"figure\\", \\"css-Figure-1mp0w960\\", [{
   ...defaultText
 }]);"
 `;
diff --git a/test/extract/__snapshots__/extract.test.js.snap b/test/extract/__snapshots__/extract.test.js.snap
index 0dbc6c40..b3cce8a2 100644
--- a/test/extract/__snapshots__/extract.test.js.snap
+++ b/test/extract/__snapshots__/extract.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`styled basic render nested 1`] = `
 <h1
-  className="styled-H1-1f87tx4 css-1xmce851"
+  className="styled-H1-1f87tx4 styled-H1-1xmce851"
 >
   hello world
 </h1>
@@ -10,7 +10,7 @@ exports[`styled basic render nested 1`] = `
 
 exports[`styled name 1`] = `
 <h1
-  className="styled-FancyH1-131pfth css-1xmce852"
+  className="styled-H1-131pfth styled-H1-1xmce852"
 >
   hello world
 </h1>
@@ -18,7 +18,7 @@ exports[`styled name 1`] = `
 
 exports[`styled no dynamic 1`] = `
 <h1
-  className="styled-H1-ijh7uz css-1xmce850"
+  className="styled-H1-ijh7uz styled-H1-1xmce850"
 >
   hello world
 </h1>
@@ -40,7 +40,7 @@ exports[`styled writes the correct css 1`] = `
 .styled-H1-1f87tx4 span:hover:after {
     content: \\"after\\"
 }
-.styled-FancyH1-131pfth {
+.styled-H1-131pfth {
     name: FancyH1;
     font-size: 38px
 }
diff --git a/test/extract/extract.test.emotion.css b/test/extract/extract.test.emotion.css
index 923a54b7..8485abdd 100644
--- a/test/extract/extract.test.emotion.css
+++ b/test/extract/extract.test.emotion.css
@@ -13,7 +13,7 @@
 .styled-H1-1f87tx4 span:hover:after {
     content: "after"
 }
-.styled-FancyH1-131pfth {
+.styled-H1-131pfth {
     name: FancyH1;
     font-size: 38px
 }