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 injectGlobalmaster
parent
21733e441d
commit
067a0137bd
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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.type === "MemberExpression" &&
|
||||
(parent.tag.object.name === "styled" ||
|
||||
(/^[A-Z]/.test(parent.tag.object.name) &&
|
||||
parent.tag.property.name === "extend"))
|
||||
parent.tag.property.name === "extend"))) ||
|
||||
(parent.tag.type === "Identifier" &&
|
||||
(parent.tag.name === "css" ||
|
||||
parent.tag.name === "keyframes" ||
|
||||
parent.tag.name === "injectGlobal")))
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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`] = `
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
Loading…
Reference in New Issue