prettier/tests/jsx_template/styled-components.js

<style jsx>{`
  p {
    color: red;
  }
`}</style>;

<style jsx>{tpl`
  p {
    color: red;
  }
`}</style>;

<style jsx>
  {`p {
     color: red;
     }
  `}
</style>;
Improve jsx output for style components (#1144) * Hug template literals inside of JSXExpressionContainer We already hug a bunch of things inside of `{}`. It seems that it's a good idea to do it for template literals as well. I don't think I've seen anyone actually indent them. Fixes #1090 * Inline jsx elements with single template literal expression If there is a single expression and a single template literal, then a lot of people in the jsx-style world inline it. I've also myself used this for markdown and printed it that way. So we probably should print it that way. Note that I'm checking for children.length === 1, this means that if there's any whitespace, this is not going to be true and will not enter this case. So it WON'T reformat ```js <style> {` color: red; `} </style> ``` into ```js <style>{` color: red; `}</style> ``` which is great. You have to opt-in to the second style in order to get it. Fixes #1090 2017-04-11 19:33:02 +03:00			<style jsx>{`
			`p {`
			`color: red;`
			`}`
			`}</style>;

			<style jsx>{tpl`
			`p {`
			`color: red;`
			`}`
			`}</style>;

			`<style jsx>`
			{`p {
			`color: red;`
			`}`
			`}
			`</style>;`