diff --git a/src/clean-ast.js b/src/clean-ast.js index e4d2104b..fe1009fb 100644 --- a/src/clean-ast.js +++ b/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); } diff --git a/src/multiparser.js b/src/multiparser.js index c40b88e3..550aaf81 100644 --- a/src/multiparser.js +++ b/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"))) ); } diff --git a/tests/template_literals/__snapshots__/jsfmt.spec.js.snap b/tests/template_literals/__snapshots__/jsfmt.spec.js.snap index b0e4cf38..71bdfc11 100644 --- a/tests/template_literals/__snapshots__/jsfmt.spec.js.snap +++ b/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`] = ` diff --git a/tests/template_literals/styled-components-with-expressions.js b/tests/template_literals/styled-components-with-expressions.js index fe0aa7c7..8fb45469 100644 --- a/tests/template_literals/styled-components-with-expressions.js +++ b/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; + } +`;