Add support for css, keyframes and injectGlobal keywords (#2337)

* styled components now support css keyword

* added support also for keyframes

* added comment to reflect the new keywords

* modified comment

* ignore css and keyframes when testing ast manipulations

* added also injectGlobal

src/clean-ast.js

@@ -157,7 +157,11 @@ function massageAST(ast) {
       ast.type === "TaggedTemplateExpression" &&
       (ast.tag.type === "MemberExpression" ||
         (ast.tag.type === "Identifier" &&
-          (ast.tag.name === "gql" || ast.tag.name === "graphql")))
+          (ast.tag.name === "gql" ||
+            ast.tag.name === "graphql" ||
+            ast.tag.name === "css" ||
+            ast.tag.name === "keyframes" ||
+            ast.tag.name === "injectGlobal")))
     ) {
       newObj.quasi.quasis.forEach(quasi => delete quasi.value);
     }

src/multiparser.js

@@ -290,20 +290,26 @@ function isStyledJsx(path) {
 }
 
 /**
- * Template literal in this context:
+ * Template literal in these contexts:
  * styled.button`color: red`
- * or
  * Foo.extend`color: red`
+ * css`color: red`
+ * keyframes`0% { opacity: 0; }`
+ * injectGlobal`body{ margin:0: }`
  */
 function isStyledComponents(path) {
   const parent = path.getParentNode();
   return (
     parent &&
     parent.type === "TaggedTemplateExpression" &&
-    parent.tag.type === "MemberExpression" &&
-    (parent.tag.object.name === "styled" ||
-      (/^[A-Z]/.test(parent.tag.object.name) &&
-        parent.tag.property.name === "extend"))
+    ((parent.tag.type === "MemberExpression" &&
+      (parent.tag.object.name === "styled" ||
+        (/^[A-Z]/.test(parent.tag.object.name) &&
+          parent.tag.property.name === "extend"))) ||
+      (parent.tag.type === "Identifier" &&
+        (parent.tag.name === "css" ||
+          parent.tag.name === "keyframes" ||
+          parent.tag.name === "injectGlobal")))
   );
 }
 

tests/template_literals/__snapshots__/jsfmt.spec.js.snap

@@ -25,6 +25,45 @@ margin: 0.5rem;
 		}
 	}
 \`;
+
+const header = css\`
+.top-bar {background:black;
+margin: 0;
+    position: fixed;
+	top: 0;left:0;
+	width: 100%;
+    text-align: center     ;
+	padding: 15px  0  0  1em;
+		z-index: 9999;
+}
+
+.top-bar .logo {
+  height: 30px;
+  margin: auto; 
+    position: absolute;
+	left: 0;right: 0;
+}
+\`;
+
+const fadeIn = keyframes\`
+  0% {
+opacity: 0;
+  }
+  100%    {
+       opacity: 1;
+  }
+\`;
+
+injectGlobal\`
+  @font-face {
+font-family: 'Operator Mono'  ;
+     src: url('../fonts/Operator-Mono.ttf');
+  }
+
+  body {
+    margin: 0;padding:0;
+  }
+\`;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const Button = styled.a\`
   /* Comment */
@@ -51,6 +90,49 @@ const EqualDivider = styled.div\`
   }
 \`;
 
+const header = css\`
+  .top-bar {
+    background: black;
+    margin: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    padding: 15px 0 0 1em;
+    z-index: 9999;
+  }
+
+  .top-bar .logo {
+    height: 30px;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+\`;
+
+const fadeIn = keyframes\`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+\`;
+
+injectGlobal\`
+  @font-face {
+    font-family: 'Operator Mono';
+    src: url('../fonts/Operator-Mono.ttf');
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+\`;
+
 `;
 
 exports[`styled-jsx.js 1`] = `

tests/template_literals/styled-components-with-expressions.js

@@ -22,3 +22,42 @@ margin: 0.5rem;
 		}
 	}
 `;
+
+const header = css`
+.top-bar {background:black;
+margin: 0;
+    position: fixed;
+	top: 0;left:0;
+	width: 100%;
+    text-align: center     ;
+	padding: 15px  0  0  1em;
+		z-index: 9999;
+}
+
+.top-bar .logo {
+  height: 30px;
+  margin: auto; 
+    position: absolute;
+	left: 0;right: 0;
+}
+`;
+
+const fadeIn = keyframes`
+  0% {
+opacity: 0;
+  }
+  100%    {
+       opacity: 1;
+  }
+`;
+
+injectGlobal`
+  @font-face {
+font-family: 'Operator Mono'  ;
+     src: url('../fonts/Operator-Mono.ttf');
+  }
+
+  body {
+    margin: 0;padding:0;
+  }
+`;