Pass in nonce to emotion (Experiment)

demo/index.js

@@ -8,7 +8,7 @@ import style from './style.less'
 
 ReactDOM.render((
    <BrowserRouter>
-      <OIO fontFamily="Helvetica Neue, sans-serif">
+      <OIO fontFamily="Helvetica Neue, sans-serif" nonce="cd7b0a50-f223-4aaf-9aee-44fbd8329c69">
          <div
             style={{
                position: 'absolute',

package.json

@@ -42,8 +42,8 @@
     "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
     "classnames": "2.2.6",
+    "create-emotion": "10.0.0-beta.12",
     "css-loader": "1.0.1",
-    "emotion": "9.1.1",
     "eslint-config-mother": "2.0.11",
     "eslint-plugin-jest": "21.27.1",
     "express": "4.16.4",

src/OIO/context.js

@@ -2,10 +2,11 @@ import React from 'react'
 
 const OIOContext = React.createContext()
 
+// TODO: CLEAN THIS UP
 const withOIOContext = WrappedComponent => props => (
    <OIOContext.Consumer>
-      {theme => (
-         <WrappedComponent {...props} OIOContext={theme} />
+      {({ emotion, ...theme }) => (
+         <WrappedComponent {...props} emotion={emotion} OIOContext={theme} />
       )}
    </OIOContext.Consumer>
 )

src/OIO/index.js

@@ -1,19 +1,17 @@
 import React, { Component } from 'react'
-import { injectGlobal } from 'emotion'
+import createEmotion from 'create-emotion'
 import PropTypes from 'prop-types'
 import { OIOContext } from './context'
 import normalize from './normalize'
 
-// Normalize
-injectGlobal`${normalize}` // eslint-disable-line no-unused-expressions
-
 export default class OIO extends Component {
    static propTypes = {
       children: PropTypes.node,
       className: PropTypes.string,
       fontFamily: PropTypes.string,
       fontSize: PropTypes.string,
       fontWeights: PropTypes.object,
+      nonce: PropTypes.string,
       style: PropTypes.object,
       textSizeScaleRatio: PropTypes.number,
       textSizeMultiplier: PropTypes.number
@@ -31,11 +29,24 @@ export default class OIO extends Component {
          semibold: '600',
          bold: '700'
       },
+      nonce: undefined,
       style: {},
       textSizeScaleRatio: 1.125,
       textSizeMultiplier: 1
    }
 
+   constructor(props) {
+      super(props)
+      this.emotion = createEmotion({
+         nonce: props.nonce
+      })
+
+      // eslint-disable-next-line no-unused-expressions
+      this.emotion.injectGlobal`${normalize}`
+   }
+
+   emotion = null
+
    render() {
       const {
          children,
@@ -49,6 +60,7 @@ export default class OIO extends Component {
       } = this.props
 
       const contextProps = {
+         emotion: this.emotion,
          fontFamily,
          fontSize,
          fontWeights,

src/Text/index.js

@@ -7,7 +7,6 @@
 // =======================================================
 
 import React, { Component } from 'react'
-import { css, cx } from 'emotion'
 import PropTypes from 'prop-types'
 import { withOIOContext } from '../OIO/context'
 import generateStyleObject from '../utils/generateStyleObject'
@@ -60,6 +59,8 @@ export default class Text extends Component {
       children: PropTypes.node,
       className: PropTypes.string,
       color: PropTypes.string,
+      // TODO: USE REAL EMOTION INSTANCE
+      emotion: PropTypes.object.isRequired,
       fontFamily: PropTypes.string,
       generatedStyleObject: PropTypes.object.isRequired,
       lineHeight: PropTypes.string,
@@ -84,6 +85,7 @@ export default class Text extends Component {
    }
 
    render() {
+      const { css, cx } = this.props.emotion
       const styles = {
          ...this.props.style,
          ...this.props.generatedStyleObject