Skip to content

Commit

Permalink
Add support for styled-jsx external styles (#6089)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hongrich @duailibe
hongrich authored and duailibe committed May 19, 2019
1 parent 3b3c411 commit 906d337
Show file tree
Hide file tree
Showing 4 changed files with 231 additions and 9 deletions.
29 changes: 29 additions & 0 deletions CHANGELOG.unreleased.md
View file
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand All @@ -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 changes: 22 additions & 9 deletions src/language-js/embed.js
View file
Expand Up @@ -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"))
);
}

Expand Down
123 changes: 123 additions & 0 deletions tests/template_literals/__snapshots__/jsfmt.spec.js.snap
View file
Expand Up @@ -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 */
Expand Down Expand Up @@ -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;
}
\`;
================================================================================
`;
Expand Down
57 changes: 57 additions & 0 deletions tests/template_literals/styled-jsx.js
View file
Expand Up @@ -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;
}
`;

0 comments on commit 906d337

Please sign in to comment.