diff --git a/packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap
index e3b311255..f0ecdfbb4 100644
--- a/packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap
+++ b/packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap
@@ -2,18 +2,18 @@
 
 exports[`css @supports 1`] = `
 @supports (display:grid) {
-  .glamor-0 {
+  .emotion-0 {
     display: grid;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css auto px 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,12 +25,12 @@ exports[`css auto px 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -41,17 +41,17 @@ exports[`css composition 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -59,12 +59,12 @@ exports[`css composition stuff 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 2`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -72,12 +72,12 @@ exports[`css composition stuff 2`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -90,60 +90,60 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: blue;
 }
 
-.glamor-0:after {
+.emotion-0:after {
   content: " ";
   color: red;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: green;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css computed key is only dynamic 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 10px;
   width: 20px;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css css variables 1`] = `
-.glamor-0 {
+.emotion-0 {
   --some-var: 1px;
   width: var(--some-var);
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css float property 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -151,18 +151,18 @@ exports[`css flushes correctly 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles more than 10 dynamic properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -177,12 +177,12 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
   display: -webkit-box;
   display: -webkit-flex;
@@ -195,34 +195,34 @@ exports[`css handles objects 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css nested 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: yellow;
 }
 
-.glamor-0 .some-class {
+.emotion-0 .some-class {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-0 .some-class .some-other-class {
+.emotion-0 .some-class .some-other-class {
   background-color: hotpink;
 }
 
 @media (max-width:600px) {
-  .glamor-0 .some-class {
+  .emotion-0 .some-class {
     background-color: pink;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 >
   <div
     className="some-class"
@@ -235,7 +235,7 @@ exports[`css nested 1`] = `
 `;
 
 exports[`css nested array 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -243,7 +243,7 @@ exports[`css nested array 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
@@ -281,37 +281,37 @@ exports[`css nested at rules 1`] = `
 `;
 
 exports[`css nested selector without parent declaration 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
-.glamor-1 .glamor-0 {
+.emotion-1 .emotion-0 {
   color: red;
 }
 
 <div
-  className="glamor-1"
+  className="emotion-1"
 >
   <div
-    className="glamor-0"
+    className="emotion-0"
   />
 </div>
 `;
 
 exports[`css null rule 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css random expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: blue;
     width: 96px;
     height: 96px;
@@ -320,12 +320,12 @@ exports[`css random expression 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css random interpolation with undefined values 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -333,6 +333,6 @@ exports[`css random interpolation with undefined values 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
diff --git a/packages/babel-plugin-emotion/test/macro/__snapshots__/keyframes.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/keyframes.test.js.snap
index 0d831cbe5..c715992aa 100644
--- a/packages/babel-plugin-emotion/test/macro/__snapshots__/keyframes.test.js.snap
+++ b/packages/babel-plugin-emotion/test/macro/__snapshots__/keyframes.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`keyframes - macro keyframes with interpolation 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-animation: animation-1q8eu9e 2s linear infinite;
   animation: animation-1q8eu9e 2s linear infinite;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -49,13 +49,13 @@ exports[`keyframes - macro keyframes with interpolation 2`] = `
 `;
 
 exports[`keyframes - macro renders 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-animation: animation-16qlhaj 2s linear infinite;
   animation: animation-16qlhaj 2s linear infinite;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
diff --git a/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap
index 8de47d8e6..57fa81391 100644
--- a/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap
+++ b/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap
@@ -1,50 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`styled basic render 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
   font-size: 20px;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: blue;
   }
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled basic render with object as style 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled call expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled change theme 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -65,7 +65,7 @@ exports[`styled change theme 1`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -75,7 +75,7 @@ exports[`styled change theme 1`] = `
 `;
 
 exports[`styled change theme 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: pink;
 }
 
@@ -96,7 +96,7 @@ exports[`styled change theme 2`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -125,7 +125,7 @@ exports[`styled change theme 3`] = `
 `;
 
 exports[`styled composing components 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
   display: none;
   display: -webkit-box;
@@ -139,27 +139,27 @@ exports[`styled composing components 1`] = `
 }
 
 <button
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </button>
 `;
 
 exports[`styled composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   font-size: 13.333333333333334px;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
   color: red;
   color: blue;
@@ -168,7 +168,7 @@ exports[`styled composition 2`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -176,64 +176,64 @@ exports[`styled composition 2`] = `
 `;
 
 exports[`styled composition based on props 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition based on props 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition of nested pseudo selectors 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 2rem;
   padding: 16px;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: blue;
 }
 
-.glamor-0:hover:active {
+.emotion-0:hover:active {
   color: red;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: pink;
 }
 
-.glamor-0:hover:active {
+.emotion-0:hover:active {
   color: purple;
 }
 
-.glamor-0:hover.some-class {
+.emotion-0:hover.some-class {
   color: yellow;
 }
 
 <button
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   Should be purple
 </button>
 `;
 
 exports[`styled composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: #333;
   font-size: 1.333em;
   height: 64px;
@@ -242,13 +242,13 @@ exports[`styled composition with objects 1`] = `
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:1.5/1), only screen and (min-resolution:144dpi), only screen and (min-resolution:1.5dppx) {
-  .glamor-0 {
+  .emotion-0 {
     font-size: 1.4323121856191332em;
   }
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -256,13 +256,13 @@ exports[`styled composition with objects 1`] = `
 `;
 
 exports[`styled function in expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   font-size: 40px;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -270,19 +270,19 @@ exports[`styled function in expression 1`] = `
 `;
 
 exports[`styled function that function returns gets called with props 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   color="hotpink"
 />
 `;
 
 exports[`styled glamorous style api & composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -294,7 +294,7 @@ exports[`styled glamorous style api & composition 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   fontSize={20}
 >
   hello world
@@ -302,7 +302,7 @@ exports[`styled glamorous style api & composition 1`] = `
 `;
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -318,14 +318,14 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled higher order component 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
@@ -335,124 +335,124 @@ exports[`styled higher order component 1`] = `
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled inline function return value is a function 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled innerRef 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 12px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled input placeholder 1`] = `
-.glamor-0::-webkit-input-placeholder {
+.emotion-0::-webkit-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::-moz-placeholder {
+.emotion-0::-moz-placeholder {
   background-color: green;
 }
 
-.glamor-0:-ms-input-placeholder {
+.emotion-0:-ms-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::placeholder {
+.emotion-0::placeholder {
   background-color: green;
 }
 
 <input
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </input>
 `;
 
 exports[`styled input placeholder object 1`] = `
-.glamor-0::-webkit-input-placeholder {
+.emotion-0::-webkit-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::-moz-placeholder {
+.emotion-0::-moz-placeholder {
   background-color: green;
 }
 
-.glamor-0:-ms-input-placeholder {
+.emotion-0:-ms-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::placeholder {
+.emotion-0::placeholder {
   background-color: green;
 }
 
 <input
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </input>
 `;
 
 exports[`styled name with class component 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
 }
 
 <Styled(SomeComponent)>
   <SomeComponent
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     <div
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     />
   </SomeComponent>
 </Styled(SomeComponent)>
 `;
 
 exports[`styled nested 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
-.glamor-2 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-2 div {
+.emotion-2 div {
   color: green;
 }
 
-.glamor-2 div span {
+.emotion-2 div span {
   color: red;
 }
 
 <div
-  className="glamor-2 glamor-3"
+  className="emotion-2 emotion-3"
 >
   hello 
   <h1
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     This will be green
   </h1>
@@ -461,19 +461,19 @@ exports[`styled nested 1`] = `
 `;
 
 exports[`styled no dynamic 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled no prop filtering on non string tags 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -481,7 +481,7 @@ exports[`styled no prop filtering on non string tags 1`] = `
   a={true}
   aria-label="some label"
   b={true}
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   cool={true}
   data-wow="value"
   filtering={true}
@@ -495,7 +495,7 @@ exports[`styled no prop filtering on non string tags 1`] = `
 `;
 
 exports[`styled object as style 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -507,7 +507,7 @@ exports[`styled object as style 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   fontSize={20}
 >
   hello world
@@ -515,7 +515,7 @@ exports[`styled object as style 1`] = `
 `;
 
 exports[`styled object composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   border-radius: 50%;
   -webkit-transition: -webkit-transform 400ms ease-in-out;
   -webkit-transition: transform 400ms ease-in-out;
@@ -527,19 +527,19 @@ exports[`styled object composition 1`] = `
   color: blue;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
 <img
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   padding: 10px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -548,7 +548,7 @@ exports[`styled objects 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   display="flex"
 >
   hello world
@@ -556,25 +556,25 @@ exports[`styled objects 1`] = `
 `;
 
 exports[`styled objects with spread properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <figure
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </figure>
 `;
 
 exports[`styled prop filtering 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <a
   aria-label="some label"
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   data-wow="value"
   href="link"
   is={true}
@@ -584,14 +584,14 @@ exports[`styled prop filtering 1`] = `
 `;
 
 exports[`styled prop filtering on composed styled components that are string tags 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: hotpink;
   color: green;
 }
 
 <a
   aria-label="some label"
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   data-wow="value"
   href="link"
   is={true}
@@ -630,19 +630,19 @@ exports[`styled random expressions 1`] = `
 `;
 
 exports[`styled random expressions undefined return 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled random object expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: hotpink;
   font-size: 1rem;
   margin-top: 0;
@@ -653,36 +653,36 @@ exports[`styled random object expression 1`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled theme prop exists without ThemeProvider 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled theme prop exists without ThemeProvider with a theme prop on the component 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled themes 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: #ffd43b;
   color: blue;
   height: 64px;
@@ -692,7 +692,7 @@ exports[`styled themes 1`] = `
 }
 
 <span
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </span>
@@ -716,7 +716,7 @@ exports[`styled theming 1`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -743,7 +743,7 @@ exports[`styled theming 2`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -777,7 +777,7 @@ You may have forgotten to import it."
 `;
 
 exports[`styled with higher order component that hoists statics 1`] = `
-.glamor-1 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -787,26 +787,26 @@ exports[`styled with higher order component that hoists statics 1`] = `
 }
 
 <div
-  className="glamor-0 glamor-1 glamor-2"
+  className="emotion-0 emotion-1 emotion-2"
 />
 `;
 
 exports[`styled withComponent will replace tags but keep styling classes 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <article>
   <Styled(h1)>
     <h1
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     >
       My Title
     </h1>
   </Styled(h1)>
   <Styled(h2)>
     <h2
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     >
       My Subtitle
     </h2>
@@ -815,18 +815,18 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 `;
 
 exports[`styled withComponent with function interpolation 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
-.glamor-2 {
+.emotion-2 {
   color: hotpink;
 }
 
 <article>
   <Styled(h1)>
     <h1
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     >
       My Title
     </h1>
@@ -835,7 +835,7 @@ exports[`styled withComponent with function interpolation 1`] = `
     color="hotpink"
   >
     <h2
-      className="glamor-2 glamor-1"
+      className="emotion-2 emotion-1"
       color="hotpink"
     >
       My Subtitle
diff --git a/packages/create-emotion/test/__snapshots__/css.test.js.snap b/packages/create-emotion/test/__snapshots__/css.test.js.snap
index e4e2758ff..f72e76cf3 100644
--- a/packages/create-emotion/test/__snapshots__/css.test.js.snap
+++ b/packages/create-emotion/test/__snapshots__/css.test.js.snap
@@ -2,38 +2,38 @@
 
 exports[`css @supports 1`] = `
 @supports (display:grid) {
-  .glamor-0 {
+  .emotion-0 {
     display: grid;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css array with explicit false 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css array with explicit true 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css auto px 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -42,22 +42,22 @@ exports[`css auto px 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css boolean as value 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -65,12 +65,12 @@ exports[`css composition stuff 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 2`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -78,12 +78,12 @@ exports[`css composition stuff 2`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
   width: 30px;
   height: calc(40vw - 50px);
@@ -93,55 +93,55 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: blue;
 }
 
-.glamor-0:after {
+.emotion-0:after {
   content: " ";
   color: red;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: green;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css computed key is only dynamic 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 10px;
   width: 20px;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css css variables 1`] = `
-.glamor-0 {
+.emotion-0 {
   --some-var: 1px;
   width: var(--some-var);
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css explicit & 1`] = `
-.glamor-0.another-class {
+.emotion-0.another-class {
   display: flex;
 }
 
 <div
-  className="glamor-0 another-class"
+  className="emotion-0 another-class"
 />
 `;
 
@@ -153,69 +153,69 @@ exports[`css explicit & 2`] = `
 
 exports[`css explicit false 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css falsy property value in object 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css falsy value in nested selector on object 1`] = `
-.glamor-0:hover {
+.emotion-0:hover {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css float property 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: right;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles array of objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   height: 50px;
   width: 20px;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles more than 10 dynamic properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   text-decoration: underline;
   border-left: solid blue 54px;
   background: white;
@@ -230,12 +230,12 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: right;
   display: flex;
   color: blue;
@@ -245,17 +245,17 @@ exports[`css handles objects 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css manually use label property 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
@@ -281,45 +281,45 @@ exports[`css media query specificity 1`] = `
 `;
 
 exports[`css media query specificity 2`] = `
-.glamor-0 {
+.emotion-0 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     width: 96px;
     height: 96px;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css nested 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: yellow;
 }
 
-.glamor-0 .some-class {
+.emotion-0 .some-class {
   display: flex;
 }
 
-.glamor-0 .some-class .some-other-class {
+.emotion-0 .some-class .some-other-class {
   background-color: hotpink;
 }
 
 @media (max-width:600px) {
-  .glamor-0 .some-class {
+  .emotion-0 .some-class {
     background-color: pink;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 >
   <div
     className="some-class"
@@ -332,7 +332,7 @@ exports[`css nested 1`] = `
 `;
 
 exports[`css nested array 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: inline;
   display: inline-block;
   display: block;
@@ -342,59 +342,59 @@ exports[`css nested array 1`] = `
   font-size: 16px;
 }
 
-.glamor-0:after {
+.emotion-0:after {
   background-color: aquamarine;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css nested selector without parent declaration 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
-.glamor-1 .glamor-0 {
+.emotion-1 .emotion-0 {
   color: red;
 }
 
 <div
-  className="glamor-1"
+  className="emotion-1"
 >
   <div
-    className="glamor-0"
+    className="emotion-0"
   />
 </div>
 `;
 
 exports[`css null rule 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css null value 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css null value 2`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css random expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: blue;
     width: 96px;
     height: 96px;
@@ -403,12 +403,12 @@ exports[`css random expression 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css random interpolation with undefined values 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -416,33 +416,33 @@ exports[`css random interpolation with undefined values 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css registered styles as nested selector value in object 1`] = `
-.glamor-0:hover {
+.emotion-0:hover {
   display: flex;
   background-color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css return function in interpolation 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css simple composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -450,31 +450,31 @@ exports[`css simple composition 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css weakmap 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css weakmap 2`] = `
-.glamor-0 {
+.emotion-0 {
   display: flex;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
diff --git a/packages/create-emotion/test/__snapshots__/styled.test.js.snap b/packages/create-emotion/test/__snapshots__/styled.test.js.snap
index cf31c0881..6b6506986 100644
--- a/packages/create-emotion/test/__snapshots__/styled.test.js.snap
+++ b/packages/create-emotion/test/__snapshots__/styled.test.js.snap
@@ -1,50 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`styled basic render 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
   font-size: 20px;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: blue;
   }
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled basic render with object as style 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled call expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </div>
 `;
 
 exports[`styled change theme 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -65,7 +65,7 @@ exports[`styled change theme 1`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -75,7 +75,7 @@ exports[`styled change theme 1`] = `
 `;
 
 exports[`styled change theme 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: pink;
 }
 
@@ -96,7 +96,7 @@ exports[`styled change theme 2`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -125,7 +125,7 @@ exports[`styled change theme 3`] = `
 `;
 
 exports[`styled composing components 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
   display: none;
   display: flex;
@@ -136,27 +136,27 @@ exports[`styled composing components 1`] = `
 }
 
 <button
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </button>
 `;
 
 exports[`styled composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   font-size: 13.333333333333334px;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
   color: red;
   color: blue;
@@ -165,7 +165,7 @@ exports[`styled composition 2`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -173,64 +173,64 @@ exports[`styled composition 2`] = `
 `;
 
 exports[`styled composition based on props 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition based on props 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition of nested pseudo selectors 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 2rem;
   padding: 16px;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: blue;
 }
 
-.glamor-0:hover:active {
+.emotion-0:hover:active {
   color: red;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: pink;
 }
 
-.glamor-0:hover:active {
+.emotion-0:hover:active {
   color: purple;
 }
 
-.glamor-0:hover.some-class {
+.emotion-0:hover.some-class {
   color: yellow;
 }
 
 <button
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   Should be purple
 </button>
 `;
 
 exports[`styled composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: #333;
   font-size: 1.333em;
   height: 64px;
@@ -239,13 +239,13 @@ exports[`styled composition with objects 1`] = `
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:1.5/1), only screen and (min-resolution:144dpi), only screen and (min-resolution:1.5dppx) {
-  .glamor-0 {
+  .emotion-0 {
     font-size: 1.4323121856191332em;
   }
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -253,13 +253,13 @@ exports[`styled composition with objects 1`] = `
 `;
 
 exports[`styled function in expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   font-size: 40px;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -267,19 +267,19 @@ exports[`styled function in expression 1`] = `
 `;
 
 exports[`styled function that function returns gets called with props 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   color="hotpink"
 />
 `;
 
 exports[`styled glamorous style api & composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -288,7 +288,7 @@ exports[`styled glamorous style api & composition 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   fontSize={20}
 >
   hello world
@@ -296,7 +296,7 @@ exports[`styled glamorous style api & composition 1`] = `
 `;
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   text-decoration: underline;
   border-left: solid blue 54px;
   background: white;
@@ -312,14 +312,14 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled higher order component 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
@@ -329,121 +329,121 @@ exports[`styled higher order component 1`] = `
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled inline function return value is a function 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled innerRef 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 12px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled input placeholder 1`] = `
-.glamor-0::-webkit-input-placeholder {
+.emotion-0::-webkit-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::-moz-placeholder {
+.emotion-0::-moz-placeholder {
   background-color: green;
 }
 
-.glamor-0:-ms-input-placeholder {
+.emotion-0:-ms-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::placeholder {
+.emotion-0::placeholder {
   background-color: green;
 }
 
 <input
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </input>
 `;
 
 exports[`styled input placeholder object 1`] = `
-.glamor-0::-webkit-input-placeholder {
+.emotion-0::-webkit-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::-moz-placeholder {
+.emotion-0::-moz-placeholder {
   background-color: green;
 }
 
-.glamor-0:-ms-input-placeholder {
+.emotion-0:-ms-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::placeholder {
+.emotion-0::placeholder {
   background-color: green;
 }
 
 <input
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </input>
 `;
 
 exports[`styled name with class component 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
 }
 
 <Styled(SomeComponent)>
   <SomeComponent
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     <div
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     />
   </SomeComponent>
 </Styled(SomeComponent)>
 `;
 
 exports[`styled nested 1`] = `
-.glamor-2 {
+.emotion-2 {
   display: flex;
 }
 
-.glamor-2 div {
+.emotion-2 div {
   color: green;
 }
 
-.glamor-2 div span {
+.emotion-2 div span {
   color: red;
 }
 
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-2 glamor-3"
+  className="emotion-2 emotion-3"
 >
   hello 
   <h1
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     This will be green
   </h1>
@@ -452,19 +452,19 @@ exports[`styled nested 1`] = `
 `;
 
 exports[`styled no dynamic 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: right;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled no prop filtering on non string tags 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -472,7 +472,7 @@ exports[`styled no prop filtering on non string tags 1`] = `
   a={true}
   aria-label="some label"
   b={true}
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   cool={true}
   data-wow="value"
   filtering={true}
@@ -486,7 +486,7 @@ exports[`styled no prop filtering on non string tags 1`] = `
 `;
 
 exports[`styled no prop filtering on string tags started with upper case 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -494,7 +494,7 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
   a={true}
   aria-label="some label"
   b={true}
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   cool={true}
   data-wow="value"
   filtering={true}
@@ -508,7 +508,7 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
 `;
 
 exports[`styled object as style 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -517,7 +517,7 @@ exports[`styled object as style 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   fontSize={20}
 >
   hello world
@@ -525,7 +525,7 @@ exports[`styled object as style 1`] = `
 `;
 
 exports[`styled object composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   border-radius: 50%;
   -webkit-transition: -webkit-transform 400ms ease-in-out;
   -webkit-transition: transform 400ms ease-in-out;
@@ -537,25 +537,25 @@ exports[`styled object composition 1`] = `
   color: blue;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
 <img
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   padding: 10px;
   display: flex;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   display="flex"
 >
   hello world
@@ -563,25 +563,25 @@ exports[`styled objects 1`] = `
 `;
 
 exports[`styled objects with spread properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <figure
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </figure>
 `;
 
 exports[`styled prop filtering 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <a
   aria-label="some label"
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   data-wow="value"
   href="link"
   is={true}
@@ -591,14 +591,14 @@ exports[`styled prop filtering 1`] = `
 `;
 
 exports[`styled prop filtering on composed styled components that are string tags 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: hotpink;
   color: green;
 }
 
 <a
   aria-label="some label"
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   data-wow="value"
   href="link"
   is={true}
@@ -608,19 +608,19 @@ exports[`styled prop filtering on composed styled components that are string tag
 `;
 
 exports[`styled random expressions undefined return 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled random object expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: hotpink;
   font-size: 1rem;
   margin-top: 0;
@@ -631,36 +631,36 @@ exports[`styled random object expression 1`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled theme prop exists without ThemeProvider 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled theme prop exists without ThemeProvider with a theme prop on the component 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled themes 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: #ffd43b;
   color: blue;
   height: 64px;
@@ -670,7 +670,7 @@ exports[`styled themes 1`] = `
 }
 
 <span
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </span>
@@ -694,7 +694,7 @@ exports[`styled theming 1`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -721,7 +721,7 @@ exports[`styled theming 2`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -755,14 +755,14 @@ You may have forgotten to import it."
 `;
 
 exports[`styled with higher order component that hoists statics 1`] = `
-.glamor-1 {
+.emotion-1 {
   display: flex;
   color: hotpink;
   padding: 8px;
 }
 
 <div
-  className="glamor-0 glamor-1 glamor-2"
+  className="emotion-0 emotion-1 emotion-2"
 />
 `;
 
@@ -773,21 +773,21 @@ exports[`styled withComponent creates a new, unique stable class per invocation
 exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"e1x6erbc56"`;
 
 exports[`styled withComponent will replace tags but keep styling classes 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <article>
   <Styled(h1)>
     <h1
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     >
       My Title
     </h1>
   </Styled(h1)>
   <Styled(h2)>
     <h2
-      className="glamor-0 glamor-3"
+      className="emotion-0 emotion-3"
     >
       My Subtitle
     </h2>
@@ -796,18 +796,18 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 `;
 
 exports[`styled withComponent with function interpolation 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
-.glamor-2 {
+.emotion-2 {
   color: hotpink;
 }
 
 <article>
   <Styled(h1)>
     <h1
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     >
       My Title
     </h1>
@@ -816,7 +816,7 @@ exports[`styled withComponent with function interpolation 1`] = `
     color="hotpink"
   >
     <h2
-      className="glamor-2 glamor-3"
+      className="emotion-2 emotion-3"
       color="hotpink"
     >
       My Subtitle
diff --git a/packages/emotion-theming/test/__snapshots__/index.test.js.snap b/packages/emotion-theming/test/__snapshots__/index.test.js.snap
index e348e87ee..ce59146c1 100644
--- a/packages/emotion-theming/test/__snapshots__/index.test.js.snap
+++ b/packages/emotion-theming/test/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`emotion integration test 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: red;
   background-color: green;
   border: 1px solid blue;
@@ -17,7 +17,7 @@ exports[`emotion integration test 1`] = `
 >
   <Styled(div)>
     <div
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     />
   </Styled(div)>
 </ThemeProvider>
diff --git a/packages/emotion/test/__snapshots__/component-selector.test.js.snap b/packages/emotion/test/__snapshots__/component-selector.test.js.snap
index 2d6aeea7d..c5015c3a0 100644
--- a/packages/emotion/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/emotion/test/__snapshots__/component-selector.test.js.snap
@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`component selector should be converted to use the emotion target className 1`] = `
-.glamor-2 .glamor-1 {
+.emotion-2 .emotion-1 {
   color: red;
 }
 
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
 <div
-  className="glamor-2"
+  className="emotion-2"
 >
   <div
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   />
 </div>
 `;
diff --git a/packages/emotion/test/__snapshots__/css-prop.test.js.snap b/packages/emotion/test/__snapshots__/css-prop.test.js.snap
index 337ea8b9a..0c78d69af 100644
--- a/packages/emotion/test/__snapshots__/css-prop.test.js.snap
+++ b/packages/emotion/test/__snapshots__/css-prop.test.js.snap
@@ -1,20 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`css prop react basic 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: red;
   font-size: 1px;
 }
 
 <p
-  className="glamor-0"
+  className="emotion-0"
 >
   hello world
 </p>
 `;
 
 exports[`css prop react kitchen sink 1`] = `
-.glamor-4 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -34,52 +34,52 @@ exports[`css prop react kitchen sink 1`] = `
   align-items: center;
 }
 
-.glamor-0 {
+.emotion-0 {
   font-size: 6;
   color: red;
 }
 
-.glamor-1 {
+.emotion-1 {
   color: blue;
 }
 
-.glamor-2 {
+.emotion-2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.glamor-3 {
+.emotion-3 {
   color: red;
   border-radius: 5;
 }
 
-.glamor-3:hover {
+.emotion-3:hover {
   font-weight: bold;
   color: gray;
 }
 
 <div
-  className="glamor-4 css__legacy-stuff"
+  className="emotion-4 css__legacy-stuff"
 >
   <h1
-    className="glamor-0"
+    className="emotion-0"
   >
     BOOM
   </h1>
   <p
-    className="glamor-1 test_class1"
+    className="emotion-1 test_class1"
   >
     Hello
   </p>
   <p
-    className="glamor-2 test_class1 test___class45"
+    className="emotion-2 test_class1 test___class45"
   >
     World
   </p>
   <p
-    className="glamor-3"
+    className="emotion-3"
   >
     hello world
   </p>
@@ -87,30 +87,30 @@ exports[`css prop react kitchen sink 1`] = `
 `;
 
 exports[`css prop react merging regular classes 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: block;
 }
 
 <div
-  className="glamor-0 some-class"
+  className="emotion-0 some-class"
 />
 `;
 
 exports[`css prop react objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: red;
   font-size: 1px;
 }
 
 <p
-  className="glamor-0"
+  className="emotion-0"
 >
   hello world
 </p>
 `;
 
 exports[`css prop react specificity with composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: block;
   display: -webkit-box;
   display: -webkit-flex;
@@ -119,19 +119,19 @@ exports[`css prop react specificity with composition 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css prop react string expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: red;
   background: blue;
   font-size: 48px;
 }
 
 <p
-  className="glamor-0"
+  className="emotion-0"
 >
   hello world
 </p>
diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap
index 07c6f5167..a767c477f 100644
--- a/packages/emotion/test/__snapshots__/css.test.js.snap
+++ b/packages/emotion/test/__snapshots__/css.test.js.snap
@@ -2,18 +2,18 @@
 
 exports[`css @supports 1`] = `
 @supports (display:grid) {
-  .glamor-0 {
+  .emotion-0 {
     display: grid;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css array with explicit false 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21,12 +21,12 @@ exports[`css array with explicit false 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css array with explicit true 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -34,12 +34,12 @@ exports[`css array with explicit true 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css auto px 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -52,12 +52,12 @@ exports[`css auto px 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css boolean as value 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -65,12 +65,12 @@ exports[`css boolean as value 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -78,12 +78,12 @@ exports[`css composition stuff 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 2`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -91,12 +91,12 @@ exports[`css composition stuff 2`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -109,50 +109,50 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: blue;
 }
 
-.glamor-0:after {
+.emotion-0:after {
   content: " ";
   color: red;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: green;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css computed key is only dynamic 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 10px;
   width: 20px;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css css variables 1`] = `
-.glamor-0 {
+.emotion-0 {
   --some-var: 1px;
   width: var(--some-var);
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css explicit & 1`] = `
-.glamor-0.another-class {
+.emotion-0.another-class {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -160,7 +160,7 @@ exports[`css explicit & 1`] = `
 }
 
 <div
-  className="glamor-0 another-class"
+  className="emotion-0 another-class"
 />
 `;
 
@@ -175,12 +175,12 @@ exports[`css explicit & 2`] = `
 
 exports[`css explicit false 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css falsy property value in object 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -188,32 +188,32 @@ exports[`css falsy property value in object 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css falsy value in nested selector on object 1`] = `
-.glamor-0:hover {
+.emotion-0:hover {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css float property 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -221,29 +221,29 @@ exports[`css flushes correctly 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles array of objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   height: 50px;
   width: 20px;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles more than 10 dynamic properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -258,12 +258,12 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css handles objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
   display: -webkit-box;
   display: -webkit-flex;
@@ -276,17 +276,17 @@ exports[`css handles objects 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css manually use label property 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
@@ -312,69 +312,69 @@ exports[`css media query specificity 1`] = `
 `;
 
 exports[`css media query specificity 2`] = `
-.glamor-0 {
+.emotion-0 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     width: 96px;
     height: 96px;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css multiline declaration 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: grid;
   grid: 'AppBar' auto 'Main' 1fr / 1fr;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css multiline selector 1`] = `
-.glamor-0 .my-class:hover .its-child {
+.emotion-0 .my-class:hover .its-child {
   background: pink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css nested 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: yellow;
 }
 
-.glamor-0 .some-class {
+.emotion-0 .some-class {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-0 .some-class .some-other-class {
+.emotion-0 .some-class .some-other-class {
   background-color: hotpink;
 }
 
 @media (max-width:600px) {
-  .glamor-0 .some-class {
+  .emotion-0 .some-class {
     background-color: pink;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 >
   <div
     className="some-class"
@@ -387,7 +387,7 @@ exports[`css nested 1`] = `
 `;
 
 exports[`css nested array 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: inline;
   display: inline-block;
   display: block;
@@ -400,12 +400,12 @@ exports[`css nested array 1`] = `
   font-size: 16px;
 }
 
-.glamor-0:after {
+.emotion-0:after {
   background-color: aquamarine;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
@@ -442,49 +442,49 @@ exports[`css nested at rules 1`] = `
 `;
 
 exports[`css nested selector without parent declaration 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
-.glamor-1 .glamor-0 {
+.emotion-1 .emotion-0 {
   color: red;
 }
 
 <div
-  className="glamor-1"
+  className="emotion-1"
 >
   <div
-    className="glamor-0"
+    className="emotion-0"
   />
 </div>
 `;
 
 exports[`css null rule 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css null value 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css null value 2`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css random expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: blue;
     width: 96px;
     height: 96px;
@@ -493,12 +493,12 @@ exports[`css random expression 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css random interpolation with undefined values 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -506,12 +506,12 @@ exports[`css random interpolation with undefined values 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css registered styles as nested selector value in object 1`] = `
-.glamor-0:hover {
+.emotion-0:hover {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -520,38 +520,38 @@ exports[`css registered styles as nested selector value in object 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css return function in interpolation 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css rule after media query 1`] = `
 @media (min-width:600px) {
-  .glamor-0 {
+  .emotion-0 {
     color: green;
   }
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css simple composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -562,17 +562,17 @@ exports[`css simple composition 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css weakmap 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -580,12 +580,12 @@ exports[`css weakmap 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css weakmap 2`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -593,6 +593,6 @@ exports[`css weakmap 2`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
diff --git a/packages/emotion/test/__snapshots__/cx.test.js.snap b/packages/emotion/test/__snapshots__/cx.test.js.snap
index fa111933d..60b3fd86a 100644
--- a/packages/emotion/test/__snapshots__/cx.test.js.snap
+++ b/packages/emotion/test/__snapshots__/cx.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`cx all types 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
   font-size: 20px;
@@ -11,12 +11,12 @@ exports[`cx all types 1`] = `
 }
 
 <div
-  className="modal profile glamor-0"
+  className="modal profile emotion-0"
 />
 `;
 
 exports[`cx fun fun functions 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
   font-size: 20px;
@@ -26,23 +26,23 @@ exports[`cx fun fun functions 1`] = `
 }
 
 <div
-  className="modal profile glamor-0"
+  className="modal profile emotion-0"
 />
 `;
 
 exports[`cx merge 2 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
 }
 
 <div
-  className="glamor-0 modal"
+  className="emotion-0 modal"
 />
 `;
 
 exports[`cx merge 3 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
   font-size: 20px;
@@ -50,12 +50,12 @@ exports[`cx merge 3 1`] = `
 }
 
 <div
-  className="modal glamor-0"
+  className="modal emotion-0"
 />
 `;
 
 exports[`cx merge 4 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
   font-size: 20px;
@@ -63,6 +63,6 @@ exports[`cx merge 4 1`] = `
 }
 
 <div
-  className="modal profile glamor-0"
+  className="modal profile emotion-0"
 />
 `;
diff --git a/packages/emotion/test/__snapshots__/keyframes.test.js.snap b/packages/emotion/test/__snapshots__/keyframes.test.js.snap
index 7544856b1..3cc2c473c 100644
--- a/packages/emotion/test/__snapshots__/keyframes.test.js.snap
+++ b/packages/emotion/test/__snapshots__/keyframes.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`keyframes keyframes with interpolation 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-animation: animation-1q8eu9e 2s linear infinite;
   animation: animation-1q8eu9e 2s linear infinite;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -49,13 +49,13 @@ exports[`keyframes keyframes with interpolation 2`] = `
 `;
 
 exports[`keyframes renders 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-animation: animation-16qlhaj 2s linear infinite;
   animation: animation-16qlhaj 2s linear infinite;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
diff --git a/packages/emotion/test/__snapshots__/label-pattern.test.js.snap b/packages/emotion/test/__snapshots__/label-pattern.test.js.snap
index ee4fe87e5..f5281e919 100644
--- a/packages/emotion/test/__snapshots__/label-pattern.test.js.snap
+++ b/packages/emotion/test/__snapshots__/label-pattern.test.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`label pattern input + label styled 1`] = `
-.glamor-0 + label::after {
+.emotion-0 + label::after {
   color: pink;
   background: orange;
 }
 
 <div>
   <input
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   />
   <label>
     Label
diff --git a/packages/emotion/test/auto-label/__snapshots__/auto-label.test.js.snap b/packages/emotion/test/auto-label/__snapshots__/auto-label.test.js.snap
index e50cb6bba..8a644a310 100644
--- a/packages/emotion/test/auto-label/__snapshots__/auto-label.test.js.snap
+++ b/packages/emotion/test/auto-label/__snapshots__/auto-label.test.js.snap
@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`meta css generated class name should have the correct id 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
-.glamor-1 .glamor-0 {
+.emotion-1 .emotion-0 {
   color: red;
 }
 
 <div
-  className="glamor-1"
+  className="emotion-1"
 >
   <div
-    className="glamor-0"
+    className="emotion-0"
   />
 </div>
 `;
@@ -29,7 +29,7 @@ exports[`meta css generated class name should have the correct id 2`] = `
 `;
 
 exports[`meta css prop correctly adds the id 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,38 +37,38 @@ exports[`meta css prop correctly adds the id 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 >
   Hello
 </div>
 `;
 
 exports[`meta css prop correctly adds the id 2`] = `
-.glamor-0 {
+.emotion-0 {
   display: grid;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 >
   Hello
 </div>
 `;
 
 exports[`meta css prop correctly adds the id 3`] = `
-.glamor-0 {
+.emotion-0 {
   display: grid;
 }
 
-.glamor-1 {
+.emotion-1 {
   display: block;
 }
 
 <div
-  className="glamor-1"
+  className="emotion-1"
 >
   <div
-    className="glamor-0"
+    className="emotion-0"
   >
     Hello
   </div>
@@ -93,12 +93,12 @@ exports[`meta css prop correctly adds the id 4`] = `
 `;
 
 exports[`meta manually use label property 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
@@ -109,14 +109,14 @@ exports[`meta manually use label property 2`] = `
 `;
 
 exports[`meta multiple classes with the same styles 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-1 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -125,10 +125,10 @@ exports[`meta multiple classes with the same styles 1`] = `
 
 <div>
   <div
-    className="glamor-0"
+    className="emotion-0"
   />
   <div
-    className="glamor-1"
+    className="emotion-1"
   />
 </div>
 `;
diff --git a/packages/emotion/test/extract/__snapshots__/extract.test.js.snap b/packages/emotion/test/extract/__snapshots__/extract.test.js.snap
index 4ef54f45a..218c9e435 100644
--- a/packages/emotion/test/extract/__snapshots__/extract.test.js.snap
+++ b/packages/emotion/test/extract/__snapshots__/extract.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`styled basic render nested 1`] = `
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -10,7 +10,7 @@ exports[`styled basic render nested 1`] = `
 
 exports[`styled className prop on styled 1`] = `
 <h1
-  className="some-class glamor-0 glamor-1"
+  className="some-class emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -18,7 +18,7 @@ exports[`styled className prop on styled 1`] = `
 
 exports[`styled no dynamic 1`] = `
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
diff --git a/packages/emotion/test/no-babel/__snapshots__/index.test.js.snap b/packages/emotion/test/no-babel/__snapshots__/index.test.js.snap
index e6a6ff0cd..b6b429ff7 100644
--- a/packages/emotion/test/no-babel/__snapshots__/index.test.js.snap
+++ b/packages/emotion/test/no-babel/__snapshots__/index.test.js.snap
@@ -2,20 +2,20 @@
 
 exports[`css @supports 1`] = `
 @supports (display:grid) {
-  .glamor-0 {
+  .emotion-0 {
     display: grid;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css component as selectors (object syntax) 1`] = `"Component selectors can only be used in conjunction with babel-plugin-emotion."`;
 
 exports[`css composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26,17 +26,17 @@ exports[`css composition 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: hotpink;
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 1`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -44,12 +44,12 @@ exports[`css composition stuff 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition stuff 2`] = `
-.glamor-0 {
+.emotion-0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -57,12 +57,12 @@ exports[`css composition stuff 2`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -75,34 +75,34 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: blue;
 }
 
-.glamor-0:after {
+.emotion-0:after {
   content: " ";
   color: red;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: green;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css function in expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   font-size: 40px;
 }
 
 <h1
-  className="legacy__class glamor-0"
+  className="legacy__class emotion-0"
   scale={2}
 >
   hello world
@@ -110,7 +110,7 @@ exports[`css function in expression 1`] = `
 `;
 
 exports[`css glamorous style api & composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -122,7 +122,7 @@ exports[`css glamorous style api & composition 1`] = `
 }
 
 <h1
-  className="glamor-0"
+  className="emotion-0"
   fontSize={20}
 >
   hello world
@@ -130,7 +130,7 @@ exports[`css glamorous style api & composition 1`] = `
 `;
 
 exports[`css handles objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
   display: -webkit-box;
   display: -webkit-flex;
@@ -143,12 +143,12 @@ exports[`css handles objects 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css nested array 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,17 +156,17 @@ exports[`css nested array 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css no dynamic 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
 }
 
 <h1
-  className="glamor-0"
+  className="emotion-0"
 >
   hello world
 </h1>
@@ -174,12 +174,12 @@ exports[`css no dynamic 1`] = `
 
 exports[`css null rule 1`] = `
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css object as style 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -191,7 +191,7 @@ exports[`css object as style 1`] = `
 }
 
 <h1
-  className="glamor-0"
+  className="emotion-0"
   fontSize={20}
 >
   hello world
@@ -199,13 +199,13 @@ exports[`css object as style 1`] = `
 `;
 
 exports[`css random expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background: green;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: blue;
     width: 96px;
     height: 96px;
@@ -214,17 +214,17 @@ exports[`css random expression 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
 exports[`css random expressions undefined return 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <h1
-  className="legacy__class glamor-0"
+  className="legacy__class emotion-0"
 >
   hello world
 </h1>
diff --git a/packages/emotion/test/prod-mode/__snapshots__/prod-mode.test.js.snap b/packages/emotion/test/prod-mode/__snapshots__/prod-mode.test.js.snap
index 9ad88f9ea..649a8298b 100644
--- a/packages/emotion/test/prod-mode/__snapshots__/prod-mode.test.js.snap
+++ b/packages/emotion/test/prod-mode/__snapshots__/prod-mode.test.js.snap
@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`production mode production mode basic 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: yellow;
 }
 
-.glamor-0 .some-class {
+.emotion-0 .some-class {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-0 .some-class .some-other-class {
+.emotion-0 .some-class .some-other-class {
   background-color: hotpink;
 }
 
 @media (max-width:600px) {
-  .glamor-0 .some-class {
+  .emotion-0 .some-class {
     background-color: pink;
   }
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 >
   <div
     className="some-class"
diff --git a/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap b/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap
index 4a7023f11..0029b4e12 100644
--- a/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap
+++ b/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`css css prop with merge 1`] = `
-.glamor-0 {
+.emotion-0 {
   display: block;
   display: -webkit-box;
   display: -webkit-flex;
@@ -10,7 +10,7 @@ exports[`css css prop with merge 1`] = `
 }
 
 <div
-  className="glamor-0"
+  className="emotion-0"
 />
 `;
 
diff --git a/packages/jest-emotion/src/replace-class-names.js b/packages/jest-emotion/src/replace-class-names.js
index 5b7364df4..ebc20c40e 100644
--- a/packages/jest-emotion/src/replace-class-names.js
+++ b/packages/jest-emotion/src/replace-class-names.js
@@ -1,7 +1,6 @@
 // @flow
 function defaultClassNameReplacer(className, index) {
-  // Change this to emotion before merging
-  return `glamor-${index}`
+  return `emotion-${index}`
 }
 
 export type ClassNameReplacer = (className: string, index: number) => string
diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap
index 0cc6fe957..038256382 100644
--- a/packages/react-emotion/test/__snapshots__/index.test.js.snap
+++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap
@@ -1,50 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`styled basic render 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
   font-size: 20px;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .emotion-0 {
     color: blue;
   }
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled basic render with object as style 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled call expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </div>
 `;
 
 exports[`styled change theme 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -65,7 +65,7 @@ exports[`styled change theme 1`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -75,7 +75,7 @@ exports[`styled change theme 1`] = `
 `;
 
 exports[`styled change theme 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: pink;
 }
 
@@ -96,7 +96,7 @@ exports[`styled change theme 2`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -125,7 +125,7 @@ exports[`styled change theme 3`] = `
 `;
 
 exports[`styled composing components 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
   display: none;
   display: -webkit-box;
@@ -139,27 +139,27 @@ exports[`styled composing components 1`] = `
 }
 
 <button
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </button>
 `;
 
 exports[`styled composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   font-size: 13.333333333333334px;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
   color: red;
   color: blue;
@@ -168,7 +168,7 @@ exports[`styled composition 2`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -176,64 +176,64 @@ exports[`styled composition 2`] = `
 `;
 
 exports[`styled composition based on props 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition based on props 2`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled composition of nested pseudo selectors 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 2rem;
   padding: 16px;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: blue;
 }
 
-.glamor-0:hover:active {
+.emotion-0:hover:active {
   color: red;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   color: pink;
 }
 
-.glamor-0:hover:active {
+.emotion-0:hover:active {
   color: purple;
 }
 
-.glamor-0:hover.some-class {
+.emotion-0:hover.some-class {
   color: yellow;
 }
 
 <button
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   Should be purple
 </button>
 `;
 
 exports[`styled composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: #333;
   font-size: 1.333em;
   height: 64px;
@@ -242,13 +242,13 @@ exports[`styled composition with objects 1`] = `
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:1.5/1), only screen and (min-resolution:144dpi), only screen and (min-resolution:1.5dppx) {
-  .glamor-0 {
+  .emotion-0 {
     font-size: 1.4323121856191332em;
   }
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -256,13 +256,13 @@ exports[`styled composition with objects 1`] = `
 `;
 
 exports[`styled function in expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   font-size: 40px;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -270,19 +270,19 @@ exports[`styled function in expression 1`] = `
 `;
 
 exports[`styled function that function returns gets called with props 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   color="hotpink"
 />
 `;
 
 exports[`styled glamorous style api & composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -294,7 +294,7 @@ exports[`styled glamorous style api & composition 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   fontSize={20}
 >
   hello world
@@ -302,7 +302,7 @@ exports[`styled glamorous style api & composition 1`] = `
 `;
 
 exports[`styled handles more than 10 dynamic properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   text-decoration: underline;
   border-right: solid blue 54px;
   background: white;
@@ -318,14 +318,14 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled higher order component 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
@@ -335,124 +335,124 @@ exports[`styled higher order component 1`] = `
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled inline function return value is a function 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled innerRef 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 12px;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled input placeholder 1`] = `
-.glamor-0::-webkit-input-placeholder {
+.emotion-0::-webkit-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::-moz-placeholder {
+.emotion-0::-moz-placeholder {
   background-color: green;
 }
 
-.glamor-0:-ms-input-placeholder {
+.emotion-0:-ms-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::placeholder {
+.emotion-0::placeholder {
   background-color: green;
 }
 
 <input
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </input>
 `;
 
 exports[`styled input placeholder object 1`] = `
-.glamor-0::-webkit-input-placeholder {
+.emotion-0::-webkit-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::-moz-placeholder {
+.emotion-0::-moz-placeholder {
   background-color: green;
 }
 
-.glamor-0:-ms-input-placeholder {
+.emotion-0:-ms-input-placeholder {
   background-color: green;
 }
 
-.glamor-0::placeholder {
+.emotion-0::placeholder {
   background-color: green;
 }
 
 <input
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </input>
 `;
 
 exports[`styled name with class component 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
 }
 
 <Styled(SomeComponent)>
   <SomeComponent
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     <div
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     />
   </SomeComponent>
 </Styled(SomeComponent)>
 `;
 
 exports[`styled nested 1`] = `
-.glamor-2 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-2 div {
+.emotion-2 div {
   color: green;
 }
 
-.glamor-2 div span {
+.emotion-2 div span {
   color: red;
 }
 
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-2 glamor-3"
+  className="emotion-2 emotion-3"
 >
   hello 
   <h1
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     This will be green
   </h1>
@@ -461,19 +461,19 @@ exports[`styled nested 1`] = `
 `;
 
 exports[`styled no dynamic 1`] = `
-.glamor-0 {
+.emotion-0 {
   float: left;
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled no prop filtering on non string tags 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -481,7 +481,7 @@ exports[`styled no prop filtering on non string tags 1`] = `
   a={true}
   aria-label="some label"
   b={true}
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   cool={true}
   data-wow="value"
   filtering={true}
@@ -495,7 +495,7 @@ exports[`styled no prop filtering on non string tags 1`] = `
 `;
 
 exports[`styled no prop filtering on string tags started with upper case 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
@@ -503,7 +503,7 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
   a={true}
   aria-label="some label"
   b={true}
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   cool={true}
   data-wow="value"
   filtering={true}
@@ -517,7 +517,7 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
 `;
 
 exports[`styled object as style 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -529,7 +529,7 @@ exports[`styled object as style 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   fontSize={20}
 >
   hello world
@@ -537,7 +537,7 @@ exports[`styled object as style 1`] = `
 `;
 
 exports[`styled object composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   border-radius: 50%;
   -webkit-transition: -webkit-transform 400ms ease-in-out;
   -webkit-transition: transform 400ms ease-in-out;
@@ -549,19 +549,19 @@ exports[`styled object composition 1`] = `
   color: blue;
 }
 
-.glamor-0:hover {
+.emotion-0:hover {
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
 <img
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   padding: 10px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -570,7 +570,7 @@ exports[`styled objects 1`] = `
 }
 
 <h1
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   display="flex"
 >
   hello world
@@ -578,25 +578,25 @@ exports[`styled objects 1`] = `
 `;
 
 exports[`styled objects with spread properties 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <figure
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </figure>
 `;
 
 exports[`styled prop filtering 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <a
   aria-label="some label"
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   data-wow="value"
   href="link"
   is={true}
@@ -606,14 +606,14 @@ exports[`styled prop filtering 1`] = `
 `;
 
 exports[`styled prop filtering on composed styled components that are string tags 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: hotpink;
   color: green;
 }
 
 <a
   aria-label="some label"
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
   data-wow="value"
   href="link"
   is={true}
@@ -623,19 +623,19 @@ exports[`styled prop filtering on composed styled components that are string tag
 `;
 
 exports[`styled random expressions undefined return 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled random object expression 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: hotpink;
   font-size: 1rem;
   margin-top: 0;
@@ -646,48 +646,48 @@ exports[`styled random object expression 1`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled theme prop exists without ThemeProvider 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled theme prop exists without ThemeProvider with a theme prop on the component 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
   background-color: yellow;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled theme with react-test-renderer 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: pink;
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   this will be pink
 </div>
 `;
 
 exports[`styled themes 1`] = `
-.glamor-0 {
+.emotion-0 {
   background-color: #ffd43b;
   color: blue;
   height: 64px;
@@ -697,7 +697,7 @@ exports[`styled themes 1`] = `
 }
 
 <span
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 >
   hello world
 </span>
@@ -721,7 +721,7 @@ exports[`styled theming 1`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -748,7 +748,7 @@ exports[`styled theming 2`] = `
   >
     <Styled(div)>
       <div
-        className="glamor-0 glamor-1"
+        className="emotion-0 emotion-1"
       >
         this will be green then pink
       </div>
@@ -782,7 +782,7 @@ You may have forgotten to import it."
 `;
 
 exports[`styled with higher order component that hoists statics 1`] = `
-.glamor-1 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -792,7 +792,7 @@ exports[`styled with higher order component that hoists statics 1`] = `
 }
 
 <div
-  className="glamor-0 glamor-1 glamor-2"
+  className="emotion-0 emotion-1 emotion-2"
 />
 `;
 
@@ -803,31 +803,31 @@ exports[`styled withComponent creates a new, unique stable class per invocation
 exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"eldhy9957"`;
 
 exports[`styled withComponent does not carry styles from flattened component 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: hotpink;
 }
 
 <p
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
 exports[`styled withComponent will replace tags but keep styling classes 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
 <article>
   <Styled(h1)>
     <h1
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     >
       My Title
     </h1>
   </Styled(h1)>
   <Styled(h2)>
     <h2
-      className="glamor-0 glamor-3"
+      className="emotion-0 emotion-3"
     >
       My Subtitle
     </h2>
@@ -836,18 +836,18 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 `;
 
 exports[`styled withComponent with function interpolation 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: green;
 }
 
-.glamor-2 {
+.emotion-2 {
   color: hotpink;
 }
 
 <article>
   <Styled(h1)>
     <h1
-      className="glamor-0 glamor-1"
+      className="emotion-0 emotion-1"
     >
       My Title
     </h1>
@@ -856,7 +856,7 @@ exports[`styled withComponent with function interpolation 1`] = `
     color="hotpink"
   >
     <h2
-      className="glamor-2 glamor-3"
+      className="emotion-2 emotion-3"
       color="hotpink"
     >
       My Subtitle
diff --git a/packages/react-emotion/test/auto-label/__snapshots__/auto-label.test.js.snap b/packages/react-emotion/test/auto-label/__snapshots__/auto-label.test.js.snap
index 79dd9f71e..9c405699b 100644
--- a/packages/react-emotion/test/auto-label/__snapshots__/auto-label.test.js.snap
+++ b/packages/react-emotion/test/auto-label/__snapshots__/auto-label.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`styled with autoLabel composition 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: blue;
   color: red;
   color: blue;
@@ -10,7 +10,7 @@ exports[`styled with autoLabel composition 1`] = `
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -37,7 +37,7 @@ exports[`styled with autoLabel composition 2`] = `
 `;
 
 exports[`styled with autoLabel composition with objects 1`] = `
-.glamor-0 {
+.emotion-0 {
   color: #333;
   font-size: 1.333em;
   height: 64px;
@@ -46,13 +46,13 @@ exports[`styled with autoLabel composition with objects 1`] = `
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:1.5/1), only screen and (min-resolution:144dpi), only screen and (min-resolution:1.5dppx) {
-  .glamor-0 {
+  .emotion-0 {
     font-size: 1.4323121856191332em;
   }
 }
 
 <h1
-  className="legacy__class glamor-0 glamor-1"
+  className="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -88,7 +88,7 @@ exports[`styled with autoLabel composition with objects 2`] = `
 `;
 
 exports[`styled with autoLabel higher order component 1`] = `
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
   background-color: #7fc8d6;
   background-color: '#343a40';
@@ -98,7 +98,7 @@ exports[`styled with autoLabel higher order component 1`] = `
 }
 
 <div
-  className="glamor-0 glamor-1"
+  className="emotion-0 emotion-1"
 />
 `;
 
diff --git a/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap b/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap
index 4b88c7c23..98f149a17 100644
--- a/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap
+++ b/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap
@@ -1,27 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`component as selector (object syntax) 1`] = `
-.glamor-2 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-2 .glamor-1 {
+.emotion-2 .emotion-1 {
   color: green;
 }
 
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-2 glamor-3"
+  className="emotion-2 emotion-3"
 >
   hello 
   <h1
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     This will be green
   </h1>
@@ -47,27 +47,27 @@ exports[`component as selector (object syntax) 2`] = `
 `;
 
 exports[`component as selector 1`] = `
-.glamor-2 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-2 .glamor-1 {
+.emotion-2 .emotion-1 {
   color: green;
 }
 
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-2 glamor-3"
+  className="emotion-2 emotion-3"
 >
   hello 
   <h1
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
   >
     This will be green
   </h1>
@@ -93,28 +93,28 @@ exports[`component as selector 2`] = `
 `;
 
 exports[`component as selector function interpolation (object syntax) 1`] = `
-.glamor-2 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-2 .glamor-1 {
+.emotion-2 .emotion-1 {
   color: green;
 }
 
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-2 glamor-3"
+  className="emotion-2 emotion-3"
   fontSize={10}
 >
   hello 
   <h1
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
     fontSize={20}
   >
     This will be green
@@ -141,28 +141,28 @@ exports[`component as selector function interpolation (object syntax) 2`] = `
 `;
 
 exports[`component as selector function interpolation 1`] = `
-.glamor-2 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-2 .glamor-1 {
+.emotion-2 .emotion-1 {
   color: green;
 }
 
-.glamor-0 {
+.emotion-0 {
   font-size: 20px;
 }
 
 <div
-  className="glamor-2 glamor-3"
+  className="emotion-2 emotion-3"
   fontSize={10}
 >
   hello 
   <h1
-    className="glamor-0 glamor-1"
+    className="emotion-0 emotion-1"
     fontSize={20}
   >
     This will be green