Merge ef0da1c into f78602a

.babelrc

@@ -1,5 +1,3 @@
 {
-  "presets": [
-    "@helpscout/zero/babel"
-  ]
+  "presets": ["@helpscout/zero/babel"]
 }

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@helpscout/zero/prettier')

.storybook/.babelrc

@@ -1,9 +1,3 @@
 {
-  "presets": ["env", "react", "flow"],
-  "plugins": [
-    "emotion",
-    "transform-class-properties",
-    "transform-flow-strip-types",
-    "transform-object-rest-spread"
-  ]
+  "presets": ["@helpscout/zero/babel"]
 }

package.json

@@ -6,23 +6,20 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "zero build",
-    "bundle": "zero build --bundle",
+    "bundle": "zerobundle",
     "lint": "zero lint",
     "dev": "zero test --watchAll",
     "test": "zero test --coverage",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "zero validate",
-    "setup": "npm install && npm run validate -s",
-    "precommit": "zero precommit",
-    "clean": "rm -rf dist lib",
+    "precommit": "zero pre-commit",
     "coverage": "nyc report --temp-directory=coverage --reporter=text-lcov | coveralls",
-    "release": "np",
+    "release": "zero release",
     "version": "npm run build",
     "start": "npm run storybook",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prettier": "prettier \"src/**/*.js\" --write",
-    "pretty": "npm run prettier"
+    "pretty": "zero format"
   },
   "author": "Jon Quach <hello@jonquach.com> (https://jonquach.com)",
   "license": "MIT",
@@ -55,31 +52,28 @@
     "@emotion/memoize": "0.6.6",
     "@emotion/stylis": "0.7.1",
     "@emotion/unitless": "0.6.7",
-    "@helpscout/react-utils": "1.0.6",
+    "@helpscout/react-utils": "2.2.0",
     "create-emotion": "9.2.12",
     "create-emotion-styled": "9.2.8",
-    "csstype": "2.5.7",
     "emotion-theming": "9.2.9",
     "stylis": "3.5.3",
     "stylis-rule-sheet": "0.0.10"
   },
   "devDependencies": {
-    "@helpscout/hsds-react": "^2.5.6",
-    "@helpscout/zero": "0.0.9",
-    "@storybook/addon-actions": "^3.4.3",
-    "@storybook/addon-links": "^3.4.3",
-    "@storybook/addons": "^3.4.3",
-    "@storybook/cli": "^3.4.11",
-    "@storybook/react": "^3.4.3",
-    "babel-plugin-emotion": "^9.2.11",
+    "@helpscout/hsds-react": "^2.16.1",
+    "@helpscout/zero": "3.0.2",
+    "@storybook/addon-actions": "^4",
+    "@storybook/addon-links": "^4",
+    "@storybook/addons": "^4",
+    "@storybook/cli": "^4",
+    "@storybook/react": "^4",
     "coveralls": "3.0.0",
+    "csstype": "2.5.7",
     "enzyme": "2.9.1",
-    "np": "^2.20.1",
-    "nyc": "13.0.0",
+    "nyc": "^13.3.0",
     "react": "^15",
     "react-dom": "^15",
     "react-frame-component": "2.0.2",
-    "react-scripts": "1.1.4",
     "react-test-renderer": "16.2.0"
   }
 }

src/FrameProvider/__tests__/FrameProvider.test.js

@@ -1,9 +1,18 @@
 import React from 'react'
-import {mount} from 'enzyme'
+import { mount } from 'enzyme'
 import Frame from 'react-frame-component'
 import styled from '../../styled/index'
 import FrameProvider from '../index'
