Fix css embed in JSX when using (only) a spread attribute (#15896)

eelco · web-flow · commit 0bfcb2d5a544 · 2024-01-14T11:42:25.000+09:00
diff --git a/changelog_unreleased/javascript/15896.md b/changelog_unreleased/javascript/15896.md
@@ -0,0 +1,8 @@
+#### Fix crash when parsing template literal CSS in a JSX style tag using a spread attribute (#15896 by @eelco)
+
+For example this code would crash before:
+
+<!-- prettier-ignore -->
+```jsx
+<style {...spread}>{`.{}`}</style>
+```
diff --git a/src/language-js/embed/css.js b/src/language-js/embed/css.js
@@ -75,7 +75,8 @@ function isStyledJsx({ node, parent, grandparent }) {
       grandparent.type === "JSXElement" &&
       grandparent.openingElement.name.name === "style" &&
       grandparent.openingElement.attributes.some(
-        (attribute) => attribute.name.name === "jsx",
+        (attribute) =>
+          attribute.type === "JSXAttribute" && attribute.name.name === "jsx",
       )) ||
     (parent?.type === "TaggedTemplateExpression" &&
       parent.tag.type === "Identifier" &&
diff --git a/tests/format/jsx/embed/__snapshots__/jsfmt.spec.js.snap b/tests/format/jsx/embed/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`css-embed.js format 1`] = `
+====================================options=====================================
+parsers: ["flow", "babel"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<style {...spread}>{\`.{}\`}</style>;
+
+=====================================output=====================================
+<style {...spread}>{\`.{}\`}</style>;
+
+================================================================================
+`;
diff --git a/tests/format/jsx/embed/css-embed.js b/tests/format/jsx/embed/css-embed.js
@@ -0,0 +1 @@
+<style {...spread}>{`.{}`}</style>;
diff --git a/tests/format/jsx/embed/jsfmt.spec.js b/tests/format/jsx/embed/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(import.meta, ["flow", "babel"]);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+run_spec(import.meta, ["flow", "babel"]);`