Throw a nice error when using the styled shorthand without babel-plugin-emotion and remove duplication in component selector code

packages/create-emotion-styled/src/index.js

@@ -1,5 +1,5 @@
 // @flow
-import { STYLES_KEY, TARGET_KEY } from 'emotion-utils'
+import { STYLES_KEY } from 'emotion-utils'
 import type { Emotion, Interpolations } from 'create-emotion'
 import { channel, contextTypes } from '../../emotion-theming/src/utils'
 import type { ElementType } from 'react'
@@ -14,7 +14,7 @@ import {
 } from './utils'
 
 function createEmotionStyled(emotion: Emotion, view: ReactType) {
-  const createStyled: CreateStyled = (tag, options) => {
+  let createStyled: CreateStyled = (tag, options) => {
     if (process.env.NODE_ENV !== 'production') {
       if (tag === undefined) {
         throw new Error(
@@ -133,7 +133,6 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
       Styled[STYLES_KEY] = styles
       Styled.__emotion_base = baseTag
       Styled.__emotion_real = Styled
-      Styled[TARGET_KEY] = stableClassName
       Object.defineProperty(Styled, 'toString', {
         enumerable: false,
         value() {
@@ -165,6 +164,16 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
       return Styled
     }
   }
+  if (process.env.NODE_ENV !== 'production' && typeof Proxy !== 'undefined') {
+    createStyled = new Proxy(createStyled, {
+      get(target, property) {
+        throw new Error(
+          `You're trying to use the styled shorthand without babel-plugin-emotion.` +
+            `\nPlease install and setup babel-plugin-emotion or use the function call syntax(\`styled('${property}')\` instead of \`styled.${property}\`)`
+        )
+      }
+    })
+  }
   return createStyled
 }
 

packages/create-emotion/src/index.js

@@ -1,5 +1,5 @@
 // @flow
-import { hashString, Stylis, STYLES_KEY, TARGET_KEY } from 'emotion-utils'
+import { hashString, Stylis, STYLES_KEY } from 'emotion-utils'
 import stylisRuleSheet from 'stylis-rule-sheet'
 import {
   processStyleName,
@@ -132,16 +132,7 @@ function createEmotion(
         return ''
       case 'function':
         if (interpolation[STYLES_KEY] !== undefined) {
-          if (
-            process.env.NODE_ENV !== 'production' &&
-            interpolation[TARGET_KEY] === undefined
-          ) {
-            throw new Error(
-              'Component selectors can only be used in conjunction with babel-plugin-emotion.'
-            )
-          }
-
-          return `.${interpolation[TARGET_KEY]}`
+          return interpolation.toString()
         }
         return handleInterpolation.call(
           this,

packages/create-emotion/test/__snapshots__/styled.test.js.snap

@@ -766,12 +766,6 @@ exports[`styled with higher order component that hoists statics 1`] = `
 />
 `;
 
-exports[`styled withComponent creates a new, unique stable class per invocation 1`] = `"e1x6erbc54"`;
-
-exports[`styled withComponent creates a new, unique stable class per invocation 2`] = `"e1x6erbc55"`;
-
-exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"e1x6erbc56"`;
-
 exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 .emotion-0 {
   color: green;

packages/create-emotion/test/styled.test.js

@@ -8,7 +8,6 @@ import * as emotion from './emotion-instance'
 import { createSerializer } from 'jest-emotion'
 import { ThemeProvider } from 'emotion-theming'
 import hoistNonReactStatics from 'hoist-non-react-statics'
-import { TARGET_KEY } from 'emotion-utils'
 import { mount } from 'enzyme'
 import enzymeToJson from 'enzyme-to-json'
 
@@ -1070,13 +1069,9 @@ describe('styled', () => {
     const Subtitle = Title.withComponent('h2')
     const Byline = Title.withComponent('span')
 
-    expect(Subtitle[TARGET_KEY]).not.toBe(Title[TARGET_KEY])
-    expect(Byline[TARGET_KEY]).not.toBe(Title[TARGET_KEY])
-    expect(Byline[TARGET_KEY]).not.toBe(Subtitle[TARGET_KEY])
-
-    expect(Title[TARGET_KEY]).toMatchSnapshot()
-    expect(Subtitle[TARGET_KEY]).toMatchSnapshot()
-    expect(Byline[TARGET_KEY]).toMatchSnapshot()
+    expect(Subtitle.toString()).not.toBe(Title.toString())
+    expect(Byline.toString()).not.toBe(Title.toString())
+    expect(Byline.toString()).not.toBe(Subtitle.toString())
   })
   test('name with class component', () => {
     class SomeComponent extends React.Component<{ className: string }> {

packages/emotion-utils/src/index.js

@@ -9,7 +9,6 @@ export const memoize = (fn: string => any) => {
 }
 
 export const STYLES_KEY = '__emotion_styles'
-export const TARGET_KEY = '__emotion_target'
 
 export const unitless: { [string]: 1 } = {
   animationIterationCount: 1,

packages/emotion/test/__snapshots__/component-selector.test.js.snap

@@ -27,5 +27,3 @@ exports[`component selector should be converted to use the emotion target classN
   color: blue;
 }"
 `;
-
-exports[`component selector should throw if the missing the static targeting property 1`] = `"Component selectors can only be used in conjunction with babel-plugin-emotion."`;

packages/emotion/test/component-selector.test.js

@@ -2,7 +2,6 @@ import React from 'react'
 import styled from 'react-emotion'
 import renderer from 'react-test-renderer'
 import { css, flush, sheet } from 'emotion'
-import { TARGET_KEY } from 'emotion-utils'
 
 describe('component selector', () => {
   afterEach(() => flush())
@@ -27,20 +26,4 @@ describe('component selector', () => {
     expect(tree).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
   })
-
-  test('should throw if the missing the static targeting property', () => {
-    const FakeComponent = styled.div`
-      color: blue;
-    `
-
-    delete FakeComponent[TARGET_KEY]
-
-    expect(() => {
-      css`
-        ${FakeComponent} {
-          color: red;
-        }
-      `
-    }).toThrowErrorMatchingSnapshot()
-  })
 })

packages/emotion/test/no-babel/__snapshots__/index.test.js.snap

@@ -14,6 +14,8 @@ exports[`css @supports 1`] = `
 
 exports[`css component as selectors (object syntax) 1`] = `"Component selectors can only be used in conjunction with babel-plugin-emotion."`;
 
+exports[`css component selectors without target 1`] = `"Component selectors can only be used in conjunction with babel-plugin-emotion."`;
+
 exports[`css composition 1`] = `
 .emotion-0 {
   display: -webkit-box;
@@ -229,3 +231,8 @@ exports[`css random expressions undefined return 1`] = `
   hello world
 </h1>
 `;
+
+exports[`css styled throws a nice error when using the styled shorthand without babel-plugin-emotion 1`] = `
+"You're trying to use the styled shorthand without babel-plugin-emotion.
+Please install and setup babel-plugin-emotion or use the function call syntax(\`styled('div')\` instead of \`styled.div\`)"
+`;

packages/emotion/test/no-babel/index.test.js

@@ -146,6 +146,19 @@ describe('css', () => {
       )
     }).toThrowErrorMatchingSnapshot()
   })
+  test('component selectors without target', () => {
+    const SomeComponent = styled('div')`
+      color: blue;
+    `
+
+    expect(() => {
+      css`
+        ${SomeComponent} {
+          color: red;
+        }
+      `
+    }).toThrowErrorMatchingSnapshot()
+  })
   test('glamorous style api & composition', () => {
     const H1 = styled('h1')(props => ({ fontSize: props.fontSize }))
     const H2 = styled(H1)(props => ({ flex: props.flex }), { display: 'flex' })
@@ -197,4 +210,9 @@ describe('css', () => {
 
     expect(tree).toMatchSnapshot()
   })
+  test('styled throws a nice error when using the styled shorthand without babel-plugin-emotion', () => {
+    expect(() => {
+      styled.div``
+    }).toThrowErrorMatchingSnapshot()
+  })
 })

packages/react-emotion/test/__snapshots__/index.test.js.snap

@@ -796,12 +796,6 @@ exports[`styled with higher order component that hoists statics 1`] = `
 />
 `;
 
-exports[`styled withComponent creates a new, unique stable class per invocation 1`] = `"eldhy9955"`;
-
-exports[`styled withComponent creates a new, unique stable class per invocation 2`] = `"eldhy9956"`;
-
-exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"eldhy9957"`;
-
 exports[`styled withComponent does not carry styles from flattened component 1`] = `
 .emotion-0 {
   color: hotpink;

packages/react-emotion/test/component-selectors/component-selector.test.js

@@ -77,7 +77,7 @@ test('component as selector (object syntax)', () => {
 })
 
 test('component as selector function interpolation (object syntax)', () => {
-  const H1 = styled('h1')({}, props => ({
+  const H1 = styled('h1')(props => ({
     fontSize: `${props.fontSize}px`
   }))
 

packages/react-emotion/test/index.test.js

@@ -4,7 +4,6 @@ import renderer from 'react-test-renderer'
 import styled, { css, flush } from 'react-emotion'
 import { ThemeProvider } from 'emotion-theming'
 import hoistNonReactStatics from 'hoist-non-react-statics'
-import { TARGET_KEY } from 'emotion-utils'
 import { mount } from 'enzyme'
 import enzymeToJson from 'enzyme-to-json'
 
@@ -1072,21 +1071,6 @@ describe('styled', () => {
     expect(enzymeToJson(wrapper)).toMatchSnapshot()
   })
 
-  test('withComponent creates a new, unique stable class per invocation', () => {
-    const Title = styled('h1')`
-      color: ${props => props.color || 'green'};
-    `
-    const Subtitle = Title.withComponent('h2')
-    const Byline = Title.withComponent('span')
-
-    expect(Subtitle[TARGET_KEY]).not.toBe(Title[TARGET_KEY])
-    expect(Byline[TARGET_KEY]).not.toBe(Title[TARGET_KEY])
-    expect(Byline[TARGET_KEY]).not.toBe(Subtitle[TARGET_KEY])
-
-    expect(Title[TARGET_KEY]).toMatchSnapshot()
-    expect(Subtitle[TARGET_KEY]).toMatchSnapshot()
-    expect(Byline[TARGET_KEY]).toMatchSnapshot()
-  })
   test('name with class component', () => {
     class SomeComponent extends React.Component<{ className: string }> {
       render() {