vitalif-js
/
prettier
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add support for styled-jsx external styles (#6089)

master
Rich Hong 2019-05-19 12:26:30 -04:00 committed by Lucas Duailibe
parent 3b3c411642
commit 906d33749b
4 changed files with 231 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
CHANGELOG.unreleased.md
View File

@ -260,6 +260,33 @@ function Foo() {
Atom has a security feature where code containing `eval` is not allowed to be run. One of Prettier's dependencies uses `eval` to prevent bundlers from including debug code. We've now made sure that this `eval` does not end up in the code we ship to npm, making Prettier play nice with Atom again.
### JavaScript: Add support for styled-jsx external styles ([#6089] by [@hongrich])
Add support for 2 external styles tags in `styled-jsx/css`: `css.global`, and `css.resolve`. https://github.com/zeit/styled-jsx/#external-css-and-styles-outside-of-the-component
The `css` template tag is already supported by Prettier.
Fixes https://github.com/zeit/styled-jsx/issues/548
<!-- prettier-ignore -->
```js
// Input
const styles = css.resolve`
.box {background:black;
}`;
// Output (Prettier stable)
const styles = css.resolve`
.box {background:black;
}`;
// Output (prettier master)
const styles = css.resolve`
.box {
background: black;
}
`;
### TypeScript: Keep a pair of parentheses when there are extra pairs. ([#6131] by [@sosukesuzuki])
Previously, Prettier removes the necessary parentheses when trying to remove unnecessary parentheses, in TypeScript.
@ -298,6 +325,7 @@ const b = new (c()!)();
[#5979]: https://github.com/prettier/prettier/pull/5979
[#6086]: https://github.com/prettier/prettier/pull/6086
[#6088]: https://github.com/prettier/prettier/pull/6088
[#6089]: https://github.com/prettier/prettier/pull/6089
[#6106]: https://github.com/prettier/prettier/pull/6106
[#6110]: https://github.com/prettier/prettier/pull/6110
[#6115]: https://github.com/prettier/prettier/pull/6115
@ -312,6 +340,7 @@ const b = new (c()!)();
[@brainkim]: https://github.com/brainkim
[@duailibe]: https://github.com/duailibe
[@evilebottnawi]: https://github.com/evilebottnawi
[@hongrich]: https://github.com/hongrich
[@jridgewell]: https://github.com/jridgewell
[@jwbay]: https://github.com/jwbay
[@sosukesuzuki]: https://github.com/sosukesuzuki

31
src/language-js/embed.js
View File

@ -335,22 +335,35 @@ function printGraphqlComments(lines) {
}
/**
* Template literal in this context:
* Template literal in these contexts:
* <style jsx>{`div{color:red}`}</style>
* css``
* css.global``
* css.resolve``
*/
function isStyledJsx(path) {
const node = path.getValue();
const parent = path.getParentNode();
const parentParent = path.getParentNode(1);
return (
parentParent &&
node.quasis &&
parent.type === "JSXExpressionContainer" &&
parentParent.type === "JSXElement" &&
parentParent.openingElement.name.name === "style" &&
parentParent.openingElement.attributes.some(
attribute => attribute.name.name === "jsx"
)
(parentParent &&
node.quasis &&
parent.type === "JSXExpressionContainer" &&
parentParent.type === "JSXElement" &&
parentParent.openingElement.name.name === "style" &&
parentParent.openingElement.attributes.some(
attribute => attribute.name.name === "jsx"
)) ||
(parent &&
parent.type === "TaggedTemplateExpression" &&
parent.tag.type === "Identifier" &&
parent.tag.name === "css") ||
(parent &&
parent.type === "TaggedTemplateExpression" &&
parent.tag.type === "MemberExpression" &&
parent.tag.object.name === "css" &&
(parent.tag.property.name === "global" ||
parent.tag.property.name === "resolve"))
);
}

123
tests/template_literals/__snapshots__/jsfmt.spec.js.snap
View File

@ -323,6 +323,63 @@ color: red; display: none
Shouldn't be formatted.\`}</style>
</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 headerResolve = css.resolve\`
.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 headerGlobal = css.global\`
.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;
}
\`;
=====================================output=====================================
<style jsx>{\`
/* a comment */
@ -356,6 +413,72 @@ color: red; display: none
Shouldn't be formatted.\`}</style>
</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 headerResolve = css.resolve\`
.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 headerGlobal = css.global\`
.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;
}
\`;
================================================================================
`;

57
tests/template_literals/styled-jsx.js
View File

@ -22,3 +22,60 @@ color: red; display: none
Shouldn't fail.
Shouldn't be formatted.`}</style>
</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 headerResolve = css.resolve`
.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 headerGlobal = css.global`
.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;
}
`;