Merge branch 'master' into next

# Conflicts: # packages/jest-emotion/CHANGELOG.md # packages/jest-emotion/package.json # packages/jest-emotion/src/utils.js
emotion-js · Dec 4, 2019 · 0b7ebdf · 0b7ebdf
2 parents c672175 + 6c3aced
commit 0b7ebdf
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 316 deletions.
diff --git a/README.md b/README.md
@@ -118,6 +118,7 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/emotion#sponsor)]
 
+<a href="https://thinkmill.com.au" target="_blank"><img height="64" alt="Thinkmill" src="https://thinkmill.github.io/badge/wide-logo.svg"></a>
 <a href="https://opencollective.com/emotion/sponsor/0/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/0/avatar.svg"></a>
 <a href="https://opencollective.com/emotion/sponsor/1/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/1/avatar.svg"></a>
 <a href="https://opencollective.com/emotion/sponsor/2/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/2/avatar.svg"></a>

diff --git a/docs/introduction.mdx b/docs/introduction.mdx
@@ -20,9 +20,9 @@ The [emotion](https://www.npmjs.com/package/emotion) package is framework agnost
 
 - Requires no additional setup, babel plugin, or other config changes.
 
-- Works in situations where configuration is restricted or not possible such as with [Create React App](https://facebook.github.io/create-react-app)
+- Has support for auto vendor-prefixing, nested selectors, and media queries.
 
-- The `css` prop is not used or needed.
+- Works in situations where configuration is restricted or not possible such as with [Create React App](https://facebook.github.io/create-react-app)
 
 - You simply prefer to use the `css` function to generate class names and `cx` to compose them.
 
@@ -61,9 +61,8 @@ The ["@emotion/core"](https://www.npmjs.com/package/@emotion/core) package requi
 
 - Best when using React with a build environment that can be configured.
 
-- CSS prop support
-
-  - Similar to the `style` prop but adds support for nested selectors, media queries, and auto-prefixing.
+- `css` prop support
+  - Similar to the `style` prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.
 
   - Allows developers to skip the `styled` API abstraction and style components and elements directly.
 

diff --git a/packages/jest-emotion/CHANGELOG.md b/packages/jest-emotion/CHANGELOG.md
@@ -47,6 +47,12 @@
   - @emotion/core@11.0.0-next.0
   - emotion@11.0.0-next.0
 
+## 10.0.26
+
+### Patch Changes
+
+- [`b3c5b8de`](https://github.com/emotion-js/emotion/commit/b3c5b8de66e42dd2e6459862c9603f012ba01d54) [#1667](https://github.com/emotion-js/emotion/pull/1667) Thanks [@Andarist](https://github.com/Andarist)! - Revert improved support for Enzyme's shallow rendering - its release was an unforseen breaking change.
+
 ## 10.0.25
 
 ### Patch Changes

diff --git a/packages/jest-emotion/src/index.js b/packages/jest-emotion/src/index.js
@@ -9,8 +9,7 @@ import {
   isDOMElement,
   getStylesFromClassNames,
   getStyleElements,
-  getKeys,
-  flatMap
+  getKeys
 } from './utils'
 
 export { matchers } from './matchers'
@@ -70,50 +69,14 @@ function filterEmotionProps(props = {}) {
   return rest
 }
 
-function hasIntersection(left: any[], right: any[]) {
-  return left.some(value => right.includes(value))
-}
-
-function isShallowEnzymeElement(element, classNames) {
-  const delimiter = ' '
-  let childClassNames = flatMap(element.children || [], ({ props = {} }) =>
-    (props.className || '').split(delimiter)
-  ).filter(Boolean)
-
-  return !hasIntersection(classNames, childClassNames)
-}
-
 export function createSerializer({
   classNameReplacer,
   DOMElements = true
 }: Options = {}) {
   let cache = new WeakSet()
   function print(val: *, printer: Function) {
-    let elements = getStyleElements()
-    let keys = getKeys(elements)
     if (isEmotionCssPropEnzymeElement(val)) {
-      let cssClassNames = (val.props.css.name || '').split(' ')
-      let expectedClassNames = flatMap(cssClassNames, cssClassName =>
-        keys.map(key => `${key}-${cssClassName}`)
-      )
-      // if this is a shallow element, we need to manufacture the className
-      // since the underlying component is not rendered.
-      if (isShallowEnzymeElement(val, expectedClassNames)) {
-        let className = [val.props.className]
-          .concat(expectedClassNames)
-          .filter(Boolean)
-          .join(' ')
-        return printer({
-          ...val,
-          props: filterEmotionProps({
-            ...val.props,
-            className
-          }),
-          type: val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
-        })
-      } else {
-        return val.children.map(printer).join('\n')
-      }
+      return val.children.map(printer).join('\n')
     }
     if (isEmotionCssPropElementType(val)) {
       return printer({
@@ -124,10 +87,12 @@ export function createSerializer({
     }
     const nodes = getNodes(val)
     const classNames = getClassNamesFromNodes(nodes)
+    let elements = getStyleElements()
     const styles = getPrettyStylesFromClassNames(classNames, elements)
     nodes.forEach(cache.add, cache)
     const printedVal = printer(val)
     nodes.forEach(cache.delete, cache)
+    let keys = getKeys(elements)
     return replaceClassNames(
       classNames,
       styles,

diff --git a/packages/jest-emotion/src/utils.js b/packages/jest-emotion/src/utils.js
@@ -4,7 +4,7 @@ function last(arr) {
   return arr.length > 0 ? arr[arr.length - 1] : undefined
 }
 
-export function flatMap<T, S>(arr: T[], iteratee: (arg: T) => S[] | S): S[] {
+function flatMap(arr, iteratee) {
   return [].concat(...arr.map(iteratee))
 }
 
@@ -37,21 +37,13 @@ function isTagWithClassName(node) {
   return node.prop('className') && typeof node.type() === 'string'
 }
 
-function findNodeWithClassName(node) {
-  // Find the first node with a className prop
-  const found = node.findWhere(isTagWithClassName)
-  return found.length ? found.first() : null
-}
-
-function getClassNameProp(node) {
-  return (node && node.prop('className')) || ''
-}
-
 function getClassNamesFromEnzyme(selectors, node) {
-  // We need to dive in to get the className if we have a styled element from a shallow render
-  let isShallow = shouldDive(node)
-  let nodeWithClassName = findNodeWithClassName(isShallow ? node.dive() : node)
-  return getClassNames(selectors, getClassNameProp(nodeWithClassName))
+  // We need to dive if we have selected a styled child from a shallow render
+  const actualComponent = shouldDive(node) ? node.dive() : node
+  // Find the first node with a className prop
+  const components = actualComponent.findWhere(isTagWithClassName)
+  const classes = components.length && components.first().prop('className')
+  return getClassNames(selectors, classes)
 }
 
 function getClassNamesFromCheerio(selectors, node) {
@@ -159,7 +151,7 @@ export function getStylesFromClassNames(
   let keyframes = {}
   let styles = ''
 
-  flatMap(elements, getElementRules).forEach((rule: string) => {
+  flatMap(elements, getElementRules).forEach(rule => {
     if (selectorPattern.test(rule)) {
       styles += rule
     }

diff --git a/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`enzyme mount basic 1`] = `
+exports[`enzyme mount test 1`] = `
 .emotion-0 {
   background-color: red;
 }
@@ -18,7 +18,7 @@ exports[`enzyme mount basic 1`] = `
 </Greeting>
 `;
 
-exports[`enzyme mount with prop containing css element 1`] = `
+exports[`enzyme test with prop containing css element 1`] = `
 .emotion-0 {
   background-color: blue;
 }
@@ -48,7 +48,28 @@ exports[`enzyme mount with prop containing css element 1`] = `
 </Greeting>
 `;
 
-exports[`enzyme mount with prop containing css element not at the top level 1`] = `
+exports[`enzyme test with prop containing css element in fragment 1`] = `
+.emotion-0 {
+  background-color: blue;
+}
+
+.emotion-0 {
+  background-color: blue;
+}
+
+<div>
+  Array [
+    "x",
+    <div
+      className="emotion-0"
+    >
+      y
+    </div>,
+  ]
+</div>
+`;
+
+exports[`enzyme test with prop containing css element not at the top level 1`] = `
 .emotion-0 {
   background-color: blue;
 }
@@ -82,7 +103,7 @@ exports[`enzyme mount with prop containing css element not at the top level 1`]
 </div>
 `;
 
-exports[`enzyme mount with prop containing css element with other label 1`] = `
+exports[`enzyme test with prop containing css element with other label 1`] = `
 .emotion-0 {
   background-color: blue;
 }
@@ -120,7 +141,7 @@ exports[`enzyme mount with prop containing css element with other label 1`] = `
 </Greeting>
 `;
 
-exports[`enzyme mount with prop containing css element with other props 1`] = `
+exports[`enzyme test with prop containing css element with other props 1`] = `
 .emotion-0 {
   background-color: blue;
 }
@@ -151,97 +172,3 @@ exports[`enzyme mount with prop containing css element with other props 1`] = `
   </div>
 </Greeting>
 `;
-
-exports[`enzyme shallow basic 1`] = `
-<div
-  className=""
-  css="unknown styles"
->
-  hello
-</div>
-`;
-
-exports[`enzyme shallow with prop containing css element 1`] = `
-<div>
-  <p
-    className=""
-    css="unknown styles"
-  >
-    Hello
-  </p>
-   
-  World!
-</div>
-`;
-
-exports[`enzyme shallow with prop containing css element not at the top level 1`] = `
-<div>
-  <Greeting
-    content={
-      <p
-        css="unknown styles"
-        id="something"
-      >
-        Hello
-      </p>
-    }
-  >
-    World!
-  </Greeting>
-</div>
-`;
-
-exports[`enzyme shallow with prop containing css element with other label 1`] = `
-<Thing
-  content={
-    <div
-      css="unknown styles"
-    />
-  }
->
-  <p
-    className=""
-    css="unknown styles"
-    id="something"
-  >
-    Hello
-  </p>
-   
-  World!
-</Thing>
-`;
-
-exports[`enzyme shallow with prop containing css element with other props 1`] = `
-<div>
-  <p
-    className=""
-    css="unknown styles"
-    id="something"
-  >
-    Hello
-  </p>
-   
-  World!
-</div>
-`;
-
-exports[`enzyme with prop containing css element in fragment 1`] = `
-.emotion-0 {
-  background-color: blue;
-}
-
-.emotion-0 {
-  background-color: blue;
-}
-
-<div>
-  Array [
-    "x",
-    <div
-      className="emotion-0"
-    >
-      y
-    </div>,
-  ]
-</div>
-`;