From 3759507d3dfd99812acb183c4e1c82a064c456f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 15 Dec 2024 12:21:12 +0100
Subject: [PATCH 01/10] Drop prefixer

---
 .../__tests__/__snapshots__/index.js.snap     |   7 +-
 packages/cache/src/index.ts                   |   4 +-
 packages/cache/src/prefixer.ts                | 347 ------------------
 .../css/test/__snapshots__/css.test.js.snap   |  69 ----
 .../__snapshots__/inject-global.test.js.snap  |   9 -
 .../test/__snapshots__/keyframes.test.js.snap |  23 --
 .../no-babel/__snapshots__/index.test.js.snap |  34 --
 .../react/__tests__/__snapshots__/css.js.snap |   6 -
 .../__tests__/__snapshots__/global.js.snap    |  16 +-
 .../__tests__/__snapshots__/keyframes.js.snap |  41 +--
 .../__tests__/__snapshots__/server.js.snap    |  16 +-
 .../extract-critical-to-chunks.test.js.snap   |  10 +-
 .../test/__snapshots__/index.test.js.snap     | 182 ---------
 .../test/__snapshots__/inline.test.js.snap    |  77 +---
 .../test/__snapshots__/stream.test.js.snap    |  71 +---
 .../__snapshots__/edge-cases.js.snap          |   1 -
 .../__tests__/__snapshots__/styled.js.snap    |  57 ---
 .../component-selector.test.js.snap           |  12 -
 .../__snapshots__/composition.test.js.snap    |  15 -
 .../test/__snapshots__/index.test.js.snap     |  39 --
 20 files changed, 37 insertions(+), 999 deletions(-)
 delete mode 100644 packages/cache/src/prefixer.ts

diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index 8c0879fc93..02a2c44bfc 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -2,9 +2,6 @@
 
 exports[`should accept container option 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
 }
@@ -22,7 +19,7 @@ exports[`should accept container option 1`] = `
       data-s=""
     >
       
-      .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+      .emotion-0{display:flex;color:blue;}
     </style>
   </div>
   <div>
@@ -45,7 +42,7 @@ exports[`should accept insertionPoint option 1`] = `
     data-s=""
   >
     
-    .test-insertion-point-83n355{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+    .test-insertion-point-83n355{display:flex;color:blue;}
   </style>
   
     
diff --git a/packages/cache/src/index.ts b/packages/cache/src/index.ts
index 706a3fa41e..28db9a6715 100644
--- a/packages/cache/src/index.ts
+++ b/packages/cache/src/index.ts
@@ -19,7 +19,6 @@ import {
   createUnsafeSelectorsAlarm,
   incorrectImportAlarm
 } from './stylis-plugins'
-import { prefixer } from './prefixer'
 import { StylisPlugin } from './types'
 
 export interface Options {
@@ -37,7 +36,8 @@ let getServerStylisCache = isBrowser
   ? undefined
   : weakMemoize(() => memoize<Record<string, string>>(() => ({})))
 
-const defaultStylisPlugins = [prefixer]
+// keep it in a variable as it's used as cache key by `getServerStylisCache`
+const defaultStylisPlugins: StylisPlugin[] = []
 
 let getSourceMap: ((styles: string) => string | undefined) | undefined
 if (isDevelopment) {
diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
deleted file mode 100644
index 8a91467a36..0000000000
--- a/packages/cache/src/prefixer.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-/* eslint-disable no-fallthrough */
-/* eslint-disable eqeqeq */
-import {
-  charat,
-  combine,
-  copy,
-  DECLARATION,
-  hash,
-  indexof,
-  KEYFRAMES,
-  match,
-  MOZ,
-  MS,
-  replace,
-  RULESET,
-  serialize,
-  strlen,
-  WEBKIT,
-  Element,
-  Middleware
-} from 'stylis'
-
-// this is a copy of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
-
-function prefix(value: string, length: number): string {
-  switch (hash(value, length)) {
-    // color-adjust
-    case 5103:
-      return WEBKIT + 'print-' + value + value
-    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
-    case 5737:
-    case 4201:
-    case 3177:
-    case 3433:
-    case 1641:
-    case 4457:
-    case 2921:
-    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
-    case 5572:
-    case 6356:
-    case 5844:
-    case 3191:
-    case 6645:
-    case 3005:
-    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
-    case 6391:
-    case 5879:
-    case 5623:
-    case 6135:
-    case 4599:
-    case 4855:
-    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
-    case 4215:
-    case 6389:
-    case 5109:
-    case 5365:
-    case 5621:
-    case 3829:
-      return WEBKIT + value + value
-    // appearance, user-select, transform, hyphens, text-size-adjust
-    case 5349:
-    case 4246:
-    case 4810:
-    case 6968:
-    case 2756:
-      return WEBKIT + value + MOZ + value + MS + value + value
-    // flex, flex-direction
-    case 6828:
-    case 4268:
-      return WEBKIT + value + MS + value + value
-    // order
-    case 6165:
-      return WEBKIT + value + MS + 'flex-' + value + value
-    // align-items
-    case 5187:
-      return (
-        WEBKIT +
-        value +
-        replace(
-          value,
-          /(\w+).+(:[^]+)/,
-          WEBKIT + 'box-$1$2' + MS + 'flex-$1$2'
-        ) +
-        value
-      )
-    // align-self
-    case 5443:
-      return (
-        WEBKIT +
-        value +
-        MS +
-        'flex-item-' +
-        replace(value, /flex-|-self/, '') +
-        value
-      )
-    // align-content
-    case 4675:
-      return (
-        WEBKIT +
-        value +
-        MS +
-        'flex-line-pack' +
-        replace(value, /align-content|flex-|-self/, '') +
-        value
-      )
-    // flex-shrink
-    case 5548:
-      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
-    // flex-basis
-    case 5292:
-      return (
-        WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
-      )
-    // flex-grow
-    case 6060:
-      return (
-        WEBKIT +
-        'box-' +
-        replace(value, '-grow', '') +
-        WEBKIT +
-        value +
-        MS +
-        replace(value, 'grow', 'positive') +
-        value
-      )
-    // transition
-    case 4554:
-      return (
-        WEBKIT +
-        replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') +
-        value
-      )
-    // cursor
-    case 6187:
-      return (
-        replace(
-          replace(
-            replace(value, /(zoom-|grab)/, WEBKIT + '$1'),
-            /(image-set)/,
-            WEBKIT + '$1'
-          ),
-          value,
-          ''
-        ) + value
-      )
-    // background, background-image
-    case 5495:
-    case 3959:
-      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
-    // justify-content
-    case 4968:
-      return (
-        replace(
-          replace(
-            value,
-            /(.+:)(flex-)?(.*)/,
-            WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'
-          ),
-          /s.+-b[^;]+/,
-          'justify'
-        ) +
-        WEBKIT +
-        value +
-        value
-      )
-    // (margin|padding)-inline-(start|end)
-    case 4095:
-    case 3583:
-    case 4068:
-    case 2532:
-      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
-    // (min|max)?(width|height|inline-size|block-size)
-    case 8116:
-    case 7059:
-    case 5753:
-    case 5535:
-    case 5445:
-    case 5701:
-    case 4933:
-    case 4677:
-    case 5533:
-    case 5789:
-    case 5021:
-    case 4765:
-      // stretch, max-content, min-content, fill-available
-      if (strlen(value) - 1 - length > 6)
-        switch (charat(value, length + 1)) {
-          // (m)ax-content, (m)in-content
-          case 109:
-            // -
-            if (charat(value, length + 4) !== 45) break
-          // (f)ill-available, (f)it-content
-          case 102:
-            return (
-              replace(
-                value,
-                /(.+:)(.+)-([^]+)/,
-                '$1' +
-                  WEBKIT +
-                  '$2-$3' +
-                  '$1' +
-                  MOZ +
-                  (charat(value, length + 3) == 108 ? '$3' : '$2-$3')
-              ) + value
-            )
-          // (s)tretch
-          case 115:
-            return ~indexof(value, 'stretch')
-              ? prefix(replace(value, 'stretch', 'fill-available'), length) +
-                  value
-              : value
-        }
-      break
-    // position: sticky
-    case 4949:
-      // (s)ticky?
-      if (charat(value, length + 1) !== 115) break
-    // display: (flex|inline-flex)
-    case 6444:
-      switch (
-        charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))
-      ) {
-        // stic(k)y
-        case 107:
-          return replace(value, ':', ':' + WEBKIT) + value
-        // (inline-)?fl(e)x
-        case 101:
-          return (
-            replace(
-              value,
-              /(.+:)([^;!]+)(;|!.+)?/,
-              '$1' +
-                WEBKIT +
-                (charat(value, 14) === 45 ? 'inline-' : '') +
-                'box$3' +
-                '$1' +
-                WEBKIT +
-                '$2$3' +
-                '$1' +
-                MS +
-                '$2box$3'
-            ) + value
-          )
-      }
-      break
-    // writing-mode
-    case 5936:
-      switch (charat(value, length + 11)) {
-        // vertical-l(r)
-        case 114:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'tb') +
-            value
-          )
-        // vertical-r(l)
-        case 108:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') +
-            value
-          )
-        // horizontal(-)tb
-        case 45:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'lr') +
-            value
-          )
-      }
-
-      return WEBKIT + value + MS + value + value
-  }
-
-  return value
-}
-
-export let prefixer = (
-  element: Element,
-  index: number,
-  children: Element[],
-  callback: Middleware
-) => {
-  if (element.length > -1)
-    if (!element.return)
-      switch (element.type) {
-        case DECLARATION:
-          element.return = prefix(element.value, element.length)
-          break
-        case KEYFRAMES:
-          return serialize(
-            [
-              copy(element, {
-                value: replace(element.value, '@', '@' + WEBKIT)
-              })
-            ],
-            callback
-          )
-        case RULESET:
-          if (element.length)
-            return combine(element.props as string[], function (value) {
-              switch (match(value, /(::plac\w+|:read-\w+)/)) {
-                // :read-(only|write)
-                case ':read-only':
-                case ':read-write':
-                  return serialize(
-                    [
-                      copy(element, {
-                        props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
-                      })
-                    ],
-                    callback
-                  )
-                // :placeholder
-                case '::placeholder':
-                  return serialize(
-                    [
-                      copy(element, {
-                        props: [
-                          replace(
-                            value,
-                            /:(plac\w+)/,
-                            ':' + WEBKIT + 'input-$1'
-                          )
-                        ]
-                      }),
-                      copy(element, {
-                        props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
-                      }),
-                      copy(element, {
-                        props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
-                      })
-                    ],
-                    callback
-                  )
-              }
-
-              return ''
-            })
-      }
-}
diff --git a/packages/css/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap
index c4b2a1a926..aeb222378c 100644
--- a/packages/css/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/__snapshots__/css.test.js.snap
@@ -25,9 +25,6 @@ exports[`css array fallback 1`] = `
 
 exports[`css array with explicit false 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -38,9 +35,6 @@ exports[`css array with explicit false 1`] = `
 
 exports[`css array with explicit true 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -51,12 +45,7 @@ exports[`css array with explicit true 1`] = `
 
 exports[`css auto px 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   font-size: 10px;
   --custom: 5;
@@ -69,9 +58,6 @@ exports[`css auto px 1`] = `
 
 exports[`css boolean as value 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -82,9 +68,6 @@ exports[`css boolean as value 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -95,9 +78,6 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -108,15 +88,9 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -164,9 +138,6 @@ exports[`css css variables 1`] = `
 
 exports[`css explicit & 1`] = `
 .emotion-0.another-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -177,9 +148,6 @@ exports[`css explicit & 1`] = `
 
 exports[`css explicit & 2`] = `
 ".css-5v9d41-cls1.another-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }"
 `;
@@ -192,9 +160,6 @@ exports[`css explicit false 1`] = `
 
 exports[`css falsy property value in object 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -225,9 +190,6 @@ exports[`css float property 1`] = `
 
 exports[`css flushes correctly 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -255,7 +217,6 @@ exports[`css handles array of objects 1`] = `
 
 exports[`css handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -277,9 +238,6 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -369,9 +327,6 @@ exports[`css nested 1`] = `
 }
 
 .emotion-0 .some-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -403,9 +358,6 @@ exports[`css nested array 1`] = `
   display: inline;
   display: inline-block;
   display: block;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   display: table;
   color: darkorchid;
@@ -447,9 +399,6 @@ exports[`css nested at rules 1`] = `
 
   @supports (display: flex) {
     .emotion-0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
       display: flex;
     }
   }
@@ -506,9 +455,6 @@ exports[`css random expression 1`] = `
 
 exports[`css random interpolation with undefined values 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -519,9 +465,6 @@ exports[`css random interpolation with undefined values 1`] = `
 
 exports[`css registered styles as nested selector value in object 1`] = `
 .emotion-0:hover {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   background-color: hotpink;
 }
@@ -549,13 +492,7 @@ exports[`css rule after media query 1`] = `
 
 exports[`css simple composition 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -570,9 +507,6 @@ exports[`css simple composition 1`] = `
 
 exports[`css weakmap 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -583,9 +517,6 @@ exports[`css weakmap 1`] = `
 
 exports[`css weakmap 2`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/css/test/__snapshots__/inject-global.test.js.snap b/packages/css/test/__snapshots__/inject-global.test.js.snap
index def7a1604e..9dda829049 100644
--- a/packages/css/test/__snapshots__/inject-global.test.js.snap
+++ b/packages/css/test/__snapshots__/inject-global.test.js.snap
@@ -21,9 +21,6 @@ exports[`injectGlobal interpolated value 1`] = `
 exports[`injectGlobal nested interpolated media query 1`] = `
 "@media (max-width: 600px) {
   body {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     display: flex;
   }
 }"
@@ -39,16 +36,10 @@ exports[`injectGlobal pseudo in @media 1`] = `
 
 exports[`injectGlobal random interpolation 1`] = `
 ".css-1002tid-cls {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
 body {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }"
 `;
diff --git a/packages/css/test/__snapshots__/keyframes.test.js.snap b/packages/css/test/__snapshots__/keyframes.test.js.snap
index 190c314456..684fc0c310 100644
--- a/packages/css/test/__snapshots__/keyframes.test.js.snap
+++ b/packages/css/test/__snapshots__/keyframes.test.js.snap
@@ -3,22 +3,15 @@
 exports[`keyframes keyframes with interpolation 1`] = `
 @keyframes animation-0 {
   from {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   to {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
@@ -32,42 +25,26 @@ exports[`keyframes keyframes with interpolation 1`] = `
 exports[`keyframes renders 1`] = `
 @keyframes animation-0 {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    -webkit-transform: translate3d(0,0,0);
-    -moz-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0,-4px,0);
-    -moz-transform: translate3d(0,-4px,0);
-    -ms-transform: translate3d(0,-4px,0);
     transform: translate3d(0,-4px,0);
   }
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
index ab9d62bb38..87f32bf7d4 100644
--- a/packages/css/test/no-babel/__snapshots__/index.test.js.snap
+++ b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
@@ -18,13 +18,7 @@ exports[`css component selectors without target 1`] = `"Component selectors can
 
 exports[`css composition 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -39,9 +33,6 @@ exports[`css composition 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -52,9 +43,6 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -65,15 +53,9 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -114,12 +96,7 @@ exports[`css function in expression 1`] = `
 exports[`css glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -134,9 +111,6 @@ exports[`css glamorous style api & composition 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -151,9 +125,6 @@ exports[`css handles objects 1`] = `
 
 exports[`css nested array 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -183,12 +154,7 @@ exports[`css null rule 1`] = `
 exports[`css object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/css.js.snap b/packages/react/__tests__/__snapshots__/css.js.snap
index 5d97fd568a..79d98b6eb2 100644
--- a/packages/react/__tests__/__snapshots__/css.js.snap
+++ b/packages/react/__tests__/__snapshots__/css.js.snap
@@ -178,9 +178,6 @@ exports[`string as css prop throws 1`] = `
 exports[`theming with the array css prop 1`] = `
 .emotion-0 {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -201,9 +198,6 @@ exports[`theming with the css prop 1`] = `
 
 exports[`thing 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/global.js.snap b/packages/react/__tests__/__snapshots__/global.js.snap
index 8f4a98b806..e804794eb3 100644
--- a/packages/react/__tests__/__snapshots__/global.js.snap
+++ b/packages/react/__tests__/__snapshots__/global.js.snap
@@ -9,13 +9,6 @@ exports[`basic 1`] = `
     
     .css-animation-ocj8pk{}
   </style>
-  <style
-    data-emotion="css"
-    data-s=""
-  >
-    
-    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
-  </style>
   <style
     data-emotion="css"
     data-s=""
@@ -42,7 +35,7 @@ exports[`basic 1`] = `
     data-s=""
   >
     
-    h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
+    h1{animation:animation-ocj8pk 1s;}
   </style>
   <style
     data-emotion="css-global"
@@ -69,13 +62,6 @@ exports[`basic 3`] = `
     
     .css-animation-ocj8pk{}
   </style>
-  <style
-    data-emotion="css"
-    data-s=""
-  >
-    
-    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
-  </style>
   <style
     data-emotion="css"
     data-s=""
diff --git a/packages/react/__tests__/__snapshots__/keyframes.js.snap b/packages/react/__tests__/__snapshots__/keyframes.js.snap
index 9e1bac3eee..0151219587 100644
--- a/packages/react/__tests__/__snapshots__/keyframes.js.snap
+++ b/packages/react/__tests__/__snapshots__/keyframes.js.snap
@@ -12,7 +12,6 @@ exports[`keyframes basic 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -25,8 +24,7 @@ exports[`keyframes basic 1`] = `
 
 exports[`keyframes basic 2`] = `
 [
-  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1mzou9w{animation:animation-1bi8wtt;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -53,7 +51,6 @@ exports[`keyframes keyframes used in css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -66,10 +63,8 @@ exports[`keyframes keyframes used in css call 1`] = `
 
 exports[`keyframes keyframes used in css call 2`] = `
 [
-  ".css-9yzsha{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-9yzsha{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
-  "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
 ]
 `;
@@ -96,7 +91,6 @@ exports[`keyframes multiple keyframes object 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -109,10 +103,8 @@ exports[`keyframes multiple keyframes object 1`] = `
 
 exports[`keyframes multiple keyframes object 2`] = `
 [
-  ".css-1jqzi3u{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
-  "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
+  ".css-1jqzi3u{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -129,7 +121,6 @@ exports[`keyframes object 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -142,8 +133,7 @@ exports[`keyframes object 1`] = `
 
 exports[`keyframes object 2`] = `
 [
-  ".css-d88cqt{-webkit-animation:animation-o4c3es 1s;animation:animation-o4c3es 1s;}",
-  "@-webkit-keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
+  ".css-d88cqt{animation:animation-o4c3es 1s;}",
   "@keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -160,9 +150,7 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -175,8 +163,7 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 
 exports[`keyframes object with animation and opaque keyframes as value 2`] = `
 [
-  ".css-g32qbw{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-g32qbw{animation:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -193,9 +180,7 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 }
 
 .emotion-0 {
-  -webkit-animation-name: animation-0;
   animation-name: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -208,8 +193,7 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 
 exports[`keyframes object with animationName and opaque keyframes as value 2`] = `
 [
-  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -226,9 +210,7 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 }
 
 .emotion-0 {
-  -webkit-animation-name: animation-0;
   animation-name: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -241,8 +223,7 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 
 exports[`keyframes object with animationName and string keyframes as value 2`] = `
 [
-  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -259,7 +240,6 @@ exports[`keyframes object with string keyframes 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -272,8 +252,7 @@ exports[`keyframes object with string keyframes 1`] = `
 
 exports[`keyframes object with string keyframes 2`] = `
 [
-  ".css-1wh2ide{-webkit-animation:animation-1bi8wtt 1s;animation:animation-1bi8wtt 1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1wh2ide{animation:animation-1bi8wtt 1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -290,7 +269,6 @@ exports[`keyframes without css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -303,8 +281,7 @@ exports[`keyframes without css call 1`] = `
 
 exports[`keyframes without css call 2`] = `
 [
-  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1mzou9w{animation:animation-1bi8wtt;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
diff --git a/packages/react/__tests__/__snapshots__/server.js.snap b/packages/react/__tests__/__snapshots__/server.js.snap
index 3e4665ee44..9a1d90824e 100644
--- a/packages/react/__tests__/__snapshots__/server.js.snap
+++ b/packages/react/__tests__/__snapshots__/server.js.snap
@@ -29,13 +29,13 @@ exports[`ssr global 1`] = `
 
 exports[`ssr global with keyframes 1`] = `
 <style data-emotion="css-global eti4v9 animation-ocj8pk">
-  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr keyframes 1`] = `
 <style data-emotion="css cijyg1 animation-1ch4i0o">
-  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}@-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  .css-cijyg1{animation:1s animation-1ch4i0o;}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -73,7 +73,7 @@ exports[`ssr only render a style once with the css prop 1`] = `
 
 exports[`ssr styled with keyframes 1`] = `
 <style data-emotion="css 1y9glrp animation-ocj8pk">
-  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  .css-1y9glrp{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <div class="css-1y9glrp">
 </div>
@@ -114,16 +114,16 @@ exports[`ssr with old api global 1`] = `
 
 exports[`ssr with old api global with keyframes 1`] = `
 <style data-emotion="css eti4v9 animation-ocj8pk">
-  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr with old api keyframes 1`] = `
 <style data-emotion="css animation-1ch4i0o">
-  @-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  @keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <style data-emotion="css cijyg1">
-  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}
+  .css-cijyg1{animation:1s animation-1ch4i0o;}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -161,10 +161,10 @@ exports[`ssr with old api only render a style once with the css prop 1`] = `
 
 exports[`ssr with old api styled with keyframes 1`] = `
 <style data-emotion="css animation-ocj8pk">
-  @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  @keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <style data-emotion="css 1y9glrp">
-  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
+  .css-1y9glrp{animation:animation-ocj8pk 1s;}
 </style>
 <div class="css-1y9glrp">
 </div>
diff --git a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
index f8e5385af9..183f2398a8 100644
--- a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
+++ b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
@@ -8,7 +8,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -20,7 +20,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -50,9 +50,6 @@ exports[`extractCriticalToChunks returns static css 1`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -97,9 +94,6 @@ exports[`extractCriticalToChunks returns static css 2`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/server/test/__snapshots__/index.test.js.snap b/packages/server/test/__snapshots__/index.test.js.snap
index eb505a59b3..a452b243d8 100644
--- a/packages/server/test/__snapshots__/index.test.js.snap
+++ b/packages/server/test/__snapshots__/index.test.js.snap
@@ -10,94 +10,34 @@ exports[`extractCritical returns static css 1`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -109,7 +49,6 @@ exports[`extractCritical returns static css 1`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -145,94 +84,34 @@ exports[`extractCritical returns static css 2`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -266,94 +145,34 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -365,7 +184,6 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
diff --git a/packages/server/test/__snapshots__/inline.test.js.snap b/packages/server/test/__snapshots__/inline.test.js.snap
index 696f13913c..2314561ff9 100644
--- a/packages/server/test/__snapshots__/inline.test.js.snap
+++ b/packages/server/test/__snapshots__/inline.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -47,94 +47,34 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -146,7 +86,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1963,14 +1902,14 @@ exports[`renderStylesToString renders large recursive component 1`] = `
 
 exports[`renderStylesToString renders styles with ids 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1984,10 +1923,10 @@ exports[`renderStylesToString renders styles with ids 1`] = `
 
 exports[`renderStylesToString renders styles with ids 2`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/server/test/__snapshots__/stream.test.js.snap b/packages/server/test/__snapshots__/stream.test.js.snap
index d9a169dab1..d536b65616 100644
--- a/packages/server/test/__snapshots__/stream.test.js.snap
+++ b/packages/server/test/__snapshots__/stream.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -44,94 +44,34 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -143,7 +83,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1957,11 +1896,11 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1975,7 +1914,7 @@ exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 2`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
index 9ffd72ea73..7c5a7e2006 100644
--- a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
+++ b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
@@ -25,7 +25,6 @@ exports[`nested function using css and keyframes 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 7546e156c5..92ab9cea87 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -69,13 +69,7 @@ exports[`styled composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -190,12 +184,7 @@ exports[`styled function in expression 1`] = `
 exports[`styled glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -209,7 +198,6 @@ exports[`styled glamorous style api & composition 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -236,8 +224,6 @@ exports[`styled higher order component 1`] = `
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -259,18 +245,6 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -282,18 +256,6 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -316,7 +278,6 @@ exports[`styled keyframes with css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -327,9 +288,6 @@ exports[`styled keyframes with css call 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -423,12 +381,7 @@ exports[`styled object as className 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -443,7 +396,6 @@ exports[`styled object as style 1`] = `
 exports[`styled object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
-  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -453,9 +405,6 @@ exports[`styled object composition 1`] = `
 }
 
 .emotion-0:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
@@ -467,9 +416,6 @@ exports[`styled object composition 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -602,9 +548,6 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;
diff --git a/packages/styled/test/__snapshots__/component-selector.test.js.snap b/packages/styled/test/__snapshots__/component-selector.test.js.snap
index 2c3b80fd73..f3d30f601a 100644
--- a/packages/styled/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/styled/test/__snapshots__/component-selector.test.js.snap
@@ -2,9 +2,6 @@
 
 exports[`component as selector (object syntax) 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -31,9 +28,6 @@ exports[`component as selector (object syntax) 1`] = `
 
 exports[`component as selector 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -60,9 +54,6 @@ exports[`component as selector 1`] = `
 
 exports[`component as selector function interpolation (object syntax) 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -91,9 +82,6 @@ exports[`component as selector function interpolation (object syntax) 1`] = `
 
 exports[`component as selector function interpolation 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/styled/test/__snapshots__/composition.test.js.snap b/packages/styled/test/__snapshots__/composition.test.js.snap
index 019c5105d5..72e283d35b 100644
--- a/packages/styled/test/__snapshots__/composition.test.js.snap
+++ b/packages/styled/test/__snapshots__/composition.test.js.snap
@@ -4,13 +4,7 @@ exports[`composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -110,12 +104,7 @@ exports[`composition with objects 1`] = `
 exports[`glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -130,7 +119,6 @@ exports[`glamorous style api & composition 1`] = `
 exports[`object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
-  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -140,9 +128,6 @@ exports[`object composition 1`] = `
 }
 
 .emotion-0:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap
index f988c14394..040c105d6b 100644
--- a/packages/styled/test/__snapshots__/index.test.js.snap
+++ b/packages/styled/test/__snapshots__/index.test.js.snap
@@ -95,7 +95,6 @@ exports[`styled function that function returns gets called with props 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -130,18 +129,6 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -153,18 +140,6 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -177,9 +152,6 @@ exports[`styled input placeholder object 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -223,12 +195,7 @@ exports[`styled no dynamic 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -243,9 +210,6 @@ exports[`styled object as style 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -318,9 +282,6 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;

From 37fa86eb8d8b1defee3e4913c9024e35c6861a88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 15 Dec 2024 12:22:56 +0100
Subject: [PATCH 02/10] changeset

---
 .changeset/late-horses-join.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/late-horses-join.md

diff --git a/.changeset/late-horses-join.md b/.changeset/late-horses-join.md
new file mode 100644
index 0000000000..e6e9640e33
--- /dev/null
+++ b/.changeset/late-horses-join.md
@@ -0,0 +1,8 @@
+---
+'@emotion/styled': major
+'@emotion/cache': major
+'@emotion/react': major
+'@emotion/css': major
+---
+
+Removed auto-prefixing from the defaults. It can still be used by creating a custom cache with a `prefixer` plugin from `stylis`.

From cf9668c57c96a3f82d887fdb28392e69d7cdc4e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 12 Jan 2025 12:07:35 +0100
Subject: [PATCH 03/10] Revert "Drop prefixer"

This reverts commit 3759507d3dfd99812acb183c4e1c82a064c456f6.
---
 .../__tests__/__snapshots__/index.js.snap     |   7 +-
 packages/cache/src/index.ts                   |   4 +-
 packages/cache/src/prefixer.ts                | 347 ++++++++++++++++++
 .../css/test/__snapshots__/css.test.js.snap   |  69 ++++
 .../__snapshots__/inject-global.test.js.snap  |   9 +
 .../test/__snapshots__/keyframes.test.js.snap |  23 ++
 .../no-babel/__snapshots__/index.test.js.snap |  34 ++
 .../react/__tests__/__snapshots__/css.js.snap |   6 +
 .../__tests__/__snapshots__/global.js.snap    |  16 +-
 .../__tests__/__snapshots__/keyframes.js.snap |  41 ++-
 .../__tests__/__snapshots__/server.js.snap    |  16 +-
 .../extract-critical-to-chunks.test.js.snap   |  10 +-
 .../test/__snapshots__/index.test.js.snap     | 182 +++++++++
 .../test/__snapshots__/inline.test.js.snap    |  77 +++-
 .../test/__snapshots__/stream.test.js.snap    |  71 +++-
 .../__snapshots__/edge-cases.js.snap          |   1 +
 .../__tests__/__snapshots__/styled.js.snap    |  57 +++
 .../component-selector.test.js.snap           |  12 +
 .../__snapshots__/composition.test.js.snap    |  15 +
 .../test/__snapshots__/index.test.js.snap     |  39 ++
 20 files changed, 999 insertions(+), 37 deletions(-)
 create mode 100644 packages/cache/src/prefixer.ts

diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index 02a2c44bfc..8c0879fc93 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -2,6 +2,9 @@
 
 exports[`should accept container option 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   color: blue;
 }
@@ -19,7 +22,7 @@ exports[`should accept container option 1`] = `
       data-s=""
     >
       
-      .emotion-0{display:flex;color:blue;}
+      .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
     </style>
   </div>
   <div>
@@ -42,7 +45,7 @@ exports[`should accept insertionPoint option 1`] = `
     data-s=""
   >
     
-    .test-insertion-point-83n355{display:flex;color:blue;}
+    .test-insertion-point-83n355{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
   </style>
   
     
diff --git a/packages/cache/src/index.ts b/packages/cache/src/index.ts
index 28db9a6715..706a3fa41e 100644
--- a/packages/cache/src/index.ts
+++ b/packages/cache/src/index.ts
@@ -19,6 +19,7 @@ import {
   createUnsafeSelectorsAlarm,
   incorrectImportAlarm
 } from './stylis-plugins'
+import { prefixer } from './prefixer'
 import { StylisPlugin } from './types'
 
 export interface Options {
@@ -36,8 +37,7 @@ let getServerStylisCache = isBrowser
   ? undefined
   : weakMemoize(() => memoize<Record<string, string>>(() => ({})))
 
-// keep it in a variable as it's used as cache key by `getServerStylisCache`
-const defaultStylisPlugins: StylisPlugin[] = []
+const defaultStylisPlugins = [prefixer]
 
 let getSourceMap: ((styles: string) => string | undefined) | undefined
 if (isDevelopment) {
diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
new file mode 100644
index 0000000000..8a91467a36
--- /dev/null
+++ b/packages/cache/src/prefixer.ts
@@ -0,0 +1,347 @@
+/* eslint-disable no-fallthrough */
+/* eslint-disable eqeqeq */
+import {
+  charat,
+  combine,
+  copy,
+  DECLARATION,
+  hash,
+  indexof,
+  KEYFRAMES,
+  match,
+  MOZ,
+  MS,
+  replace,
+  RULESET,
+  serialize,
+  strlen,
+  WEBKIT,
+  Element,
+  Middleware
+} from 'stylis'
+
+// this is a copy of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
+
+function prefix(value: string, length: number): string {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + 'print-' + value + value
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value
+    // appearance, user-select, transform, hyphens, text-size-adjust
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value
+    // flex, flex-direction
+    case 6828:
+    case 4268:
+      return WEBKIT + value + MS + value + value
+    // order
+    case 6165:
+      return WEBKIT + value + MS + 'flex-' + value + value
+    // align-items
+    case 5187:
+      return (
+        WEBKIT +
+        value +
+        replace(
+          value,
+          /(\w+).+(:[^]+)/,
+          WEBKIT + 'box-$1$2' + MS + 'flex-$1$2'
+        ) +
+        value
+      )
+    // align-self
+    case 5443:
+      return (
+        WEBKIT +
+        value +
+        MS +
+        'flex-item-' +
+        replace(value, /flex-|-self/, '') +
+        value
+      )
+    // align-content
+    case 4675:
+      return (
+        WEBKIT +
+        value +
+        MS +
+        'flex-line-pack' +
+        replace(value, /align-content|flex-|-self/, '') +
+        value
+      )
+    // flex-shrink
+    case 5548:
+      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
+    // flex-basis
+    case 5292:
+      return (
+        WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
+      )
+    // flex-grow
+    case 6060:
+      return (
+        WEBKIT +
+        'box-' +
+        replace(value, '-grow', '') +
+        WEBKIT +
+        value +
+        MS +
+        replace(value, 'grow', 'positive') +
+        value
+      )
+    // transition
+    case 4554:
+      return (
+        WEBKIT +
+        replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') +
+        value
+      )
+    // cursor
+    case 6187:
+      return (
+        replace(
+          replace(
+            replace(value, /(zoom-|grab)/, WEBKIT + '$1'),
+            /(image-set)/,
+            WEBKIT + '$1'
+          ),
+          value,
+          ''
+        ) + value
+      )
+    // background, background-image
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
+    // justify-content
+    case 4968:
+      return (
+        replace(
+          replace(
+            value,
+            /(.+:)(flex-)?(.*)/,
+            WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'
+          ),
+          /s.+-b[^;]+/,
+          'justify'
+        ) +
+        WEBKIT +
+        value +
+        value
+      )
+    // (margin|padding)-inline-(start|end)
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6)
+        switch (charat(value, length + 1)) {
+          // (m)ax-content, (m)in-content
+          case 109:
+            // -
+            if (charat(value, length + 4) !== 45) break
+          // (f)ill-available, (f)it-content
+          case 102:
+            return (
+              replace(
+                value,
+                /(.+:)(.+)-([^]+)/,
+                '$1' +
+                  WEBKIT +
+                  '$2-$3' +
+                  '$1' +
+                  MOZ +
+                  (charat(value, length + 3) == 108 ? '$3' : '$2-$3')
+              ) + value
+            )
+          // (s)tretch
+          case 115:
+            return ~indexof(value, 'stretch')
+              ? prefix(replace(value, 'stretch', 'fill-available'), length) +
+                  value
+              : value
+        }
+      break
+    // position: sticky
+    case 4949:
+      // (s)ticky?
+      if (charat(value, length + 1) !== 115) break
+    // display: (flex|inline-flex)
+    case 6444:
+      switch (
+        charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))
+      ) {
+        // stic(k)y
+        case 107:
+          return replace(value, ':', ':' + WEBKIT) + value
+        // (inline-)?fl(e)x
+        case 101:
+          return (
+            replace(
+              value,
+              /(.+:)([^;!]+)(;|!.+)?/,
+              '$1' +
+                WEBKIT +
+                (charat(value, 14) === 45 ? 'inline-' : '') +
+                'box$3' +
+                '$1' +
+                WEBKIT +
+                '$2$3' +
+                '$1' +
+                MS +
+                '$2box$3'
+            ) + value
+          )
+      }
+      break
+    // writing-mode
+    case 5936:
+      switch (charat(value, length + 11)) {
+        // vertical-l(r)
+        case 114:
+          return (
+            WEBKIT +
+            value +
+            MS +
+            replace(value, /[svh]\w+-[tblr]{2}/, 'tb') +
+            value
+          )
+        // vertical-r(l)
+        case 108:
+          return (
+            WEBKIT +
+            value +
+            MS +
+            replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') +
+            value
+          )
+        // horizontal(-)tb
+        case 45:
+          return (
+            WEBKIT +
+            value +
+            MS +
+            replace(value, /[svh]\w+-[tblr]{2}/, 'lr') +
+            value
+          )
+      }
+
+      return WEBKIT + value + MS + value + value
+  }
+
+  return value
+}
+
+export let prefixer = (
+  element: Element,
+  index: number,
+  children: Element[],
+  callback: Middleware
+) => {
+  if (element.length > -1)
+    if (!element.return)
+      switch (element.type) {
+        case DECLARATION:
+          element.return = prefix(element.value, element.length)
+          break
+        case KEYFRAMES:
+          return serialize(
+            [
+              copy(element, {
+                value: replace(element.value, '@', '@' + WEBKIT)
+              })
+            ],
+            callback
+          )
+        case RULESET:
+          if (element.length)
+            return combine(element.props as string[], function (value) {
+              switch (match(value, /(::plac\w+|:read-\w+)/)) {
+                // :read-(only|write)
+                case ':read-only':
+                case ':read-write':
+                  return serialize(
+                    [
+                      copy(element, {
+                        props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+                      })
+                    ],
+                    callback
+                  )
+                // :placeholder
+                case '::placeholder':
+                  return serialize(
+                    [
+                      copy(element, {
+                        props: [
+                          replace(
+                            value,
+                            /:(plac\w+)/,
+                            ':' + WEBKIT + 'input-$1'
+                          )
+                        ]
+                      }),
+                      copy(element, {
+                        props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+                      }),
+                      copy(element, {
+                        props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+                      })
+                    ],
+                    callback
+                  )
+              }
+
+              return ''
+            })
+      }
+}
diff --git a/packages/css/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap
index aeb222378c..c4b2a1a926 100644
--- a/packages/css/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/__snapshots__/css.test.js.snap
@@ -25,6 +25,9 @@ exports[`css array fallback 1`] = `
 
 exports[`css array with explicit false 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -35,6 +38,9 @@ exports[`css array with explicit false 1`] = `
 
 exports[`css array with explicit true 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -45,7 +51,12 @@ exports[`css array with explicit true 1`] = `
 
 exports[`css auto px 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   font-size: 10px;
   --custom: 5;
@@ -58,6 +69,9 @@ exports[`css auto px 1`] = `
 
 exports[`css boolean as value 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -68,6 +82,9 @@ exports[`css boolean as value 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -78,6 +95,9 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -88,9 +108,15 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -138,6 +164,9 @@ exports[`css css variables 1`] = `
 
 exports[`css explicit & 1`] = `
 .emotion-0.another-class {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -148,6 +177,9 @@ exports[`css explicit & 1`] = `
 
 exports[`css explicit & 2`] = `
 ".css-5v9d41-cls1.another-class {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }"
 `;
@@ -160,6 +192,9 @@ exports[`css explicit false 1`] = `
 
 exports[`css falsy property value in object 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -190,6 +225,9 @@ exports[`css float property 1`] = `
 
 exports[`css flushes correctly 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -217,6 +255,7 @@ exports[`css handles array of objects 1`] = `
 
 exports[`css handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -238,6 +277,9 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -327,6 +369,9 @@ exports[`css nested 1`] = `
 }
 
 .emotion-0 .some-class {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -358,6 +403,9 @@ exports[`css nested array 1`] = `
   display: inline;
   display: inline-block;
   display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   display: table;
   color: darkorchid;
@@ -399,6 +447,9 @@ exports[`css nested at rules 1`] = `
 
   @supports (display: flex) {
     .emotion-0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
       display: flex;
     }
   }
@@ -455,6 +506,9 @@ exports[`css random expression 1`] = `
 
 exports[`css random interpolation with undefined values 1`] = `
 .emotion-0 {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -465,6 +519,9 @@ exports[`css random interpolation with undefined values 1`] = `
 
 exports[`css registered styles as nested selector value in object 1`] = `
 .emotion-0:hover {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   background-color: hotpink;
 }
@@ -492,7 +549,13 @@ exports[`css rule after media query 1`] = `
 
 exports[`css simple composition 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -507,6 +570,9 @@ exports[`css simple composition 1`] = `
 
 exports[`css weakmap 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -517,6 +583,9 @@ exports[`css weakmap 1`] = `
 
 exports[`css weakmap 2`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/css/test/__snapshots__/inject-global.test.js.snap b/packages/css/test/__snapshots__/inject-global.test.js.snap
index 9dda829049..def7a1604e 100644
--- a/packages/css/test/__snapshots__/inject-global.test.js.snap
+++ b/packages/css/test/__snapshots__/inject-global.test.js.snap
@@ -21,6 +21,9 @@ exports[`injectGlobal interpolated value 1`] = `
 exports[`injectGlobal nested interpolated media query 1`] = `
 "@media (max-width: 600px) {
   body {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
   }
 }"
@@ -36,10 +39,16 @@ exports[`injectGlobal pseudo in @media 1`] = `
 
 exports[`injectGlobal random interpolation 1`] = `
 ".css-1002tid-cls {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
 body {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }"
 `;
diff --git a/packages/css/test/__snapshots__/keyframes.test.js.snap b/packages/css/test/__snapshots__/keyframes.test.js.snap
index 684fc0c310..190c314456 100644
--- a/packages/css/test/__snapshots__/keyframes.test.js.snap
+++ b/packages/css/test/__snapshots__/keyframes.test.js.snap
@@ -3,15 +3,22 @@
 exports[`keyframes keyframes with interpolation 1`] = `
 @keyframes animation-0 {
   from {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
@@ -25,26 +32,42 @@ exports[`keyframes keyframes with interpolation 1`] = `
 exports[`keyframes renders 1`] = `
 @keyframes animation-0 {
   from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 
   40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    -moz-transform: translate3d(0,-4px,0);
+    -ms-transform: translate3d(0,-4px,0);
     transform: translate3d(0,-4px,0);
   }
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
index 87f32bf7d4..ab9d62bb38 100644
--- a/packages/css/test/no-babel/__snapshots__/index.test.js.snap
+++ b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
@@ -18,7 +18,13 @@ exports[`css component selectors without target 1`] = `"Component selectors can
 
 exports[`css composition 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -33,6 +39,9 @@ exports[`css composition 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -43,6 +52,9 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -53,9 +65,15 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -96,7 +114,12 @@ exports[`css function in expression 1`] = `
 exports[`css glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -111,6 +134,9 @@ exports[`css glamorous style api & composition 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -125,6 +151,9 @@ exports[`css handles objects 1`] = `
 
 exports[`css nested array 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -154,7 +183,12 @@ exports[`css null rule 1`] = `
 exports[`css object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/css.js.snap b/packages/react/__tests__/__snapshots__/css.js.snap
index 79d98b6eb2..5d97fd568a 100644
--- a/packages/react/__tests__/__snapshots__/css.js.snap
+++ b/packages/react/__tests__/__snapshots__/css.js.snap
@@ -178,6 +178,9 @@ exports[`string as css prop throws 1`] = `
 exports[`theming with the array css prop 1`] = `
 .emotion-0 {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -198,6 +201,9 @@ exports[`theming with the css prop 1`] = `
 
 exports[`thing 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/global.js.snap b/packages/react/__tests__/__snapshots__/global.js.snap
index e804794eb3..8f4a98b806 100644
--- a/packages/react/__tests__/__snapshots__/global.js.snap
+++ b/packages/react/__tests__/__snapshots__/global.js.snap
@@ -9,6 +9,13 @@ exports[`basic 1`] = `
     
     .css-animation-ocj8pk{}
   </style>
+  <style
+    data-emotion="css"
+    data-s=""
+  >
+    
+    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  </style>
   <style
     data-emotion="css"
     data-s=""
@@ -35,7 +42,7 @@ exports[`basic 1`] = `
     data-s=""
   >
     
-    h1{animation:animation-ocj8pk 1s;}
+    h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
   </style>
   <style
     data-emotion="css-global"
@@ -62,6 +69,13 @@ exports[`basic 3`] = `
     
     .css-animation-ocj8pk{}
   </style>
+  <style
+    data-emotion="css"
+    data-s=""
+  >
+    
+    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  </style>
   <style
     data-emotion="css"
     data-s=""
diff --git a/packages/react/__tests__/__snapshots__/keyframes.js.snap b/packages/react/__tests__/__snapshots__/keyframes.js.snap
index 0151219587..9e1bac3eee 100644
--- a/packages/react/__tests__/__snapshots__/keyframes.js.snap
+++ b/packages/react/__tests__/__snapshots__/keyframes.js.snap
@@ -12,6 +12,7 @@ exports[`keyframes basic 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -24,7 +25,8 @@ exports[`keyframes basic 1`] = `
 
 exports[`keyframes basic 2`] = `
 [
-  ".css-1mzou9w{animation:animation-1bi8wtt;}",
+  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
+  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -51,6 +53,7 @@ exports[`keyframes keyframes used in css call 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -63,8 +66,10 @@ exports[`keyframes keyframes used in css call 1`] = `
 
 exports[`keyframes keyframes used in css call 2`] = `
 [
-  ".css-9yzsha{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
+  ".css-9yzsha{-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;}}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
 ]
 `;
@@ -91,6 +96,7 @@ exports[`keyframes multiple keyframes object 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -103,8 +109,10 @@ exports[`keyframes multiple keyframes object 1`] = `
 
 exports[`keyframes multiple keyframes object 2`] = `
 [
-  ".css-1jqzi3u{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
+  ".css-1jqzi3u{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
+  "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
+  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -121,6 +129,7 @@ exports[`keyframes object 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -133,7 +142,8 @@ exports[`keyframes object 1`] = `
 
 exports[`keyframes object 2`] = `
 [
-  ".css-d88cqt{animation:animation-o4c3es 1s;}",
+  ".css-d88cqt{-webkit-animation:animation-o4c3es 1s;animation:animation-o4c3es 1s;}",
+  "@-webkit-keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -150,7 +160,9 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0;
   animation: animation-0;
+  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -163,7 +175,8 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 
 exports[`keyframes object with animation and opaque keyframes as value 2`] = `
 [
-  ".css-g32qbw{animation:animation-1bi8wtt;animation-duration:1s;}",
+  ".css-g32qbw{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
+  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -180,7 +193,9 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 }
 
 .emotion-0 {
+  -webkit-animation-name: animation-0;
   animation-name: animation-0;
+  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -193,7 +208,8 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 
 exports[`keyframes object with animationName and opaque keyframes as value 2`] = `
 [
-  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
+  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
+  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -210,7 +226,9 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 }
 
 .emotion-0 {
+  -webkit-animation-name: animation-0;
   animation-name: animation-0;
+  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -223,7 +241,8 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 
 exports[`keyframes object with animationName and string keyframes as value 2`] = `
 [
-  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
+  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
+  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -240,6 +259,7 @@ exports[`keyframes object with string keyframes 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -252,7 +272,8 @@ exports[`keyframes object with string keyframes 1`] = `
 
 exports[`keyframes object with string keyframes 2`] = `
 [
-  ".css-1wh2ide{animation:animation-1bi8wtt 1s;}",
+  ".css-1wh2ide{-webkit-animation:animation-1bi8wtt 1s;animation:animation-1bi8wtt 1s;}",
+  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -269,6 +290,7 @@ exports[`keyframes without css call 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -281,7 +303,8 @@ exports[`keyframes without css call 1`] = `
 
 exports[`keyframes without css call 2`] = `
 [
-  ".css-1mzou9w{animation:animation-1bi8wtt;}",
+  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
+  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
diff --git a/packages/react/__tests__/__snapshots__/server.js.snap b/packages/react/__tests__/__snapshots__/server.js.snap
index 9a1d90824e..3e4665ee44 100644
--- a/packages/react/__tests__/__snapshots__/server.js.snap
+++ b/packages/react/__tests__/__snapshots__/server.js.snap
@@ -29,13 +29,13 @@ exports[`ssr global 1`] = `
 
 exports[`ssr global with keyframes 1`] = `
 <style data-emotion="css-global eti4v9 animation-ocj8pk">
-  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr keyframes 1`] = `
 <style data-emotion="css cijyg1 animation-1ch4i0o">
-  .css-cijyg1{animation:1s animation-1ch4i0o;}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}@-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -73,7 +73,7 @@ exports[`ssr only render a style once with the css prop 1`] = `
 
 exports[`ssr styled with keyframes 1`] = `
 <style data-emotion="css 1y9glrp animation-ocj8pk">
-  .css-1y9glrp{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <div class="css-1y9glrp">
 </div>
@@ -114,16 +114,16 @@ exports[`ssr with old api global 1`] = `
 
 exports[`ssr with old api global with keyframes 1`] = `
 <style data-emotion="css eti4v9 animation-ocj8pk">
-  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr with old api keyframes 1`] = `
 <style data-emotion="css animation-1ch4i0o">
-  @keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  @-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <style data-emotion="css cijyg1">
-  .css-cijyg1{animation:1s animation-1ch4i0o;}
+  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -161,10 +161,10 @@ exports[`ssr with old api only render a style once with the css prop 1`] = `
 
 exports[`ssr with old api styled with keyframes 1`] = `
 <style data-emotion="css animation-ocj8pk">
-  @keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <style data-emotion="css 1y9glrp">
-  .css-1y9glrp{animation:animation-ocj8pk 1s;}
+  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
 </style>
 <div class="css-1y9glrp">
 </div>
diff --git a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
index 183f2398a8..f8e5385af9 100644
--- a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
+++ b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
@@ -8,7 +8,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -20,7 +20,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -50,6 +50,9 @@ exports[`extractCriticalToChunks returns static css 1`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -94,6 +97,9 @@ exports[`extractCriticalToChunks returns static css 2`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/server/test/__snapshots__/index.test.js.snap b/packages/server/test/__snapshots__/index.test.js.snap
index a452b243d8..eb505a59b3 100644
--- a/packages/server/test/__snapshots__/index.test.js.snap
+++ b/packages/server/test/__snapshots__/index.test.js.snap
@@ -10,34 +10,94 @@ exports[`extractCritical returns static css 1`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
+@-webkit-keyframes animation-i9f7qw-bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -49,6 +109,7 @@ exports[`extractCritical returns static css 1`] = `
 }
 
 .css-1h1w8ez-Image {
+  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -84,34 +145,94 @@ exports[`extractCritical returns static css 2`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
+@-webkit-keyframes animation-i9f7qw-bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -145,34 +266,94 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
+@-webkit-keyframes animation-i9f7qw-bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -184,6 +365,7 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
 }
 
 .css-1h1w8ez-Image {
+  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
diff --git a/packages/server/test/__snapshots__/inline.test.js.snap b/packages/server/test/__snapshots__/inline.test.js.snap
index 2314561ff9..696f13913c 100644
--- a/packages/server/test/__snapshots__/inline.test.js.snap
+++ b/packages/server/test/__snapshots__/inline.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -47,34 +47,94 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
+@-webkit-keyframes animation-i9f7qw-bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -86,6 +146,7 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
+  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1902,14 +1963,14 @@ exports[`renderStylesToString renders large recursive component 1`] = `
 
 exports[`renderStylesToString renders styles with ids 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1923,10 +1984,10 @@ exports[`renderStylesToString renders styles with ids 1`] = `
 
 exports[`renderStylesToString renders styles with ids 2`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/server/test/__snapshots__/stream.test.js.snap b/packages/server/test/__snapshots__/stream.test.js.snap
index d536b65616..d9a169dab1 100644
--- a/packages/server/test/__snapshots__/stream.test.js.snap
+++ b/packages/server/test/__snapshots__/stream.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -44,34 +44,94 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
+@-webkit-keyframes animation-i9f7qw-bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    -moz-transform: translate3d(0, -30px, 0);
+    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    -moz-transform: translate3d(0, -15px, 0);
+    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    -moz-transform: translate3d(0, -4px, 0);
+    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -83,6 +143,7 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
+  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1896,11 +1957,11 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1914,7 +1975,7 @@ exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 2`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
index 7c5a7e2006..9ffd72ea73 100644
--- a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
+++ b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
@@ -25,6 +25,7 @@ exports[`nested function using css and keyframes 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 92ab9cea87..7546e156c5 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -69,7 +69,13 @@ exports[`styled composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -184,7 +190,12 @@ exports[`styled function in expression 1`] = `
 exports[`styled glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -198,6 +209,7 @@ exports[`styled glamorous style api & composition 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -224,6 +236,8 @@ exports[`styled higher order component 1`] = `
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -245,6 +259,18 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
+.emotion-0::-webkit-input-placeholder {
+  background-color: green;
+}
+
+.emotion-0::-moz-placeholder {
+  background-color: green;
+}
+
+.emotion-0:-ms-input-placeholder {
+  background-color: green;
+}
+
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -256,6 +282,18 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
+.emotion-0::-webkit-input-placeholder {
+  background-color: green;
+}
+
+.emotion-0::-moz-placeholder {
+  background-color: green;
+}
+
+.emotion-0:-ms-input-placeholder {
+  background-color: green;
+}
+
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -278,6 +316,7 @@ exports[`styled keyframes with css call 1`] = `
 }
 
 .emotion-0 {
+  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -288,6 +327,9 @@ exports[`styled keyframes with css call 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -381,7 +423,12 @@ exports[`styled object as className 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -396,6 +443,7 @@ exports[`styled object as style 1`] = `
 exports[`styled object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
+  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -405,6 +453,9 @@ exports[`styled object composition 1`] = `
 }
 
 .emotion-0:hover {
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
@@ -416,6 +467,9 @@ exports[`styled object composition 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -548,6 +602,9 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;
diff --git a/packages/styled/test/__snapshots__/component-selector.test.js.snap b/packages/styled/test/__snapshots__/component-selector.test.js.snap
index f3d30f601a..2c3b80fd73 100644
--- a/packages/styled/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/styled/test/__snapshots__/component-selector.test.js.snap
@@ -2,6 +2,9 @@
 
 exports[`component as selector (object syntax) 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -28,6 +31,9 @@ exports[`component as selector (object syntax) 1`] = `
 
 exports[`component as selector 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -54,6 +60,9 @@ exports[`component as selector 1`] = `
 
 exports[`component as selector function interpolation (object syntax) 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -82,6 +91,9 @@ exports[`component as selector function interpolation (object syntax) 1`] = `
 
 exports[`component as selector function interpolation 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/styled/test/__snapshots__/composition.test.js.snap b/packages/styled/test/__snapshots__/composition.test.js.snap
index 72e283d35b..019c5105d5 100644
--- a/packages/styled/test/__snapshots__/composition.test.js.snap
+++ b/packages/styled/test/__snapshots__/composition.test.js.snap
@@ -4,7 +4,13 @@ exports[`composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -104,7 +110,12 @@ exports[`composition with objects 1`] = `
 exports[`glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -119,6 +130,7 @@ exports[`glamorous style api & composition 1`] = `
 exports[`object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
+  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -128,6 +140,9 @@ exports[`object composition 1`] = `
 }
 
 .emotion-0:hover {
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap
index 040c105d6b..f988c14394 100644
--- a/packages/styled/test/__snapshots__/index.test.js.snap
+++ b/packages/styled/test/__snapshots__/index.test.js.snap
@@ -95,6 +95,7 @@ exports[`styled function that function returns gets called with props 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -129,6 +130,18 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
+.emotion-0::-webkit-input-placeholder {
+  background-color: green;
+}
+
+.emotion-0::-moz-placeholder {
+  background-color: green;
+}
+
+.emotion-0:-ms-input-placeholder {
+  background-color: green;
+}
+
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -140,6 +153,18 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
+.emotion-0::-webkit-input-placeholder {
+  background-color: green;
+}
+
+.emotion-0::-moz-placeholder {
+  background-color: green;
+}
+
+.emotion-0:-ms-input-placeholder {
+  background-color: green;
+}
+
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -152,6 +177,9 @@ exports[`styled input placeholder object 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -195,7 +223,12 @@ exports[`styled no dynamic 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -210,6 +243,9 @@ exports[`styled object as style 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -282,6 +318,9 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;

From b9e4e279410f3edf4f58897badc3ebbb765d532e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 12 Jan 2025 12:21:26 +0100
Subject: [PATCH 04/10] prefix what's not widely-avaialble

---
 packages/cache/src/prefixer.ts | 315 +--------------------------------
 1 file changed, 9 insertions(+), 306 deletions(-)

diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
index 8a91467a36..aa2dfa1083 100644
--- a/packages/cache/src/prefixer.ts
+++ b/packages/cache/src/prefixer.ts
@@ -1,46 +1,16 @@
 /* eslint-disable no-fallthrough */
 /* eslint-disable eqeqeq */
-import {
-  charat,
-  combine,
-  copy,
-  DECLARATION,
-  hash,
-  indexof,
-  KEYFRAMES,
-  match,
-  MOZ,
-  MS,
-  replace,
-  RULESET,
-  serialize,
-  strlen,
-  WEBKIT,
-  Element,
-  Middleware
-} from 'stylis'
+import { DECLARATION, Element, hash, MOZ, MS, replace, WEBKIT } from 'stylis'
 
-// this is a copy of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
+// this is a slice of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
+// this version only includes css properties that are not widely available according to https://web-platform-dx.github.io/web-features/
 
 function prefix(value: string, length: number): string {
   switch (hash(value, length)) {
     // color-adjust
     case 5103:
       return WEBKIT + 'print-' + value + value
-    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
-    case 5737:
-    case 4201:
-    case 3177:
-    case 3433:
-    case 1641:
-    case 4457:
-    case 2921:
-    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
-    case 5572:
-    case 6356:
-    case 5844:
-    case 3191:
-    case 6645:
+    // box-decoration-break
     case 3005:
     // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
     case 6391:
@@ -49,87 +19,12 @@ function prefix(value: string, length: number): string {
     case 6135:
     case 4599:
     case 4855:
-    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
-    case 4215:
-    case 6389:
-    case 5109:
-    case 5365:
-    case 5621:
-    case 3829:
       return WEBKIT + value + value
-    // appearance, user-select, transform, hyphens, text-size-adjust
-    case 5349:
+    // user-select, hyphens, text-size-adjust
     case 4246:
-    case 4810:
     case 6968:
     case 2756:
       return WEBKIT + value + MOZ + value + MS + value + value
-    // flex, flex-direction
-    case 6828:
-    case 4268:
-      return WEBKIT + value + MS + value + value
-    // order
-    case 6165:
-      return WEBKIT + value + MS + 'flex-' + value + value
-    // align-items
-    case 5187:
-      return (
-        WEBKIT +
-        value +
-        replace(
-          value,
-          /(\w+).+(:[^]+)/,
-          WEBKIT + 'box-$1$2' + MS + 'flex-$1$2'
-        ) +
-        value
-      )
-    // align-self
-    case 5443:
-      return (
-        WEBKIT +
-        value +
-        MS +
-        'flex-item-' +
-        replace(value, /flex-|-self/, '') +
-        value
-      )
-    // align-content
-    case 4675:
-      return (
-        WEBKIT +
-        value +
-        MS +
-        'flex-line-pack' +
-        replace(value, /align-content|flex-|-self/, '') +
-        value
-      )
-    // flex-shrink
-    case 5548:
-      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
-    // flex-basis
-    case 5292:
-      return (
-        WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
-      )
-    // flex-grow
-    case 6060:
-      return (
-        WEBKIT +
-        'box-' +
-        replace(value, '-grow', '') +
-        WEBKIT +
-        value +
-        MS +
-        replace(value, 'grow', 'positive') +
-        value
-      )
-    // transition
-    case 4554:
-      return (
-        WEBKIT +
-        replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') +
-        value
-      )
     // cursor
     case 6187:
       return (
@@ -143,205 +38,13 @@ function prefix(value: string, length: number): string {
           ''
         ) + value
       )
-    // background, background-image
-    case 5495:
-    case 3959:
-      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
-    // justify-content
-    case 4968:
-      return (
-        replace(
-          replace(
-            value,
-            /(.+:)(flex-)?(.*)/,
-            WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'
-          ),
-          /s.+-b[^;]+/,
-          'justify'
-        ) +
-        WEBKIT +
-        value +
-        value
-      )
-    // (margin|padding)-inline-(start|end)
-    case 4095:
-    case 3583:
-    case 4068:
-    case 2532:
-      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
-    // (min|max)?(width|height|inline-size|block-size)
-    case 8116:
-    case 7059:
-    case 5753:
-    case 5535:
-    case 5445:
-    case 5701:
-    case 4933:
-    case 4677:
-    case 5533:
-    case 5789:
-    case 5021:
-    case 4765:
-      // stretch, max-content, min-content, fill-available
-      if (strlen(value) - 1 - length > 6)
-        switch (charat(value, length + 1)) {
-          // (m)ax-content, (m)in-content
-          case 109:
-            // -
-            if (charat(value, length + 4) !== 45) break
-          // (f)ill-available, (f)it-content
-          case 102:
-            return (
-              replace(
-                value,
-                /(.+:)(.+)-([^]+)/,
-                '$1' +
-                  WEBKIT +
-                  '$2-$3' +
-                  '$1' +
-                  MOZ +
-                  (charat(value, length + 3) == 108 ? '$3' : '$2-$3')
-              ) + value
-            )
-          // (s)tretch
-          case 115:
-            return ~indexof(value, 'stretch')
-              ? prefix(replace(value, 'stretch', 'fill-available'), length) +
-                  value
-              : value
-        }
-      break
-    // position: sticky
-    case 4949:
-      // (s)ticky?
-      if (charat(value, length + 1) !== 115) break
-    // display: (flex|inline-flex)
-    case 6444:
-      switch (
-        charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))
-      ) {
-        // stic(k)y
-        case 107:
-          return replace(value, ':', ':' + WEBKIT) + value
-        // (inline-)?fl(e)x
-        case 101:
-          return (
-            replace(
-              value,
-              /(.+:)([^;!]+)(;|!.+)?/,
-              '$1' +
-                WEBKIT +
-                (charat(value, 14) === 45 ? 'inline-' : '') +
-                'box$3' +
-                '$1' +
-                WEBKIT +
-                '$2$3' +
-                '$1' +
-                MS +
-                '$2box$3'
-            ) + value
-          )
-      }
-      break
-    // writing-mode
-    case 5936:
-      switch (charat(value, length + 11)) {
-        // vertical-l(r)
-        case 114:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'tb') +
-            value
-          )
-        // vertical-r(l)
-        case 108:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') +
-            value
-          )
-        // horizontal(-)tb
-        case 45:
-          return (
-            WEBKIT +
-            value +
-            MS +
-            replace(value, /[svh]\w+-[tblr]{2}/, 'lr') +
-            value
-          )
-      }
-
-      return WEBKIT + value + MS + value + value
   }
 
   return value
 }
 
-export let prefixer = (
-  element: Element,
-  index: number,
-  children: Element[],
-  callback: Middleware
-) => {
-  if (element.length > -1)
-    if (!element.return)
-      switch (element.type) {
-        case DECLARATION:
-          element.return = prefix(element.value, element.length)
-          break
-        case KEYFRAMES:
-          return serialize(
-            [
-              copy(element, {
-                value: replace(element.value, '@', '@' + WEBKIT)
-              })
-            ],
-            callback
-          )
-        case RULESET:
-          if (element.length)
-            return combine(element.props as string[], function (value) {
-              switch (match(value, /(::plac\w+|:read-\w+)/)) {
-                // :read-(only|write)
-                case ':read-only':
-                case ':read-write':
-                  return serialize(
-                    [
-                      copy(element, {
-                        props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
-                      })
-                    ],
-                    callback
-                  )
-                // :placeholder
-                case '::placeholder':
-                  return serialize(
-                    [
-                      copy(element, {
-                        props: [
-                          replace(
-                            value,
-                            /:(plac\w+)/,
-                            ':' + WEBKIT + 'input-$1'
-                          )
-                        ]
-                      }),
-                      copy(element, {
-                        props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
-                      }),
-                      copy(element, {
-                        props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
-                      })
-                    ],
-                    callback
-                  )
-              }
-
-              return ''
-            })
-      }
+export let prefixer = (element: Element) => {
+  if (element.length > -1 && !element.return && element.type === DECLARATION) {
+    element.return = prefix(element.value, element.length)
+  }
 }

From 2683a39b85b33ce40d00821c71a5bd8113cef3ad Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Mon, 13 Jan 2025 11:10:07 +1000
Subject: [PATCH 05/10] Remove moz and ms prefixes for user-select, hyphens,
 text-size-adjust

---
 packages/cache/src/prefixer.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
index aa2dfa1083..b5e6db63a7 100644
--- a/packages/cache/src/prefixer.ts
+++ b/packages/cache/src/prefixer.ts
@@ -19,12 +19,11 @@ function prefix(value: string, length: number): string {
     case 6135:
     case 4599:
     case 4855:
-      return WEBKIT + value + value
     // user-select, hyphens, text-size-adjust
     case 4246:
     case 6968:
     case 2756:
-      return WEBKIT + value + MOZ + value + MS + value + value
+      return WEBKIT + value + value
     // cursor
     case 6187:
       return (

From 24a5b10c0449c3517d25714b495ffd502d88a4f2 Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Mon, 13 Jan 2025 11:14:19 +1000
Subject: [PATCH 06/10] Remove zoom- and grab prefixing in cursor property

---
 packages/cache/src/prefixer.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
index b5e6db63a7..51f4d1afae 100644
--- a/packages/cache/src/prefixer.ts
+++ b/packages/cache/src/prefixer.ts
@@ -27,15 +27,7 @@ function prefix(value: string, length: number): string {
     // cursor
     case 6187:
       return (
-        replace(
-          replace(
-            replace(value, /(zoom-|grab)/, WEBKIT + '$1'),
-            /(image-set)/,
-            WEBKIT + '$1'
-          ),
-          value,
-          ''
-        ) + value
+        replace(replace(value, /(image-set)/, WEBKIT + '$1'), value, '') + value
       )
   }
 

From c63b3f6e39255f846206bba73d7f742e923b812e Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Mon, 13 Jan 2025 11:21:16 +1000
Subject: [PATCH 07/10] Remove unused moz and mz prefix imports

---
 packages/cache/src/prefixer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
index 51f4d1afae..309bfb695d 100644
--- a/packages/cache/src/prefixer.ts
+++ b/packages/cache/src/prefixer.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-fallthrough */
 /* eslint-disable eqeqeq */
-import { DECLARATION, Element, hash, MOZ, MS, replace, WEBKIT } from 'stylis'
+import { DECLARATION, Element, hash, replace, WEBKIT } from 'stylis'
 
 // this is a slice of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
 // this version only includes css properties that are not widely available according to https://web-platform-dx.github.io/web-features/

From 1428f474dd43bbc70e95d791b47769dadd72f010 Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Mon, 13 Jan 2025 11:22:44 +1000
Subject: [PATCH 08/10] Remove image-set prefixing in cursor (image-set will be
 widely available so soon, just prefixing image-set for cursor is weird and
 cursor is such a small progressive enhancement thing anyway that if it
 doesn't work in older browsers, it's fine)

---
 packages/cache/src/prefixer.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/cache/src/prefixer.ts b/packages/cache/src/prefixer.ts
index 309bfb695d..654af77044 100644
--- a/packages/cache/src/prefixer.ts
+++ b/packages/cache/src/prefixer.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-fallthrough */
 /* eslint-disable eqeqeq */
-import { DECLARATION, Element, hash, replace, WEBKIT } from 'stylis'
+import { DECLARATION, Element, hash, WEBKIT } from 'stylis'
 
 // this is a slice of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
 // this version only includes css properties that are not widely available according to https://web-platform-dx.github.io/web-features/
@@ -24,11 +24,6 @@ function prefix(value: string, length: number): string {
     case 6968:
     case 2756:
       return WEBKIT + value + value
-    // cursor
-    case 6187:
-      return (
-        replace(replace(value, /(image-set)/, WEBKIT + '$1'), value, '') + value
-      )
   }
 
   return value

From ea3fe6ece661b9f8fa517e6d816fc0c3e9be4167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 13 Jan 2025 08:07:00 +0100
Subject: [PATCH 09/10] update snapshots

---
 .../__tests__/__snapshots__/index.js.snap     |   7 +-
 .../css/test/__snapshots__/css.test.js.snap   |  69 -------
 .../__snapshots__/inject-global.test.js.snap  |   9 -
 .../test/__snapshots__/keyframes.test.js.snap |  23 ---
 .../no-babel/__snapshots__/index.test.js.snap |  34 ----
 .../react/__tests__/__snapshots__/css.js.snap |   6 -
 .../__tests__/__snapshots__/global.js.snap    |  16 +-
 .../__tests__/__snapshots__/keyframes.js.snap |  41 +---
 .../__tests__/__snapshots__/server.js.snap    |  16 +-
 .../extract-critical-to-chunks.test.js.snap   |  10 +-
 .../test/__snapshots__/index.test.js.snap     | 182 ------------------
 .../test/__snapshots__/inline.test.js.snap    |  77 +-------
 .../test/__snapshots__/stream.test.js.snap    |  71 +------
 .../__snapshots__/edge-cases.js.snap          |   1 -
 .../__tests__/__snapshots__/styled.js.snap    |  57 ------
 .../component-selector.test.js.snap           |  12 --
 .../__snapshots__/composition.test.js.snap    |  15 --
 .../test/__snapshots__/index.test.js.snap     |  39 ----
 18 files changed, 35 insertions(+), 650 deletions(-)

diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index 8c0879fc93..02a2c44bfc 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -2,9 +2,6 @@
 
 exports[`should accept container option 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
 }
@@ -22,7 +19,7 @@ exports[`should accept container option 1`] = `
       data-s=""
     >
       
-      .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+      .emotion-0{display:flex;color:blue;}
     </style>
   </div>
   <div>
@@ -45,7 +42,7 @@ exports[`should accept insertionPoint option 1`] = `
     data-s=""
   >
     
-    .test-insertion-point-83n355{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+    .test-insertion-point-83n355{display:flex;color:blue;}
   </style>
   
     
diff --git a/packages/css/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap
index c4b2a1a926..aeb222378c 100644
--- a/packages/css/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/__snapshots__/css.test.js.snap
@@ -25,9 +25,6 @@ exports[`css array fallback 1`] = `
 
 exports[`css array with explicit false 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -38,9 +35,6 @@ exports[`css array with explicit false 1`] = `
 
 exports[`css array with explicit true 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -51,12 +45,7 @@ exports[`css array with explicit true 1`] = `
 
 exports[`css auto px 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   font-size: 10px;
   --custom: 5;
@@ -69,9 +58,6 @@ exports[`css auto px 1`] = `
 
 exports[`css boolean as value 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -82,9 +68,6 @@ exports[`css boolean as value 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -95,9 +78,6 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -108,15 +88,9 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -164,9 +138,6 @@ exports[`css css variables 1`] = `
 
 exports[`css explicit & 1`] = `
 .emotion-0.another-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -177,9 +148,6 @@ exports[`css explicit & 1`] = `
 
 exports[`css explicit & 2`] = `
 ".css-5v9d41-cls1.another-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }"
 `;
@@ -192,9 +160,6 @@ exports[`css explicit false 1`] = `
 
 exports[`css falsy property value in object 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -225,9 +190,6 @@ exports[`css float property 1`] = `
 
 exports[`css flushes correctly 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -255,7 +217,6 @@ exports[`css handles array of objects 1`] = `
 
 exports[`css handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -277,9 +238,6 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -369,9 +327,6 @@ exports[`css nested 1`] = `
 }
 
 .emotion-0 .some-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -403,9 +358,6 @@ exports[`css nested array 1`] = `
   display: inline;
   display: inline-block;
   display: block;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   display: table;
   color: darkorchid;
@@ -447,9 +399,6 @@ exports[`css nested at rules 1`] = `
 
   @supports (display: flex) {
     .emotion-0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
       display: flex;
     }
   }
@@ -506,9 +455,6 @@ exports[`css random expression 1`] = `
 
 exports[`css random interpolation with undefined values 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -519,9 +465,6 @@ exports[`css random interpolation with undefined values 1`] = `
 
 exports[`css registered styles as nested selector value in object 1`] = `
 .emotion-0:hover {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   background-color: hotpink;
 }
@@ -549,13 +492,7 @@ exports[`css rule after media query 1`] = `
 
 exports[`css simple composition 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -570,9 +507,6 @@ exports[`css simple composition 1`] = `
 
 exports[`css weakmap 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -583,9 +517,6 @@ exports[`css weakmap 1`] = `
 
 exports[`css weakmap 2`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/css/test/__snapshots__/inject-global.test.js.snap b/packages/css/test/__snapshots__/inject-global.test.js.snap
index def7a1604e..9dda829049 100644
--- a/packages/css/test/__snapshots__/inject-global.test.js.snap
+++ b/packages/css/test/__snapshots__/inject-global.test.js.snap
@@ -21,9 +21,6 @@ exports[`injectGlobal interpolated value 1`] = `
 exports[`injectGlobal nested interpolated media query 1`] = `
 "@media (max-width: 600px) {
   body {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     display: flex;
   }
 }"
@@ -39,16 +36,10 @@ exports[`injectGlobal pseudo in @media 1`] = `
 
 exports[`injectGlobal random interpolation 1`] = `
 ".css-1002tid-cls {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
 body {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }"
 `;
diff --git a/packages/css/test/__snapshots__/keyframes.test.js.snap b/packages/css/test/__snapshots__/keyframes.test.js.snap
index 190c314456..684fc0c310 100644
--- a/packages/css/test/__snapshots__/keyframes.test.js.snap
+++ b/packages/css/test/__snapshots__/keyframes.test.js.snap
@@ -3,22 +3,15 @@
 exports[`keyframes keyframes with interpolation 1`] = `
 @keyframes animation-0 {
   from {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   to {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
@@ -32,42 +25,26 @@ exports[`keyframes keyframes with interpolation 1`] = `
 exports[`keyframes renders 1`] = `
 @keyframes animation-0 {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    -webkit-transform: translate3d(0,0,0);
-    -moz-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0,-4px,0);
-    -moz-transform: translate3d(0,-4px,0);
-    -ms-transform: translate3d(0,-4px,0);
     transform: translate3d(0,-4px,0);
   }
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 2s linear infinite;
   animation: animation-0 2s linear infinite;
 }
 
diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
index ab9d62bb38..87f32bf7d4 100644
--- a/packages/css/test/no-babel/__snapshots__/index.test.js.snap
+++ b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
@@ -18,13 +18,7 @@ exports[`css component selectors without target 1`] = `"Component selectors can
 
 exports[`css composition 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -39,9 +33,6 @@ exports[`css composition 1`] = `
 
 exports[`css composition stuff 1`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -52,9 +43,6 @@ exports[`css composition stuff 1`] = `
 
 exports[`css composition stuff 2`] = `
 .emotion-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -65,15 +53,9 @@ exports[`css composition stuff 2`] = `
 
 exports[`css composition with objects 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -114,12 +96,7 @@ exports[`css function in expression 1`] = `
 exports[`css glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -134,9 +111,6 @@ exports[`css glamorous style api & composition 1`] = `
 exports[`css handles objects 1`] = `
 .emotion-0 {
   float: left;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: blue;
   font-size: 20px;
@@ -151,9 +125,6 @@ exports[`css handles objects 1`] = `
 
 exports[`css nested array 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -183,12 +154,7 @@ exports[`css null rule 1`] = `
 exports[`css object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/css.js.snap b/packages/react/__tests__/__snapshots__/css.js.snap
index 5d97fd568a..79d98b6eb2 100644
--- a/packages/react/__tests__/__snapshots__/css.js.snap
+++ b/packages/react/__tests__/__snapshots__/css.js.snap
@@ -178,9 +178,6 @@ exports[`string as css prop throws 1`] = `
 exports[`theming with the array css prop 1`] = `
 .emotion-0 {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -201,9 +198,6 @@ exports[`theming with the css prop 1`] = `
 
 exports[`thing 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/react/__tests__/__snapshots__/global.js.snap b/packages/react/__tests__/__snapshots__/global.js.snap
index 8f4a98b806..e804794eb3 100644
--- a/packages/react/__tests__/__snapshots__/global.js.snap
+++ b/packages/react/__tests__/__snapshots__/global.js.snap
@@ -9,13 +9,6 @@ exports[`basic 1`] = `
     
     .css-animation-ocj8pk{}
   </style>
-  <style
-    data-emotion="css"
-    data-s=""
-  >
-    
-    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
-  </style>
   <style
     data-emotion="css"
     data-s=""
@@ -42,7 +35,7 @@ exports[`basic 1`] = `
     data-s=""
   >
     
-    h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
+    h1{animation:animation-ocj8pk 1s;}
   </style>
   <style
     data-emotion="css-global"
@@ -69,13 +62,6 @@ exports[`basic 3`] = `
     
     .css-animation-ocj8pk{}
   </style>
-  <style
-    data-emotion="css"
-    data-s=""
-  >
-    
-    @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
-  </style>
   <style
     data-emotion="css"
     data-s=""
diff --git a/packages/react/__tests__/__snapshots__/keyframes.js.snap b/packages/react/__tests__/__snapshots__/keyframes.js.snap
index 9e1bac3eee..0151219587 100644
--- a/packages/react/__tests__/__snapshots__/keyframes.js.snap
+++ b/packages/react/__tests__/__snapshots__/keyframes.js.snap
@@ -12,7 +12,6 @@ exports[`keyframes basic 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -25,8 +24,7 @@ exports[`keyframes basic 1`] = `
 
 exports[`keyframes basic 2`] = `
 [
-  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1mzou9w{animation:animation-1bi8wtt;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -53,7 +51,6 @@ exports[`keyframes keyframes used in css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -66,10 +63,8 @@ exports[`keyframes keyframes used in css call 1`] = `
 
 exports[`keyframes keyframes used in css call 2`] = `
 [
-  ".css-9yzsha{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-9yzsha{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
-  "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
 ]
 `;
@@ -96,7 +91,6 @@ exports[`keyframes multiple keyframes object 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s animation-1;
   animation: animation-0 1s animation-1;
 }
 
@@ -109,10 +103,8 @@ exports[`keyframes multiple keyframes object 1`] = `
 
 exports[`keyframes multiple keyframes object 2`] = `
 [
-  ".css-1jqzi3u{-webkit-animation:animation-1bi8wtt 1s animation-1ajb83a;animation:animation-1bi8wtt 1s animation-1ajb83a;}",
-  "@-webkit-keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
+  ".css-1jqzi3u{animation:animation-1bi8wtt 1s animation-1ajb83a;}",
   "@keyframes animation-1ajb83a{from{color:green;}to{color:yellow;}}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -129,7 +121,6 @@ exports[`keyframes object 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -142,8 +133,7 @@ exports[`keyframes object 1`] = `
 
 exports[`keyframes object 2`] = `
 [
-  ".css-d88cqt{-webkit-animation:animation-o4c3es 1s;animation:animation-o4c3es 1s;}",
-  "@-webkit-keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
+  ".css-d88cqt{animation:animation-o4c3es 1s;}",
   "@keyframes animation-o4c3es{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -160,9 +150,7 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -175,8 +163,7 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 
 exports[`keyframes object with animation and opaque keyframes as value 2`] = `
 [
-  ".css-g32qbw{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-g32qbw{animation:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -193,9 +180,7 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 }
 
 .emotion-0 {
-  -webkit-animation-name: animation-0;
   animation-name: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -208,8 +193,7 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 
 exports[`keyframes object with animationName and opaque keyframes as value 2`] = `
 [
-  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -226,9 +210,7 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 }
 
 .emotion-0 {
-  -webkit-animation-name: animation-0;
   animation-name: animation-0;
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
 }
 
@@ -241,8 +223,7 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 
 exports[`keyframes object with animationName and string keyframes as value 2`] = `
 [
-  ".css-wo7teo{-webkit-animation-name:animation-1bi8wtt;animation-name:animation-1bi8wtt;-webkit-animation-duration:1s;animation-duration:1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-wo7teo{animation-name:animation-1bi8wtt;animation-duration:1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -259,7 +240,6 @@ exports[`keyframes object with string keyframes 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0 1s;
   animation: animation-0 1s;
 }
 
@@ -272,8 +252,7 @@ exports[`keyframes object with string keyframes 1`] = `
 
 exports[`keyframes object with string keyframes 2`] = `
 [
-  ".css-1wh2ide{-webkit-animation:animation-1bi8wtt 1s;animation:animation-1bi8wtt 1s;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1wh2ide{animation:animation-1bi8wtt 1s;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
@@ -290,7 +269,6 @@ exports[`keyframes without css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -303,8 +281,7 @@ exports[`keyframes without css call 1`] = `
 
 exports[`keyframes without css call 2`] = `
 [
-  ".css-1mzou9w{-webkit-animation:animation-1bi8wtt;animation:animation-1bi8wtt;}",
-  "@-webkit-keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
+  ".css-1mzou9w{animation:animation-1bi8wtt;}",
   "@keyframes animation-1bi8wtt{from{color:green;}to{color:hotpink;}}",
 ]
 `;
diff --git a/packages/react/__tests__/__snapshots__/server.js.snap b/packages/react/__tests__/__snapshots__/server.js.snap
index 3e4665ee44..9a1d90824e 100644
--- a/packages/react/__tests__/__snapshots__/server.js.snap
+++ b/packages/react/__tests__/__snapshots__/server.js.snap
@@ -29,13 +29,13 @@ exports[`ssr global 1`] = `
 
 exports[`ssr global with keyframes 1`] = `
 <style data-emotion="css-global eti4v9 animation-ocj8pk">
-  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr keyframes 1`] = `
 <style data-emotion="css cijyg1 animation-1ch4i0o">
-  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}@-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  .css-cijyg1{animation:1s animation-1ch4i0o;}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -73,7 +73,7 @@ exports[`ssr only render a style once with the css prop 1`] = `
 
 exports[`ssr styled with keyframes 1`] = `
 <style data-emotion="css 1y9glrp animation-ocj8pk">
-  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  .css-1y9glrp{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <div class="css-1y9glrp">
 </div>
@@ -114,16 +114,16 @@ exports[`ssr with old api global 1`] = `
 
 exports[`ssr with old api global with keyframes 1`] = `
 <style data-emotion="css eti4v9 animation-ocj8pk">
-  h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}@-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  h1{animation:animation-ocj8pk 1s;}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 `;
 
 exports[`ssr with old api keyframes 1`] = `
 <style data-emotion="css animation-1ch4i0o">
-  @-webkit-keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}@keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
+  @keyframes animation-1ch4i0o{from{color:green;}to{color:blue;}}
 </style>
 <style data-emotion="css cijyg1">
-  .css-cijyg1{-webkit-animation:1s animation-1ch4i0o;animation:1s animation-1ch4i0o;}
+  .css-cijyg1{animation:1s animation-1ch4i0o;}
 </style>
 <div class="css-cijyg1">
 </div>
@@ -161,10 +161,10 @@ exports[`ssr with old api only render a style once with the css prop 1`] = `
 
 exports[`ssr with old api styled with keyframes 1`] = `
 <style data-emotion="css animation-ocj8pk">
-  @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}@keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
+  @keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
 </style>
 <style data-emotion="css 1y9glrp">
-  .css-1y9glrp{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
+  .css-1y9glrp{animation:animation-ocj8pk 1s;}
 </style>
 <div class="css-1y9glrp">
 </div>
diff --git a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
index f8e5385af9..183f2398a8 100644
--- a/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
+++ b/packages/server/test/__snapshots__/extract-critical-to-chunks.test.js.snap
@@ -8,7 +8,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -20,7 +20,7 @@ exports[`extractCriticalToChunks generates correct style tags using constructSty
   html{background:red;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 `;
 
@@ -50,9 +50,6 @@ exports[`extractCriticalToChunks returns static css 1`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -97,9 +94,6 @@ exports[`extractCriticalToChunks returns static css 2`] = `
     {
       "css": ".css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/server/test/__snapshots__/index.test.js.snap b/packages/server/test/__snapshots__/index.test.js.snap
index eb505a59b3..a452b243d8 100644
--- a/packages/server/test/__snapshots__/index.test.js.snap
+++ b/packages/server/test/__snapshots__/index.test.js.snap
@@ -10,94 +10,34 @@ exports[`extractCritical returns static css 1`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -109,7 +49,6 @@ exports[`extractCritical returns static css 1`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -145,94 +84,34 @@ exports[`extractCritical returns static css 2`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -266,94 +145,34 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -365,7 +184,6 @@ exports[`hydration only rules that are not in the critical css are inserted 1`]
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
diff --git a/packages/server/test/__snapshots__/inline.test.js.snap b/packages/server/test/__snapshots__/inline.test.js.snap
index 696f13913c..2314561ff9 100644
--- a/packages/server/test/__snapshots__/inline.test.js.snap
+++ b/packages/server/test/__snapshots__/inline.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -47,94 +47,34 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -146,7 +86,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1963,14 +1902,14 @@ exports[`renderStylesToString renders large recursive component 1`] = `
 
 exports[`renderStylesToString renders styles with ids 1`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1984,10 +1923,10 @@ exports[`renderStylesToString renders styles with ids 1`] = `
 
 exports[`renderStylesToString renders styles with ids 2`] = `
 <style data-emotion="css 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main">
-  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/server/test/__snapshots__/stream.test.js.snap b/packages/server/test/__snapshots__/stream.test.js.snap
index d9a169dab1..d536b65616 100644
--- a/packages/server/test/__snapshots__/stream.test.js.snap
+++ b/packages/server/test/__snapshots__/stream.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`hydration only inserts rules that are not in the critical css 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -44,94 +44,34 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
 }
 
-@-webkit-keyframes animation-i9f7qw-bounce {
-  from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
 @keyframes animation-i9f7qw-bounce {
   from, 20%, 53%, 80%, to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
   40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0);
-    -moz-transform: translate3d(0, -30px, 0);
-    -ms-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0);
-    -moz-transform: translate3d(0, -15px, 0);
-    -ms-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    -moz-transform: translate3d(0, -4px, 0);
-    -ms-transform: translate3d(0, -4px, 0);
     transform: translate3d(0, -4px, 0);
   }
 }
 
 .no-prefix {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .css-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -143,7 +83,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
 }
 
 .css-1h1w8ez-Image {
-  -webkit-animation: animation-i9f7qw-bounce;
   animation: animation-i9f7qw-bounce;
   border-radius: 50%;
   height: 50px;
@@ -1957,11 +1896,11 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="css 1h1w8ez-Image">
-    .css-1h1w8ez-Image{-webkit-animation:animation-i9f7qw-bounce;animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
+    .css-1h1w8ez-Image{animation:animation-i9f7qw-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}
   </style>
   <img size="30"
        class="css-1h1w8ez-Image"
@@ -1975,7 +1914,7 @@ exports[`renderStylesToNodeStream renders styles with ids 1`] = `
 
 exports[`renderStylesToNodeStream renders styles with ids 2`] = `
 <style data-emotion="css fgjrlg-hoverStyles-Something_Main 1uqawbr i9f7qw-bounce 1nhdffy">
-  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -30px, 0);-moz-transform:translate3d(0, -30px, 0);-ms-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform:translate3d(0, -15px, 0);-moz-transform:translate3d(0, -15px, 0);-ms-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90%{-webkit-transform:translate3d(0, -4px, 0);-moz-transform:translate3d(0, -4px, 0);-ms-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.css-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.css-fgjrlg-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
 <main class="css-fgjrlg-hoverStyles-Something_Main">
   <div>
diff --git a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
index 9ffd72ea73..7c5a7e2006 100644
--- a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
+++ b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
@@ -25,7 +25,6 @@ exports[`nested function using css and keyframes 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 7546e156c5..92ab9cea87 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -69,13 +69,7 @@ exports[`styled composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -190,12 +184,7 @@ exports[`styled function in expression 1`] = `
 exports[`styled glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -209,7 +198,6 @@ exports[`styled glamorous style api & composition 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -236,8 +224,6 @@ exports[`styled higher order component 1`] = `
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -259,18 +245,6 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -282,18 +256,6 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -316,7 +278,6 @@ exports[`styled keyframes with css call 1`] = `
 }
 
 .emotion-0 {
-  -webkit-animation: animation-0;
   animation: animation-0;
 }
 
@@ -327,9 +288,6 @@ exports[`styled keyframes with css call 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -423,12 +381,7 @@ exports[`styled object as className 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -443,7 +396,6 @@ exports[`styled object as style 1`] = `
 exports[`styled object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
-  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -453,9 +405,6 @@ exports[`styled object composition 1`] = `
 }
 
 .emotion-0:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
@@ -467,9 +416,6 @@ exports[`styled object composition 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -602,9 +548,6 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;
diff --git a/packages/styled/test/__snapshots__/component-selector.test.js.snap b/packages/styled/test/__snapshots__/component-selector.test.js.snap
index 2c3b80fd73..f3d30f601a 100644
--- a/packages/styled/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/styled/test/__snapshots__/component-selector.test.js.snap
@@ -2,9 +2,6 @@
 
 exports[`component as selector (object syntax) 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -31,9 +28,6 @@ exports[`component as selector (object syntax) 1`] = `
 
 exports[`component as selector 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -60,9 +54,6 @@ exports[`component as selector 1`] = `
 
 exports[`component as selector function interpolation (object syntax) 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -91,9 +82,6 @@ exports[`component as selector function interpolation (object syntax) 1`] = `
 
 exports[`component as selector function interpolation 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/packages/styled/test/__snapshots__/composition.test.js.snap b/packages/styled/test/__snapshots__/composition.test.js.snap
index 019c5105d5..72e283d35b 100644
--- a/packages/styled/test/__snapshots__/composition.test.js.snap
+++ b/packages/styled/test/__snapshots__/composition.test.js.snap
@@ -4,13 +4,7 @@ exports[`composing components 1`] = `
 .emotion-0 {
   color: green;
   display: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
@@ -110,12 +104,7 @@ exports[`composition with objects 1`] = `
 exports[`glamorous style api & composition 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -130,7 +119,6 @@ exports[`glamorous style api & composition 1`] = `
 exports[`object composition 1`] = `
 .emotion-0 {
   border-radius: 50%;
-  -webkit-transition: -webkit-transform 400ms ease-in-out;
   transition: transform 400ms ease-in-out;
   border: 3px solid currentColor;
   width: 96px;
@@ -140,9 +128,6 @@ exports[`object composition 1`] = `
 }
 
 .emotion-0:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap
index f988c14394..040c105d6b 100644
--- a/packages/styled/test/__snapshots__/index.test.js.snap
+++ b/packages/styled/test/__snapshots__/index.test.js.snap
@@ -95,7 +95,6 @@ exports[`styled function that function returns gets called with props 1`] = `
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .emotion-0 {
-  -webkit-text-decoration: underline;
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -130,18 +129,6 @@ exports[`styled inline function return value is a function 1`] = `
 `;
 
 exports[`styled input placeholder 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -153,18 +140,6 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
-.emotion-0::-webkit-input-placeholder {
-  background-color: green;
-}
-
-.emotion-0::-moz-placeholder {
-  background-color: green;
-}
-
-.emotion-0:-ms-input-placeholder {
-  background-color: green;
-}
-
 .emotion-0::placeholder {
   background-color: green;
 }
@@ -177,9 +152,6 @@ exports[`styled input placeholder object 1`] = `
 
 exports[`styled nested 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -223,12 +195,7 @@ exports[`styled no dynamic 1`] = `
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -243,9 +210,6 @@ exports[`styled object as style 1`] = `
 exports[`styled objects 1`] = `
 .emotion-0 {
   padding: 10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -318,9 +282,6 @@ You may have forgotten to import it."
 
 exports[`styled with higher order component that hoists statics 1`] = `
 .emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   color: hotpink;
   padding: 8px;

From e8dbb535df85297c46b42812acf6342692bbef07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 13 Jan 2025 08:08:27 +0100
Subject: [PATCH 10/10] update changeset

---
 .changeset/late-horses-join.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/late-horses-join.md b/.changeset/late-horses-join.md
index e6e9640e33..2a258e9640 100644
--- a/.changeset/late-horses-join.md
+++ b/.changeset/late-horses-join.md
@@ -5,4 +5,4 @@
 '@emotion/css': major
 ---
 
-Removed auto-prefixing from the defaults. It can still be used by creating a custom cache with a `prefixer` plugin from `stylis`.
+Removed auto-prefixing for widely available features.