-import {getStyleProp, resetStyleTags} from '../../utils/testHelpers'
+import { getStyleProp, resetStyleTags } from '../../utils/testHelpers'
+
+function getClassListAsString(wrappedComponent) {
+  return wrappedComponent.getDOMNode().classList.toString()
+}
+
+function getEmotionClassName(wrappedComponent) {
+  const classList = getClassListAsString(wrappedComponent).split(' ')
+  return classList.find(c => c.includes('css-'))
+}
 
 describe('FrameProvider', () => {
   afterEach(() => {
@@ -66,4 +75,33 @@ describe('FrameProvider', () => {
 
     expect(wrapper.instance()).toBeTruthy()
   })
+
+  test('Can extend/merge styles within an iFrame', () => {
+    const One = styled('span')`
+      color: red;
+    `
+
+    const Two = styled(One)`
+      background: white;
+      padding: 20px;
+    `
+
+    const wrapper = mount(
+      <FrameProvider>
+        <div>
+          <One className="one" />
+          <Two className="two" />
+        </div>
+      </FrameProvider>,
+    )
+
+    const first = wrapper.find('.one')
+    const second = wrapper.find('.two')
+
+    const firstClassList = getClassListAsString(first).split(' ')
+    const secondClassList = getClassListAsString(second).split(' ')
+
+    expect(firstClassList.length).toBe(secondClassList.length)
+    expect(getEmotionClassName(first)).not.toEqual(getEmotionClassName(second))
+  })
 })

src/FrameProvider/channel.js

@@ -1,2 +1,2 @@
 // @flow
-export default '__EMOTION_FRAME__'
+export default '__EMOTION_9_FANCY_FRAME__'

src/ScopeProvider/channel.js

@@ -1,2 +1,2 @@
 // @flow
-export default '__EMOTION_SCOPING__'
+export default '__EMOTION_9_FANCY_SCOPING__'

src/create-emotion-styled/__tests__/createFrameManager.test.js

@@ -2,13 +2,12 @@ import createEmotion from '../../create-emotion'
 import createFrameManager from '../createFrameManager'
 
 describe('createFrameManager', () => {
-  test('Returns empty object if there are no args', () => {
+  test('Returns undefined if there are no args', () => {
     const FrameManager = createFrameManager()
 
     const emotion = FrameManager.getEmotion()
 
-    expect(emotion).toBeTruthy()
-    expect(emotion.css).not.toBeTruthy()
+    expect(emotion).toBe(undefined)
   })
 
   test('Creates new Emotion instances for a new frame', () => {
@@ -55,4 +54,24 @@ describe('createFrameManager', () => {
     expect(emotion.css).toBeTruthy()
     expect(FrameManager.emotionInstances.length).toBe(1)
   })
+
+  test('Uses fallback emotion instance, if frame is undefined', () => {
+    const mockFrame = undefined
+    const mockEmotion = {}
+    const FrameManager = createFrameManager()
+
+    const nextEmotion = FrameManager.getEmotion(mockFrame, mockEmotion)
+
+    expect(nextEmotion).toBe(mockEmotion)
+  })
+
+  test('Uses fallback emotion instance, if frame is window.document', () => {
+    const mockFrame = window.document
+    const mockEmotion = {}
+    const FrameManager = createFrameManager()
+
+    const nextEmotion = FrameManager.getEmotion(mockFrame, mockEmotion)
+
+    expect(nextEmotion).toBe(mockEmotion)
+  })
 })

src/create-emotion-styled/createFrameManager.js

@@ -14,7 +14,7 @@ export class FrameManager {
   }
 
   getEmotionNamespace() {
-    return `__EMOTION_FRAMED_${this.frames.size}__`
+    return `__EMOTION_9_FRAMED_${this.frames.size}__`
   }
 
   createNewEmotionFromFrame(frame?: Frame): Object {
@@ -33,8 +33,10 @@ export class FrameManager {
     return newEmotion
   }
 
-  getEmotion(frame?: Frame): Object {
-    if (!frame) return {}
+  getEmotion(frame?: Frame, currentEmotion: any) {
+    if (!frame || window.document === frame) {
+      return currentEmotion
+    }
 
     let emotionInstance
 

src/create-emotion-styled/index.js

@@ -13,7 +13,6 @@ import {
   setFrame,
 } from './utils'
 import FrameManager from './FrameManager'
-import { getDocumentFromReactComponent } from '../utils'
 import { channel as frameChannel } from '../FrameProvider'
 import { channel as scopeChannel } from '../ScopeProvider'
 
@@ -155,19 +154,13 @@ function createEmotionStyled(
           if (!frame) return
           if (this.__hasSetEmotion) return
 
-          this.emotion = FrameManager.getEmotion(frame)
+          const nextEmotion = FrameManager.getEmotion(frame, this.emotion)
+
+          if (!nextEmotion || this.emotion === nextEmotion) return
+
+          this.emotion = nextEmotion
           this.__hasSetEmotion = true
         }
-        /**
-         * Retrieves the appropriate document, with an attempt to retrieve
-         * it from emotion (potentially set by the FrameProvider), falling
-         * back to window.document.
-         *
-         * @return {document}
-         */
-        getDocument() {
-          return this.state.frame || getDocumentFromReactComponent(this)
-        }
         /**
          * Retrieves the scope selector, either from a ScopeProvider, or
          * from props.

stories/ColorfulCards.js

@@ -2,11 +2,11 @@ import React from 'react'
 import styled, { ThemeProvider } from '../src/index'
 
 const Card = props => {
-  const { className } = props
+  const { className, children } = props
 
   return (
     <div className={className}>
-      <div className="CardBlock">Card</div>
+      <div className="CardBlock">{children || 'Card'}</div>
     </div>
   )
 }
@@ -23,6 +23,10 @@ const FancyCard = styled(Card)`
   }
 `
 
+const BigCard = styled(FancyCard)`
+  padding: 40px 20px;
+`
+
 class ColorfulCards extends React.Component {
   constructor() {
     super()
@@ -58,6 +62,7 @@ class ColorfulCards extends React.Component {
           <input type="color" onChange={this.handleChangeColor} value={color} />
           <hr />
           {cardsMarkup}
+          <BigCard>Big Card</BigCard>
         </div>
       </ThemeProvider>
     )

stories/Extending.stories.js

@@ -1,7 +1,8 @@
 import React from 'react'
-import {storiesOf} from '@storybook/react'
+import { storiesOf } from '@storybook/react'
 import Card from '@helpscout/hsds-react/components/Card'
-import styled, {css} from '../src'
+import styled, { css } from '../src'
+import FrameProvider from '../src/FrameProvider'
 
 const stories = storiesOf('Extending', module)
 
@@ -45,9 +46,11 @@ stories.add('EnhancedExample', () => {
 
 stories.add('ExtendedExample', () => {
   return (
-    <div>
-      <ExtendedCard>Should be blue</ExtendedCard>
-      <EnhancedExample>Should be red</EnhancedExample>
-    </div>
+    <FrameProvider>
+      <div>
+        <ExtendedCard>Should be blue</ExtendedCard>
+        <EnhancedExample>Should be red</EnhancedExample>
+      </div>
+    </FrameProvider>
   )
 })

stories/FrameProvider.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import {storiesOf} from '@storybook/react'
+import { storiesOf } from '@storybook/react'
 import Frame from 'react-frame-component'
-import {FrameProvider} from '../src'
+import { FrameProvider } from '../src'
 import ColorfulCards from './ColorfulCards'
 
 const stories = storiesOf('FrameProvider', module)