emotion-js · srmagura · Mar 10, 2022 · Mar 10, 2022 · Mar 10, 2022 · Mar 10, 2022
diff --git a/.github/ISSUE_TEMPLATE/--bug-report.md b/.github/ISSUE_TEMPLATE/--bug-report.md
@@ -26,7 +26,7 @@ assignees: ''
 **To reproduce:**
 
 <!--
-    Please edit this CodeSandbox (https://codesandbox.io/s/zljgy)
+    Please edit this CodeSandbox (https://codesandbox.io/s/emotion-issue-template-y306ue)
     to help us reproduce your issue. Alternatively, create a GitHub repository.
     Issues without a reproducible example will take longer to get addressed.
 -->

diff --git a/docs/cache-provider.mdx b/docs/cache-provider.mdx
@@ -11,6 +11,8 @@ import { CacheProvider, jsx, css } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { prefixer } from 'stylis'
 
+const customPlugin = () => {}
+
 const myCache = createCache({
   key: 'my-prefix-key',
   stylisPlugins: [

diff --git a/packages/babel-plugin/CHANGELOG.md b/packages/babel-plugin/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @emotion/babel-plugin
 
+## 11.9.2
+
+### Patch Changes
+
+- [#2721](https://github.com/emotion-js/emotion/pull/2721) [`ae0f650b`](https://github.com/emotion-js/emotion/commit/ae0f650b5ad8ef658b61edca6157fe208be23b43) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue in the minifying logic that could remove rules with the same context values as their parent rules. Like in the example below:
+
+  ```js
+  styled.div`
+    > div {
+      color: blue;
+
+      > div {
+        color: hotpink;
+      }
+    }
+  `
+  ```
+
 ## 11.7.2
 
 ### Patch Changes

diff --git a/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap
@@ -792,6 +792,42 @@ something.View(\\"color:hotpink;\\");
 something.View(\\"\\");"
 `;
 
+exports[`emotion-babel-plugin styled same-nested-contex-value 1`] = `
+"import styled from '@emotion/styled'
+
+export const Comp = styled.div\`
+  > div {
+    color: blue;
+
+    > div {
+      color: hotpink;
+    }
+  }
+\`
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+export const Comp = _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"e1dl4grl0\\"
+} : {
+  target: \\"e1dl4grl0\\",
+  label: \\"Comp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\"
+} : {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNhbWUtbmVzdGVkLWNvbnRleC12YWx1ZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEIiLCJmaWxlIjoic2FtZS1uZXN0ZWQtY29udGV4LXZhbHVlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBDb21wID0gc3R5bGVkLmRpdmBcbiAgPiBkaXYge1xuICAgIGNvbG9yOiBibHVlO1xuXG4gICAgPiBkaXYge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICB9XG5gXG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`emotion-babel-plugin styled shorthand-property 1`] = `
 "import styled from '@emotion/styled'
 

diff --git a/packages/babel-plugin/__tests__/styled-macro/__fixtures__/same-nested-contex-value.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/same-nested-contex-value.js
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled/macro'
+
+export const Comp = styled.div`
+  > div {
+    color: blue;
+
+    > div {
+      color: hotpink;
+    }
+  }
+`
diff --git a/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap
@@ -778,6 +778,42 @@ something.View\`
 something.View({});"
 `;
 
+exports[`@emotion/styled.macro same-nested-contex-value 1`] = `
+"import styled from '@emotion/styled/macro'
+
+export const Comp = styled.div\`
+  > div {
+    color: blue;
+
+    > div {
+      color: hotpink;
+    }
+  }
+\`
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+export const Comp = _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"e1dl4grl0\\"
+} : {
+  target: \\"e1dl4grl0\\",
+  label: \\"Comp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\"
+} : {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNhbWUtbmVzdGVkLWNvbnRleC12YWx1ZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEIiLCJmaWxlIjoic2FtZS1uZXN0ZWQtY29udGV4LXZhbHVlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmV4cG9ydCBjb25zdCBDb21wID0gc3R5bGVkLmRpdmBcbiAgPiBkaXYge1xuICAgIGNvbG9yOiBibHVlO1xuXG4gICAgPiBkaXYge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICB9XG5gXG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`@emotion/styled.macro shorthand-property 1`] = `
 "import styled from '@emotion/styled/macro'
 

diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/babel-plugin",
-  "version": "11.7.2",
+  "version": "11.9.2",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
   "main": "dist/emotion-babel-plugin.cjs.js",
   "module": "dist/emotion-babel-plugin.esm.js",

diff --git a/packages/babel-plugin/src/utils/minify.js b/packages/babel-plugin/src/utils/minify.js
@@ -1,5 +1,9 @@
 import { compile } from 'stylis'
 
+const haveSameLocation = (element1, element2) => {
+  return element1.line === element2.line && element1.column === element2.column
+}
+
 const isAutoInsertedRule = element => {
   if (element.type !== 'rule' || !element.parent) {
     return false
@@ -10,7 +14,7 @@ const isAutoInsertedRule = element => {
     parent = parent.parent
   } while (parent && parent.type !== 'rule')
 
-  return !!parent && element.value === parent.value
+  return !!parent && haveSameLocation(element, parent)
 }
 
 const toInputTree = (elements, tree) => {

diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
@@ -1,5 +1,14 @@
 # emotion
 
+## 11.9.0
+
+### Patch Changes
+
+- [#2700](https://github.com/emotion-js/emotion/pull/2700) [`d9357621`](https://github.com/emotion-js/emotion/commit/d935762131b1474f2474296ee4706f7ecd59b6dd) Thanks [@arturmuller](https://github.com/arturmuller)! - Fixed a false positive warning for `content` properties that included `var()`.
+
+- Updated dependencies [[`d9357621`](https://github.com/emotion-js/emotion/commit/d935762131b1474f2474296ee4706f7ecd59b6dd)]:
+  - @emotion/[email protected]
+
 ## 11.7.1
 
 ### Patch Changes

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/css",
-  "version": "11.7.1",
+  "version": "11.9.0",
   "description": "The Next Generation of CSS-in-JS.",
   "main": "dist/emotion-css.cjs.js",
   "module": "dist/emotion-css.esm.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@emotion/babel-plugin": "^11.7.1",
     "@emotion/cache": "^11.7.1",
-    "@emotion/serialize": "^1.0.0",
+    "@emotion/serialize": "^1.0.3",
     "@emotion/sheet": "^1.0.3",
     "@emotion/utils": "^1.0.0"
   },

diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap
@@ -12,6 +12,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: inherit;
   content: "some thing";
   content: 'another thing';
+  content: var(--variable-name);
   content: url("http://www.example.com/test.png");
   content: linear-gradient(hotpink, #8be9fd);
   content: radial-gradient(hotpink, #8be9fd);

diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js
@@ -17,6 +17,7 @@ const validValues = [
   'inherit',
   '"some thing"',
   "'another thing'",
+  'var(--variable-name)',
   'url("http://www.example.com/test.png")',
   'linear-gradient(hotpink, #8be9fd)',
   'radial-gradient(hotpink, #8be9fd)',

diff --git a/packages/jest/CHANGELOG.md b/packages/jest/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @emotion/jest
 
+## 11.9.1
+
+### Patch Changes
+
+- [#2715](https://github.com/emotion-js/emotion/pull/2715) [`37434836`](https://github.com/emotion-js/emotion/commit/3743483613b8fcb84bc25dde1fcd51a079b009b9) Thanks [@thompsongl](https://github.com/thompsongl)! - Fixed an issue with `createEnzymeSerializer` not handling the recently added `includeStyles` option.
+
+## 11.9.0
+
+### Minor Changes
+
+- [#2709](https://github.com/emotion-js/emotion/pull/2709) [`1a25293f`](https://github.com/emotion-js/emotion/commit/1a25293fffa348d55bbf78e8855a6390bc54230b) Thanks [@thompsongl](https://github.com/thompsongl)! - Added `includeStyles` option to `createSerializer` to optionally disable styles printing.
+
 ## 11.8.0
 
 ### Patch Changes

diff --git a/packages/jest/README.md b/packages/jest/README.md
@@ -90,6 +90,17 @@ import { createSerializer } from '@emotion/jest'
 expect.addSnapshotSerializer(createSerializer({ DOMElements: false }))
 ```
 
+### `includeStyles`
+
+@emotion/jest's snapshot serializer inserts styles. If you would like to disable this behavior, you can do so by passing `{ includeStyles: false }`. For example:
+
+```jsx
+import { createSerializer } from '@emotion/jest'
+
+// configures @emotion/jest to not insert styles
+expect.addSnapshotSerializer(createSerializer({ includeStyles: false }))
+```
+
 # Custom matchers
 
 ## toHaveStyleRule

diff --git a/packages/jest/package.json b/packages/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/jest",
-  "version": "11.8.0",
+  "version": "11.9.1",
   "description": "Jest utilities for emotion",
   "main": "dist/emotion-jest.cjs.js",
   "module": "dist/emotion-jest.esm.js",
@@ -36,8 +36,8 @@
     }
   },
   "devDependencies": {
-    "@emotion/css": "11.7.1",
-    "@emotion/react": "11.8.1",
+    "@emotion/css": "11.9.0",
+    "@emotion/react": "11.9.0",
     "@types/jest": "^27.0.3",
     "dtslint": "^4.2.1",
     "enzyme-to-json": "^3.6.1",

diff --git a/packages/jest/src/create-enzyme-serializer.js b/packages/jest/src/create-enzyme-serializer.js
@@ -65,11 +65,13 @@ const wrappedEnzymeSerializer = {
 
 export function createEnzymeSerializer({
   classNameReplacer,
-  DOMElements = true
-} /*: Options */ = {}) {
+  DOMElements = true,
+  includeStyles = true
+} /* : Options */ = {}) {
   const emotionSerializer = createEmotionSerializer({
     classNameReplacer,
-    DOMElements
+    DOMElements,
+    includeStyles
   })
   return {
     test(node) {

diff --git a/packages/jest/src/create-serializer.js b/packages/jest/src/create-serializer.js
@@ -74,7 +74,8 @@ function getPrettyStylesFromClassNames(
 /*
 export type Options = {
   classNameReplacer?: (className: string, index: number) => string,
-  DOMElements?: boolean
+  DOMElements?: boolean,
+  includeStyles?: boolean
 }
 */
 
@@ -185,8 +186,9 @@ function clean(node, classNames /*: string[] */) {
 
 export function createSerializer({
   classNameReplacer,
-  DOMElements = true
-} /*: Options */ = {}) {
+  DOMElements = true,
+  includeStyles = true
+} /* : Options */ = {}) {
   const cache = new WeakSet()
   const isTransformed = val => cache.has(val)
 
@@ -204,11 +206,9 @@ export function createSerializer({
     const converted = deepTransform(val, convertEmotionElements)
     const nodes = getNodes(converted)
     const classNames = getClassNamesFromNodes(nodes)
-    const styles = getPrettyStylesFromClassNames(
-      classNames,
-      elements,
-      config.indent
-    )
+    const styles = includeStyles
+      ? getPrettyStylesFromClassNames(classNames, elements, config.indent)
+      : ''
     clean(converted, classNames)
 
     nodes.forEach(cache.add, cache)

diff --git a/packages/jest/test/__snapshots__/printer.test.js.snap b/packages/jest/test/__snapshots__/printer.test.js.snap
@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`allows to opt-out from styles printing 1`] = `
+"<div
+  class=\\"emotion-0\\"
+>
+  <svg
+    class=\\"emotion-1\\"
+  />
+</div>"
+`;
+
 exports[`does not replace class names that are not from emotion 1`] = `
 ".emotion-0 {
   color: darkorchid;

diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
@@ -97,6 +97,31 @@ describe('jest-emotion with DOM elements disabled', () => {
   })
 })
 
+test('allows to opt-out from styles printing', () => {
+  const emotionPlugin = createSerializer({ includeStyles: false })
+
+  const divStyle = css`
+    color: red;
+  `
+
+  const svgStyle = css`
+    width: 100%;
+  `
+
+  const divRef = React.createRef()
+  render(
+    <div css={divStyle} ref={divRef}>
+      <svg css={svgStyle} />
+    </div>
+  )
+
+  const output = prettyFormat(divRef.current, {
+    plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
+  })
+
+  expect(output).toMatchSnapshot()
+})
+
 test('does not replace class names that are not from emotion', () => {
   let tree = renderer
     .create(

diff --git a/packages/jest/types/index.d.ts b/packages/jest/types/index.d.ts
@@ -26,6 +26,7 @@ export const matchers: EmotionMatchers
 export interface CreateSerializerOptions {
   classNameReplacer?: (className: string, index: number) => string
   DOMElements?: boolean
+  includeStyles?: boolean
 }
 export function createSerializer(
   options?: CreateSerializerOptions

diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json
@@ -20,7 +20,7 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@emotion/react": "11.8.1",
+    "@emotion/react": "11.9.0",
     "react": "16.14.0"
   },
   "homepage": "https://emotion.sh",