Add identifier name to styled class

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": [

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)
     )

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/__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",

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\\";"
 `;

test/babel/__snapshots__/macro.test.js.snap

@@ -146,15 +146,15 @@ 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'
 }]);"
 `;
 
 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'
   };