Add label property and autoLabel option for babel-plugin-emotion

package.json

@@ -53,9 +53,9 @@
     "eslint-plugin-react": "^7.3.0",
     "eslint-plugin-standard": "^3.0.1",
     "hoist-non-react-statics": "^2.3.1",
-    "jest": "^20.0.4",
+    "jest": "^21.2.1",
     "jest-cli": "^20.0.4",
-    "jest-glamor-react": "^3.1.0",
+    "jest-glamor-react": "^3.1.1",
     "lerna": "^2.2.0",
     "module-alias": "^2.0.1",
     "npm-run-all": "^4.0.2",

packages/babel-plugin-emotion/README.md

@@ -17,7 +17,7 @@ The Babel Plugin is highly recommended, but not required in version 8 and above.
 | Static Extraction        |        |           ✅           | Generated CSS that is eligible for extraction can be moved to an external css file.                                                          |
 | Source Maps              |        |           ✅           | When enabled, navigate directly to the style declaration in your javascript file.                                                            |
 | `css` as Prop            |        |           ✅           | Convenient helper for calling `css` and appending the generated className during compile time.                                               |
-
+| Contextual Class Names   |        |           ✅           | Generated class names include the name of the variable or component they were defined in. 
 ## Example
 
 **In**
@@ -77,6 +77,7 @@ With options:
     ["emotion", { 
       "hoist": false,
       "sourceMap": false,
+      "autoLabel": false,
       "extractStatic": false,
       "importedNames": {
         "styled": "styled",
@@ -100,10 +101,10 @@ Use [Babel's `env` property](https://babeljs.io/docs/usage/babelrc/#env-option)
 {
   "env": {
     "production": {
-      "plugins": [["emotion", { "sourceMap": false, "hoist": true }]]
+      "plugins": [["emotion", { "sourceMap": false, "hoist": true, "autoLabel": true }]]
     },
     "development": {
-      "plugins": [["emotion", { "sourceMap": true, "hoist": false  }]]
+      "plugins": [["emotion", { "sourceMap": true, "hoist": false, "autoLabel": true  }]]
     }
   }
 }
@@ -161,6 +162,69 @@ This option enables the following:
 
 [**Documentation**](docs/source-maps.md)
 
+### `autoLabel`
+
+`boolean`, defaults to `false`.
+
+This option enables the following:
+
+ - Automatically adds the `label` property to styles so that class names generated by `css` or `styled` include the name of the variable the result is assigned to.  
+
+#### css
+
+**In**
+
+```javascript
+const brownStyles = css({ color: 'brown' });
+```
+
+**Out**
+
+```javascript
+const brownStyles = /*#__PURE__*/css({ color: 'blue' }, "label:brownStyles;");
+```
+
+`brownStyles`'s value would be `css-1q8eu9e-brownStyles`
+
+#### styled
+
+**In**
+
+```javascript
+const Profile = () => {
+  const H1 = styled.h1({
+    borderRadius: '50%',
+    transition: 'transform 400ms ease-in-out',
+    boxSizing: 'border-box',
+    display: 'flex',
+    ':hover': {
+      transform: 'scale(1.2)'
+    }
+  })
+}
+```
+
+**Out**
+
+```javascript
+const Profile = () => {
+  const H1 = /*#__PURE__*/styled('h1', {
+    label: 'H1'
+  })({
+    borderRadius: '50%',
+    transition: 'transform 400ms ease-in-out',
+    boxSizing: 'border-box',
+    display: 'flex',
+    ':hover': {
+      transform: 'scale(1.2)'
+    }
+  });
+};
+```
+
+`H1`'s class name attribute would be `css-13djram-H1`
+
+
 ### `extractStatic`
 
 `boolean`, defaults to `false`.

packages/babel-plugin-emotion/src/babel-utils.js

@@ -1,10 +1,25 @@
 import { hashArray } from './index'
 
-export function getIdentifierName(path, t) {
+function getDeclaratorName(path, t) {
   const parent = path.findParent(p => p.isVariableDeclarator())
   return parent && t.isIdentifier(parent.node.id) ? parent.node.id.name : ''
 }
 
+export function getIdentifierName(path, t) {
+  const classParent = path.findParent(p => t.isClass(p))
+  if (classParent && classParent.node.id) {
+    return t.isIdentifier(classParent.node.id) ? classParent.node.id.name : ''
+  } else if (
+    classParent &&
+    classParent.node.superClass &&
+    classParent.node.superClass.name
+  ) {
+    return `${getDeclaratorName(path, t)}(${classParent.node.superClass.name})`
+  }
+
+  return getDeclaratorName(path, t)
+}
+
 export function getRuntimeImportPath(path, t) {
   const binding = path.scope.getBinding(path.node.name)
   if (!t.isImportDeclaration(binding.path.parentPath)) {

packages/babel-plugin-emotion/src/index.js

@@ -44,7 +44,8 @@ export function replaceCssWithCallExpression(
 ) {
   try {
     let { hash, src } = createRawStringFromTemplateLiteral(path.node.quasi)
-    const name = getName(getIdentifierName(path, t), 'css')
+    const identifierName = getIdentifierName(path, t)
+    const name = getName(identifierName, 'css')
 
     if (state.extractStatic && !path.node.quasi.expressions.length) {
       const staticCSSRules = staticStylis(
@@ -68,11 +69,13 @@ export function replaceCssWithCallExpression(
     path.replaceWith(
       t.callExpression(
         identifier,
-        new ASTObject(
-          minify(src),
-          path.node.quasi.expressions,
-          t
-        ).toExpressions()
+        new ASTObject(minify(src), path.node.quasi.expressions, t)
+          .toExpressions()
+          .concat(
+            state.opts.autoLabel && identifierName
+              ? [t.stringLiteral(`label:${identifierName.trim()};`)]
+              : []
+          )
       )
     )
 
@@ -121,13 +124,28 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
   if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) {
     src += addSourceMaps(path.node.quasi.loc.start, state)
   }
+
   return t.callExpression(
-    t.callExpression(identifier, [tag]),
+    t.callExpression(
+      identifier,
+      state.opts.autoLabel && identifierName
+        ? [
+            tag,
+            t.objectExpression([
+              t.objectProperty(
+                t.identifier('label'),
+                t.stringLiteral(identifierName.trim())
+              )
+            ])
+          ]
+        : [tag]
+    ),
     new ASTObject(minify(src), path.node.quasi.expressions, t).toExpressions()
   )
 }
 
 export function buildStyledObjectCallExpression(path, state, identifier, t) {
+  const identifierName = getIdentifierName(path, t)
   const tag = t.isCallExpression(path.node.callee)
     ? path.node.callee.arguments[0]
     : t.stringLiteral(path.node.callee.property.name)
@@ -136,9 +154,26 @@ export function buildStyledObjectCallExpression(path, state, identifier, t) {
   if (state.opts.sourceMap === true && path.node.loc !== undefined) {
     args.push(t.stringLiteral(addSourceMaps(path.node.loc.start, state)))
   }
+
   path.addComment('leading', '#__PURE__')
 
-  return t.callExpression(t.callExpression(identifier, [tag]), args)
+  return t.callExpression(
+    t.callExpression(
+      identifier,
+      state.opts.autoLabel && identifierName
+        ? [
+            tag,
+            t.objectExpression([
+              t.objectProperty(
+                t.identifier('label'),
+                t.stringLiteral(identifierName.trim())
+              )
+            ])
+          ]
+        : [tag]
+    ),
+    args
+  )
 }
 
 const visited = Symbol('visited')
@@ -255,6 +290,14 @@ export default function(babel) {
               case state.importedNames.css:
               case state.importedNames.keyframes: {
                 path.addComment('leading', '#__PURE__')
+                if (state.opts.autoLabel) {
+                  const identifierName = getIdentifierName(path, t)
+                  if (identifierName) {
+                    path.node.arguments.push(
+                      t.stringLiteral(`label:${identifierName.trim()};`)
+                    )
+                  }
+                }
               }
               // eslint-disable-next-line no-fallthrough
               case state.importedNames.injectGlobal:

packages/babel-plugin-emotion/test/__snapshots__/css-prop.test.js.snap

@@ -65,6 +65,34 @@ const Profile = () => {
 };"
 `;
 
+exports[`babel css prop label in class component 1`] = `
+"import { css as _css } from \\"emotion\\";
+
+class ClsComp extends React.Component {
+  render() {
+    return <div className={/*#__PURE__*/_css(\\"foo\\", \\"label:ClsComp;\\")}>Hello</div>;
+  }
+}"
+`;
+
+exports[`babel css prop label in higher order component 1`] = `
+"import { css as _css } from \\"emotion\\";
+
+const foo = W => class extends Component {
+  render() {
+    return <div className={/*#__PURE__*/_css(\\"color:brown;\\", \\"label:foo(Component);\\")}>Hello</div>;
+  }
+};"
+`;
+
+exports[`babel css prop label in stateless functional component 1`] = `
+"import { css as _css } from \\"emotion\\";
+
+const SFC = () => {
+  return <div className={/*#__PURE__*/_css(\\"color:brown;\\", \\"label:SFC;\\")}>Hello</div>;
+};"
+`;
+
 exports[`babel css prop no css attr 1`] = `"<div></div>;"`;
 
 exports[`babel css prop no import css prop 1`] = `"<div className={merge( /*#__PURE__*/css(\\"color:brown;\\") + (\\" \\" + \`test__class\`))}></div>;"`;

packages/babel-plugin-emotion/test/__snapshots__/css.test.js.snap

@@ -68,6 +68,24 @@ const cls2 = /*#__PURE__*/css([{
 }]);"
 `;
 
+exports[`babel css inline autoLabel 1`] = `
+"
+function test() {
+  const cls1 = /*#__PURE__*/css(\\"font-size:20px;@media(min-width:420px){color:blue;\\", /*#__PURE__*/css(\\"width:96px;height:96px;\\", \\"label:cls1;\\"), \\";line-height:26px;}background:green;\\", { backgroundColor: \\"hotpink\\" }, \\";\\", \\"label:cls1;\\");
+
+  const cls2 = /*#__PURE__*/css({ color: 'blue' }, \\"label:cls2;\\");
+  const cls4 = /*#__PURE__*/css({ color: \\"hotpink\\" }, \\"label:cls4;\\");
+
+  const cls3 = /*#__PURE__*/css(\\"display:flex;&:hover{color:hotpink;}\\", \\"label:cls3;\\");
+  function inner() {
+    const styles = { color: \\"darkorchid\\" };
+    const color = 'aquamarine';
+
+    const cls4 = /*#__PURE__*/css(cls3, \\";\\", cls1, \\";\\", () => ({ color: \\"darkorchid\\" }), \\";\\", () => ({ color }), \\";\\", /*#__PURE__*/css(\\"height:420px;width:\\", styles, \\"label:cls4;\\"), \\";\\", \\"label:cls4;\\");
+  }
+}"
+`;
+
 exports[`babel css inline css basic 1`] = `
 "
 /*#__PURE__*/css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media(min-width:420px){line-height:40px;}width:\\", widthVar, \\";\\");"

packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`babel styled component autoLabel string styles 1`] = `
+"
+const Profile = () => {
+  const ProfileH1 = /*#__PURE__*/styled('h1', {
+    label: 'ProfileH1'
+  })('color:blue;');
+
+  return <H1>Hello</H1>;
+};"
+`;
+
 exports[`babel styled component extract basic 1`] = `
 "import \\"./styled.test.emotion.css\\";
 const H1 = styled(\\"h1\\", {
@@ -18,6 +29,23 @@ styled(\\"h1\\", {
 
 exports[`babel styled component extract no use 2`] = `""`;
 
+exports[`babel styled component inline autoLabel object styles 1`] = `
+"
+const Profile = () => {
+  const H1 = /*#__PURE__*/styled('h1', {
+    label: 'H1'
+  })({
+    borderRadius: '50%',
+    transition: 'transform 400ms ease-in-out',
+    boxSizing: 'border-box',
+    display: 'flex',
+    ':hover': {
+      transform: 'scale(1.2)'
+    }
+  });
+};"
+`;
+
 exports[`babel styled component inline basic 1`] = `"const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';');"`;
 
 exports[`babel styled component inline composition based on props 1`] = `

packages/babel-plugin-emotion/test/css-prop.test.js

@@ -104,6 +104,46 @@ describe('babel css prop', () => {
     expect(code).toMatchSnapshot()
   })
 
+  test('label in stateless functional component', () => {
+    const basic = `
+      const SFC = () => {
+        return <div css={\`color: brown;\`}>Hello</div>
+      }
+    `
+    const { code } = babel.transform(basic, {
+      plugins: [[plugin, { autoLabel: true }]]
+    })
+    expect(code).toMatchSnapshot()
+  })
+
+  test('label in class component', () => {
+    const basic = `
+      class ClsComp extends React.Component {
+        render() {
+          return <div css="foo">Hello</div>
+        }
+      }
+    `
+    const { code } = babel.transform(basic, {
+      plugins: [[plugin, { autoLabel: true }]]
+    })
+    expect(code).toMatchSnapshot()
+  })
+
+  test('label in higher order component', () => {
+    const basic = `
+      const foo = (W) => class extends Component {
+        render() {
+          return <div css={\`color: brown;\`}>Hello</div>
+        }
+      }
+    `
+    const { code } = babel.transform(basic, {
+      plugins: [[plugin, { autoLabel: true }]]
+    })
+    expect(code).toMatchSnapshot()
+  })
+
   test('hoisting object styles', () => {
     const basic =
       'const Profile = () => ' +