Fix composition of styles without a final semicolon in a declaration …

…block (#1560)
emotion-js · Oct 23, 2019 · 57a767e · 57a767e
1 parent 11bea3a
commit 57a767e
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 3 deletions.
diff --git a/.changeset/plenty-monkeys-accept/changes.json b/.changeset/plenty-monkeys-accept/changes.json
@@ -0,0 +1,8 @@
+{
+  "releases": [
+    { "name": "@emotion/core", "type": "patch" },
+    { "name": "@emotion/serialize", "type": "patch" },
+    { "name": "@emotion/styled", "type": "patch" }
+  ],
+  "dependents": []
+}
diff --git a/.changeset/plenty-monkeys-accept/changes.md b/.changeset/plenty-monkeys-accept/changes.md
@@ -0,0 +1 @@
+Fix composition of styles without a final semicolon in a declaration block
diff --git a/packages/core/__tests__/__snapshots__/css.js.snap b/packages/core/__tests__/__snapshots__/css.js.snap
@@ -70,6 +70,19 @@ exports[`handles camelCased custom properties in object styles properly 1`] = `
 />
 `;
 
+exports[`handles composition of styles without a final semi in a declaration block 1`] = `
+.emotion-0 {
+  color: hotpink;
+  background-color: green;
+}
+
+<div
+  className="emotion-0"
+>
+  I'm hotpink on the green background.
+</div>
+`;
+
 exports[`label in css call 1`] = `
 .emotion-0 {
   color: hotpink;

diff --git a/packages/core/__tests__/__snapshots__/keyframes.js.snap b/packages/core/__tests__/__snapshots__/keyframes.js.snap
@@ -66,7 +66,7 @@ exports[`keyframes keyframes used in css call 1`] = `
 
 exports[`keyframes keyframes used in css call 2`] = `
 Array [
-  ".css-1jqzi3u{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
+  ".css-nq4jxu{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
   "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",

diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js
@@ -236,3 +236,23 @@ test('applies class when css prop is set to nil on wrapper component', () => {
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
+
+test('handles composition of styles without a final semi in a declaration block', () => {
+  const tree = renderer.create(
+    <div
+      css={[
+        // prettier-ignore
+        css`
+          color: hotpink
+        `,
+        css`
+          background-color: green;
+        `
+      ]}
+    >
+      {"I'm hotpink on the green background."}
+    </div>
+  )
+
+  expect(tree.toJSON()).toMatchSnapshot()
+})
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
@@ -168,7 +168,7 @@ function handleInterpolation(
             next = next.next
           }
         }
-        let styles = interpolation.styles
+        let styles = `${interpolation.styles};`
         if (
           process.env.NODE_ENV !== 'production' &&
           interpolation.map !== undefined

diff --git a/packages/styled/test/__snapshots__/source-map.test.js.snap b/packages/styled/test/__snapshots__/source-map.test.js.snap
@@ -7,7 +7,7 @@ exports[`inserts source map 1`] = `
       data-emotion="css"
     >
       
-      .css-1igngve-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQGZsb3dcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIHJlbmRlcmVyLmNyZWF0ZSg8Q29tcCAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
+      .css-1hytkh9-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQGZsb3dcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIHJlbmRlcmVyLmNyZWF0ZSg8Q29tcCAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
     </style>
   </head>
   <body />