emotion-js · Andarist · Sep 8, 2020 · Sep 5, 2020 · Sep 5, 2020
diff --git a/.changeset/giant-foxes-cheer.md b/.changeset/giant-foxes-cheer.md
diff --git a/.changeset/polite-ties-rest.md b/.changeset/polite-ties-rest.md
@@ -0,0 +1,15 @@
+---
+'@emotion/cache': patch
+---
+
+From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used `key`s from the (JS)DOM even for caches that have not inserted any actual rules to the document yet. It allows `@emotion/jest` to find those and serialize Emotion classes properly in situations like this:
+
+```js
+import styled from '@emotion/styled/macro'
+import { render } from '@testing-library/react'
+const Div = styled.div``
+test('foo', () => {
+  const { container } = render(<Div />)
+  expect(container).toMatchSnapshot()
+})
+```
diff --git a/.changeset/red-rockets-joke.md b/.changeset/red-rockets-joke.md
@@ -0,0 +1,5 @@
+---
+'@emotion/sheet': patch
+---
+
+Reverted the change that has started to add an empty `<style/>` element eagerly in non-production environments that has been introduced in [`v1.0.0-next.3`](https://github.com/emotion-js/emotion/blob/next/packages/sheet/CHANGELOG.md#100-next3) as this has found to be problematic for websites using `Content-Security-Policy` and a `nonce`. Instead of this `@emotion/cache` will from now on insert an empty rule in non-production environments but it will only do that if an empty rule gets actually created by the user.
diff --git a/packages/cache/__tests__/__snapshots__/hydration.js.snap b/packages/cache/__tests__/__snapshots__/hydration.js.snap
@@ -3,12 +3,6 @@
 exports[`it works 1`] = `
 <html>
   <head>
-    <style
-      data-eager-key="true"
-      data-emotion="css"
-    >
-
-    </style>
     <style
       data-emotion="css 1lrxbo5"
     >
@@ -22,18 +16,6 @@ exports[`it works 1`] = `
 exports[`rehydrated styles to head can be flushed 1`] = `
 <html>
   <head>
-    <style
-      data-eager-key="true"
-      data-emotion="css"
-    >
-
-    </style>
-    <style
-      data-eager-key="true"
-      data-emotion="emo"
-    >
-
-    </style>
     <style
       data-emotion="emo 1lrxbo5"
     >
@@ -46,14 +28,7 @@ exports[`rehydrated styles to head can be flushed 1`] = `
 
 exports[`rehydrated styles to head can be flushed 2`] = `
 <html>
-  <head>
-    <style
-      data-eager-key="true"
-      data-emotion="css"
-    >
-
-    </style>
-  </head>
+  <head />
   <body />
 </html>
 `;
diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
@@ -7,7 +7,8 @@ import {
   middleware,
   rulesheet,
   stringify,
-  prefixer
+  prefixer,
+  COMMENT
 } from 'stylis'
 import weakMemoize from '@emotion/weak-memoize'
 import {
@@ -120,9 +121,21 @@ let createCache = (options: Options): EmotionCache => {
 
     const finalizingPlugins = [
       stringify,
-      rulesheet(rule => {
-        currentSheet.insert(rule)
-      })
+      process.env.NODE_ENV !== 'production'
+        ? element => {
+            if (!element.root) {
+              if (element.return) {
+                currentSheet.insert(element.return)
+              } else if (element.value && element.type !== COMMENT) {
+                // insert empty rule in non-production environments
+                // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
+                currentSheet.insert(`${element.value}{}`)
+              }
+            }
+          }
+        : rulesheet(rule => {
+            currentSheet.insert(rule)
+          })
     ]
 
     const serializer = middleware(

diff --git a/packages/css/test/source-map/__snapshots__/source-map.test.js.snap b/packages/css/test/source-map/__snapshots__/source-map.test.js.snap
@@ -7,7 +7,9 @@ exports[`css css without newline or semicolon 1`] = `
 `;
 
 exports[`css source-map nested media queries 1`] = `
-"@media (max-width: 600px){.css-1vjvce5 h1{font-size:1.4rem;}}
+".css-1vjvce5{}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ08iLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICd0ZXN0LXV0aWxzL2xlZ2FjeS1lbnYnXG5pbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY29uc3QgY29tbWVudFBhdHRlcm4gPSAvXFwvXFwqW1xcc1xcU10qP1xcKlxcLy9nXG5jb25zdCBnZXRTdHlsZXMgPSBzaGVldCA9PlxuICBzaGVldC50YWdzXG4gICAgLm1hcCh0YWcgPT4gdGFnLnRleHRDb250ZW50IHx8ICcnKVxuICAgIC5qb2luKCcnKVxuICAgIC5yZXBsYWNlKGNvbW1lbnRQYXR0ZXJuLCAnXFxuJCZcXG4nKVxuXG5kZXNjcmliZSgnY3NzJywgKCkgPT4ge1xuICBhZnRlckVhY2goKCkgPT4gZmx1c2goKSlcbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgc3R5bGVzJywgKCkgPT4ge1xuICAgIGNvbnN0IG1xID0gW1xuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDQyMHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNjQwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA5NjBweCknXG4gICAgXVxuXG4gICAgY3NzKHtcbiAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgY29sb3I6ICdhbWV0aHlzdCcsXG4gICAgICAgICAgJyY6Zm9jdXMnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICBbbXFbMF1dOiB7XG4gICAgICAgICAgICAgIGNvbG9yOiAncmViZWNjYXB1cnBsZSdcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICB9XG4gICAgfSlcbiAgICBleHBlY3QoZ2V0U3R5bGVzKHNoZWV0KSkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChnZXRTdHlsZXMoc2hlZXQpKS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3Mgd2l0aG91dCBuZXdsaW5lIG9yIHNlbWljb2xvbicsICgpID0+IHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmVcbiAgICBjb25zdCBjbHMgPSBjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgXG4gICAgZXhwZWN0KGdldFN0eWxlcyhzaGVldCkpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG59KVxuIl19 */
+@media (max-width: 600px){.css-1vjvce5 h1{font-size:1.4rem;}}
 /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ08iLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICd0ZXN0LXV0aWxzL2xlZ2FjeS1lbnYnXG5pbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY29uc3QgY29tbWVudFBhdHRlcm4gPSAvXFwvXFwqW1xcc1xcU10qP1xcKlxcLy9nXG5jb25zdCBnZXRTdHlsZXMgPSBzaGVldCA9PlxuICBzaGVldC50YWdzXG4gICAgLm1hcCh0YWcgPT4gdGFnLnRleHRDb250ZW50IHx8ICcnKVxuICAgIC5qb2luKCcnKVxuICAgIC5yZXBsYWNlKGNvbW1lbnRQYXR0ZXJuLCAnXFxuJCZcXG4nKVxuXG5kZXNjcmliZSgnY3NzJywgKCkgPT4ge1xuICBhZnRlckVhY2goKCkgPT4gZmx1c2goKSlcbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgc3R5bGVzJywgKCkgPT4ge1xuICAgIGNvbnN0IG1xID0gW1xuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDQyMHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNjQwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA5NjBweCknXG4gICAgXVxuXG4gICAgY3NzKHtcbiAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgY29sb3I6ICdhbWV0aHlzdCcsXG4gICAgICAgICAgJyY6Zm9jdXMnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICBbbXFbMF1dOiB7XG4gICAgICAgICAgICAgIGNvbG9yOiAncmViZWNjYXB1cnBsZSdcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICB9XG4gICAgfSlcbiAgICBleHBlY3QoZ2V0U3R5bGVzKHNoZWV0KSkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChnZXRTdHlsZXMoc2hlZXQpKS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3Mgd2l0aG91dCBuZXdsaW5lIG9yIHNlbWljb2xvbicsICgpID0+IHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmVcbiAgICBjb25zdCBjbHMgPSBjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgXG4gICAgZXhwZWN0KGdldFN0eWxlcyhzaGVldCkpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG59KVxuIl19 */
 @media (max-width: 400px),(max-height: 420px){.css-1vjvce5 h1{font-size:1.1rem;}}
 /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ08iLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICd0ZXN0LXV0aWxzL2xlZ2FjeS1lbnYnXG5pbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY29uc3QgY29tbWVudFBhdHRlcm4gPSAvXFwvXFwqW1xcc1xcU10qP1xcKlxcLy9nXG5jb25zdCBnZXRTdHlsZXMgPSBzaGVldCA9PlxuICBzaGVldC50YWdzXG4gICAgLm1hcCh0YWcgPT4gdGFnLnRleHRDb250ZW50IHx8ICcnKVxuICAgIC5qb2luKCcnKVxuICAgIC5yZXBsYWNlKGNvbW1lbnRQYXR0ZXJuLCAnXFxuJCZcXG4nKVxuXG5kZXNjcmliZSgnY3NzJywgKCkgPT4ge1xuICBhZnRlckVhY2goKCkgPT4gZmx1c2goKSlcbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgc3R5bGVzJywgKCkgPT4ge1xuICAgIGNvbnN0IG1xID0gW1xuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDQyMHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNjQwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA5NjBweCknXG4gICAgXVxuXG4gICAgY3NzKHtcbiAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgY29sb3I6ICdhbWV0aHlzdCcsXG4gICAgICAgICAgJyY6Zm9jdXMnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICBbbXFbMF1dOiB7XG4gICAgICAgICAgICAgIGNvbG9yOiAncmViZWNjYXB1cnBsZSdcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICB9XG4gICAgfSlcbiAgICBleHBlY3QoZ2V0U3R5bGVzKHNoZWV0KSkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChnZXRTdHlsZXMoc2hlZXQpKS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3Mgd2l0aG91dCBuZXdsaW5lIG9yIHNlbWljb2xvbicsICgpID0+IHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmVcbiAgICBjb25zdCBjbHMgPSBjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgXG4gICAgZXhwZWN0KGdldFN0eWxlcyhzaGVldCkpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG59KVxuIl19 */

diff --git a/packages/react/__tests__/__snapshots__/global.js.snap b/packages/react/__tests__/__snapshots__/global.js.snap
@@ -3,10 +3,10 @@
 exports[`basic 1`] = `
 <head>
   <style
-    data-eager-key="true"
     data-emotion="css"
   >
 
+    .css-animation-ocj8pk{}
   </style>
   <style
     data-emotion="css"
@@ -58,10 +58,10 @@ exports[`basic 2`] = `
 exports[`basic 3`] = `
 <head>
   <style
-    data-eager-key="true"
     data-emotion="css"
   >
 
+    .css-animation-ocj8pk{}
   </style>
   <style
     data-emotion="css"
@@ -88,12 +88,6 @@ exports[`basic 4`] = `
 
 exports[`updating more than 1 global rule 1`] = `
 <head>
-  <style
-    data-eager-key="true"
-    data-emotion="global-multiple-rules"
-  >
-
-  </style>
   <style
     data-emotion="global-multiple-rules-global"
   >
@@ -111,12 +105,6 @@ exports[`updating more than 1 global rule 1`] = `
 
 exports[`updating more than 1 global rule 2`] = `
 <head>
-  <style
-    data-eager-key="true"
-    data-emotion="global-multiple-rules"
-  >
-
-  </style>
   <style
     data-emotion="global-multiple-rules-global"
   >

diff --git a/packages/react/__tests__/__snapshots__/globals-are-the-worst.js.snap b/packages/react/__tests__/__snapshots__/globals-are-the-worst.js.snap
@@ -4,23 +4,17 @@ exports[`specificity with globals 1`] = `
 <html>
   <head>
     <style
-      data-eager-key="true"
-      data-emotion="css"
+      data-emotion="css-global"
     >
 
+      .some-class{color:green;}
     </style>
     <style
       data-emotion="css"
     >
 
       .css-1ndtvd6{color:hotpink;}
     </style>
-    <style
-      data-emotion="css-global"
-    >
-
-      .some-class{color:green;}
-    </style>
   </head>
   <body>
     <div
@@ -45,23 +39,17 @@ exports[`specificity with globals 2`] = `
 <html>
   <head>
     <style
-      data-eager-key="true"
-      data-emotion="css"
+      data-emotion="css-global"
     >
 
+      .some-class{color:yellow;}
     </style>
     <style
       data-emotion="css"
     >
 
       .css-1ndtvd6{color:hotpink;}
     </style>
-    <style
-      data-emotion="css-global"
-    >
-
-      .some-class{color:yellow;}
-    </style>
   </head>
   <body>
     <div

diff --git a/packages/react/__tests__/compat/__snapshots__/browser.js.snap b/packages/react/__tests__/compat/__snapshots__/browser.js.snap
@@ -3,18 +3,6 @@
 exports[`composition works from old emotion css calls 1`] = `
 <html>
   <head>
-    <style
-      data-eager-key="true"
-      data-emotion="css"
-    >
-
-    </style>
-    <style
-      data-eager-key="true"
-      data-emotion="css"
-    >
-
-    </style>
     <style
       data-emotion="css"
     >

diff --git a/packages/react/__tests__/global-insertion-after-others.js b/packages/react/__tests__/global-insertion-after-others.js
@@ -3,9 +3,8 @@ import { jsx, Global } from '@emotion/react'
 import { render } from '@testing-library/react'
 
 let getDataAttributes = () =>
-  Array.from(
-    document.querySelectorAll('style[data-emotion]:not([data-eager-key])'),
-    x => x.getAttribute('data-emotion')
+  Array.from(document.querySelectorAll('style[data-emotion]'), x =>
+    x.getAttribute('data-emotion')
   )
 
 test('Global style element insertion after insertion of other styles', () => {
@@ -30,5 +29,5 @@ test('Global style element insertion after insertion of other styles', () => {
   let { rerender } = render(<Comp />)
   expect(getDataAttributes()).toEqual(['css'])
   rerender(<Comp second />)
-  expect(getDataAttributes()).toEqual(['css', 'css-global'])
+  expect(getDataAttributes()).toEqual(['css-global', 'css'])
 })
diff --git a/packages/react/__tests__/keyframes.js b/packages/react/__tests__/keyframes.js
@@ -19,9 +19,7 @@ cases(
         .toJSON()
     ).toMatchSnapshot()
     expect(
-      throwIfFalsy(cache.sheet.tags)
-        .map(tag => tag.textContent)
-        .filter(Boolean)
+      throwIfFalsy(cache.sheet.tags).map(tag => tag.textContent || '')
     ).toMatchSnapshot()
     cache.sheet.flush()
   },

diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
@@ -244,13 +244,13 @@ test('`css` opaque object passed to `cx` from <ClassNames/>', () => {
   )
 
   expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "You have passed styles created with \`css\` from \`@emotion/react\` package to the \`cx\`.
-\`cx\` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the \`css\` received from <ClassNames/> component.",
-  ],
-]
-`)
+    Array [
+      Array [
+        "You have passed styles created with \`css\` from \`@emotion/react\` package to the \`cx\`.
+    \`cx\` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the \`css\` received from <ClassNames/> component.",
+      ],
+    ]
+  `)
 })
 
 test('@import nested in scoped `css`', () => {
@@ -267,12 +267,12 @@ test('@import nested in scoped `css`', () => {
   )
 
   expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "\`@import\` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.",
-  ],
-]
-`)
+    Array [
+      Array [
+        "\`@import\` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.",
+      ],
+    ]
+  `)
 })
 
 test('@import prepended with other rules', () => {
@@ -289,12 +289,12 @@ test('@import prepended with other rules', () => {
   )
 
   expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "\`@import\` rules can't be after other rules. Please put your \`@import\` rules before your other rules.",
-  ],
-]
-`)
+    Array [
+      Array [
+        "\`@import\` rules can't be after other rules. Please put your \`@import\` rules before your other rules.",
+      ],
+    ]
+  `)
 })
 
 test('@import prepended by other @import', () => {