.git-blame-ignore-revs

@@ -5,6 +5,8 @@
 # See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
 
 # Prettier bump after release
+# 3.2.1
+5811ad00705488365e0d0baf50c92965edddf58e
 # 3.2.0
 ee0d667fa2bf175c194f2f93c98c25a575454476
 # 3.1.1

.github/ISSUE_TEMPLATE/formatting.md

@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
 
 -->
 
-**Prettier 3.2.1**
+**Prettier 3.2.2**
 [Playground link](https://prettier.io/playground/#.....)
 
 ```sh

.github/ISSUE_TEMPLATE/integration.md

@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
 
 **Environments:**
 
-- Prettier Version: 3.2.1
+- Prettier Version: 3.2.2
 - Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
 - Runtime: <!-- Node.js v14, Chrome v83, etc. -->
 - Operating System: <!-- Windows, Linux, macOS, etc. -->

CHANGELOG.md

@@ -1,3 +1,30 @@
+# 3.2.2
+
+[diff](https://github.com/prettier/prettier/compare/3.2.1...3.2.2)
+
+#### Fix crash when parsing template literal CSS in a JSX style tag using a spread attribute ([#15896](https://github.com/prettier/prettier/pull/15896) by [@eelco](https://github.com/eelco))
+
+For example this code would crash before:
+
+<!-- prettier-ignore -->
+```jsx
+<style {...spread}>{`.{}`}</style>
+```
+
+#### Fix formatting error on optional call expression and member chain ([#15920](https://github.com/prettier/prettier/pull/15920) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+a(() => {}, c?.d());
+
+// Prettier 3.2.1
+TypeError: Cannot read properties of undefined (reading 'type')
+
+// Prettier 3.2.2
+a(() => {}, c?.d());
+```
+
 # 3.2.1
 
 [diff](https://github.com/prettier/prettier/compare/3.2.0...3.2.1)
@@ -350,23 +377,23 @@ function fn() {
   return (
     /**
      * @type {...}
-     */ expresssion
+     */ expression
   )
 }
 
 // Prettier 3.0.0
 function fn() {
   return /**
    * @type {...}
-   */ expresssion;
+   */ expression;
 }
 
 // Prettier 3.0.1
 function fn() {
   return (
     /**
      * @type {...}
-     */ expresssion
+     */ expression
   );
 }
 ```
@@ -1694,7 +1721,7 @@ interface Foo {
 <MyComponent
   {{! this is a comment for arg 1}}
   @arg1="hello"
-  {{on "clik" this.modify}}
+  {{on "click" this.modify}}
   @arg2="hello"
   {{! this is a comment for arg 3}}
   @arg3="hello"
@@ -1711,7 +1738,7 @@ interface Foo {
   @arg4="hello"
   @arg5="hello"
   ...arguments
-  {{on "clik" this.modify}}
+  {{on "click" this.modify}}
   {{! this is a comment for arg 1}}
   {{! this is a comment for arg 3}}
   {{! this is a comment for arg 5}}
@@ -1720,7 +1747,7 @@ interface Foo {
 <MyComponent
   {{! this is a comment for arg 1}}
   @arg1="hello"
-  {{on "clik" this.modify}}
+  {{on "click" this.modify}}
   @arg2="hello"
   {{! this is a comment for arg 3}}
   @arg3="hello"

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>
+```

changelog_unreleased/javascript/15920.md

@@ -0,0 +1,13 @@
+#### Fix formatting error on optional call expression and member chain (#15920 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+a(() => {}, c?.d());
+
+// Prettier stable
+TypeError: Cannot read properties of undefined (reading 'type')
+
+// Prettier main
+a(() => {}, c?.d());
+```

docs/browser.md

@@ -18,7 +18,7 @@ Required options:
 
 - **[`parser`](options.md#parser) (or [`filepath`](options.md#file-path))**: One of these options has to be specified for Prettier to know which parser to use.
 
-- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@3.2.1/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
+- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@3.2.2/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
 
   You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
 
@@ -29,8 +29,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@3.2.1/standalone.js"></script>
-<script src="https://unpkg.com/prettier@3.2.1/plugins/graphql.js"></script>
+<script src="https://unpkg.com/prettier@3.2.2/standalone.js"></script>
+<script src="https://unpkg.com/prettier@3.2.2/plugins/graphql.js"></script>
 <script>
   (async () => {
     const formatted = await prettier.format("type Query { hello: String }", {
@@ -47,8 +47,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@3.2.1/standalone.mjs";
-  import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.1/plugins/graphql.mjs";
+  import * as prettier from "https://unpkg.com/prettier@3.2.2/standalone.mjs";
+  import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.2/plugins/graphql.mjs";
 
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -61,8 +61,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@3.2.1/standalone.js",
-  "https://unpkg.com/prettier@3.2.1/plugins/graphql.js",
+  "https://unpkg.com/prettier@3.2.2/standalone.js",
+  "https://unpkg.com/prettier@3.2.2/plugins/graphql.js",
 ], async (prettier, ...plugins) => {
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -90,8 +90,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@3.2.1/standalone.js");
-importScripts("https://unpkg.com/prettier@3.2.1/plugins/graphql.js");
+importScripts("https://unpkg.com/prettier@3.2.2/standalone.js");
+importScripts("https://unpkg.com/prettier@3.2.2/plugins/graphql.js");
 
 (async () => {
   const formatted = await prettier.format("type Query { hello: String }", {
@@ -107,9 +107,9 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@3.2.1/standalone.mjs";
-  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.1/plugins/babel.mjs";
-  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.1/plugins/estree.mjs";
+  import * as prettier from "https://unpkg.com/prettier@3.2.2/standalone.mjs";
+  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.2/plugins/babel.mjs";
+  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.2/plugins/estree.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -125,10 +125,10 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@3.2.1/standalone.mjs";
-  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.1/plugins/babel.mjs";
-  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.1/plugins/estree.mjs";
-  import prettierPluginHtml from "https://unpkg.com/prettier@3.2.1/plugins/html.mjs";
+  import * as prettier from "https://unpkg.com/prettier@3.2.2/standalone.mjs";
+  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.2/plugins/babel.mjs";
+  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.2/plugins/estree.mjs";
+  import prettierPluginHtml from "https://unpkg.com/prettier@3.2.2/plugins/html.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {

docs/plugins.md

@@ -49,6 +49,7 @@ Strings provided to `plugins` are ultimately passed to [`import()` expression](h
 - [`prettier-plugin-astro`](https://github.com/withastro/prettier-plugin-astro) by [**@withastro contributors**](https://github.com/withastro/prettier-plugin-astro/graphs/contributors)
 - [`prettier-plugin-elm`](https://github.com/gicentre/prettier-plugin-elm) by [**@giCentre**](https://github.com/gicentre)
 - [`prettier-plugin-erb`](https://github.com/adamzapasnik/prettier-plugin-erb) by [**@adamzapasnik**](https://github.com/adamzapasnik)
+- [`prettier-plugin-gherkin`](https://github.com/mapado/prettier-plugin-gherkin) by [**@mapado**](https://github.com/mapado)
 - [`prettier-plugin-glsl`](https://github.com/NaridaL/glsl-language-toolkit/tree/main/packages/prettier-plugin-glsl) by [**@NaridaL**](https://github.com/NaridaL)
 - [`prettier-plugin-go-template`](https://github.com/NiklasPor/prettier-plugin-go-template) by [**@NiklasPor**](https://github.com/NiklasPor)
 - [`prettier-plugin-java`](https://github.com/jhipster/prettier-java) by [**@JHipster**](https://github.com/jhipster)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Prettier is an opinionated code formatter",
   "bin": "./bin/prettier.cjs",
   "repository": "prettier/prettier",
@@ -147,7 +147,7 @@
     "jest-watch-typeahead": "2.2.2",
     "magic-string": "0.30.5",
     "npm-run-all2": "6.1.1",
-    "prettier": "3.2.0",
+    "prettier": "3.2.1",
     "pretty-bytes": "6.1.1",
     "rollup-plugin-license": "3.2.0",
     "semver": "7.5.4",

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" &&

src/language-js/utils/index.js

@@ -405,16 +405,6 @@ function isTestCall(node, parent) {
 /** @return {(node: Node) => boolean} */
 const skipChainExpression = (fn) => (node) => {
   if (node?.type === "ChainExpression") {
-    // @ts-expect-error
-    if (!node.object) {
-      // @ts-expect-error
-      node.object = node.expression.object;
-    }
-    // @ts-expect-error
-    if (!node.property) {
-      // @ts-expect-error
-      node.property = node.expression.property;
-    }
     node = node.expression;
   }
 
@@ -429,6 +419,22 @@ const isMemberExpression = skipChainExpression(
   createTypeCheckFunction(["MemberExpression", "OptionalMemberExpression"]),
 );
 
+/**
+ * Retrieves a property from a node, considering any ChainExpression.
+ * If the node is a ChainExpression, the property is obtained from its expression.
+ * Otherwise, the property is obtained directly from the node.
+ *
+ * @param {Node} node - The AST node to be processed.
+ * @param {string} property - The property name to retrieve.
+ * @returns The property value from the node or its expression.
+ */
+function getChainProp(node, property) {
+  if (node.type === "ChainExpression") {
+    return node.expression[property];
+  }
+  return node[property];
+}
+
 /**
  *
  * @param {any} node
@@ -769,7 +775,7 @@ function isSimpleCallArgument(node, depth = 2) {
   if (isCallLikeExpression(node)) {
     if (
       node.type === "ImportExpression" ||
-      isSimpleCallArgument(node.callee, depth)
+      isSimpleCallArgument(getChainProp(node, "callee"), depth)
     ) {
       const args = getCallArguments(node);
       return args.length <= depth && args.every(isChildSimple);
@@ -779,8 +785,8 @@ function isSimpleCallArgument(node, depth = 2) {
 
   if (isMemberExpression(node)) {
     return (
-      isSimpleCallArgument(node.object, depth) &&
-      isSimpleCallArgument(node.property, depth)
+      isSimpleCallArgument(getChainProp(node, "object"), depth) &&
+      isSimpleCallArgument(getChainProp(node, "property"), depth)
     );
   }
 
@@ -1232,6 +1238,7 @@ export {
   createTypeCheckFunction,
   getCallArguments,
   getCallArgumentSelector,
+  getChainProp,
   getComments,
   getFunctionParameters,
   getLeftSide,

tests/format/js/chain-expression/__snapshots__/jsfmt.spec.js.snap

@@ -97,6 +97,35 @@ test().test2().test2(thing?.something);
 ================================================================================
 `;
 
+exports[`issue-15916.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const randomFuncion = (value) => {
+    if (value.a) {
+        funcA(
+            "",
+            funcB(
+                dayjs(value.a?.toString())
+                      .add(1, "day")
+                      .toISOString()
+            )
+        );
+    }
+};
+
+=====================================output=====================================
+const randomFuncion = (value) => {
+  if (value.a) {
+    funcA("", funcB(dayjs(value.a?.toString()).add(1, "day").toISOString()));
+  }
+};
+
+================================================================================
+`;
+
 exports[`test.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript", "flow"]

tests/format/js/chain-expression/issue-15916.js

@@ -0,0 +1,12 @@
+const randomFuncion = (value) => {
+    if (value.a) {
+        funcA(
+            "",
+            funcB(
+                dayjs(value.a?.toString())
+                      .add(1, "day")
+                      .toISOString()
+            )
+        );
+    }
+};

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>;
+
+================================================================================
+`;

tests/format/jsx/embed/css-embed.js

@@ -0,0 +1 @@
+<style {...spread}>{`.{}`}</style>;

tests/format/jsx/embed/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(import.meta, ["flow", "babel"]);

website/versioned_docs/version-stable/browser.md

@@ -19,7 +19,7 @@ Required options:
 
 - **[`parser`](options.md#parser) (or [`filepath`](options.md#file-path))**: One of these options has to be specified for Prettier to know which parser to use.
 
-- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@3.2.1/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
+- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@3.2.2/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
 
   You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
 
@@ -30,8 +30,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@3.2.1/standalone.js"></script>
-<script src="https://unpkg.com/prettier@3.2.1/plugins/graphql.js"></script>
+<script src="https://unpkg.com/prettier@3.2.2/standalone.js"></script>
+<script src="https://unpkg.com/prettier@3.2.2/plugins/graphql.js"></script>
 <script>
   (async () => {
     const formatted = await prettier.format("type Query { hello: String }", {
@@ -48,8 +48,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@3.2.1/standalone.mjs";
-  import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.1/plugins/graphql.mjs";
+  import * as prettier from "https://unpkg.com/prettier@3.2.2/standalone.mjs";
+  import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.2/plugins/graphql.mjs";
 
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -62,8 +62,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@3.2.1/standalone.js",
-  "https://unpkg.com/prettier@3.2.1/plugins/graphql.js",
+  "https://unpkg.com/prettier@3.2.2/standalone.js",
+  "https://unpkg.com/prettier@3.2.2/plugins/graphql.js",
 ], async (prettier, ...plugins) => {
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -91,8 +91,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@3.2.1/standalone.js");
-importScripts("https://unpkg.com/prettier@3.2.1/plugins/graphql.js");
+importScripts("https://unpkg.com/prettier@3.2.2/standalone.js");
+importScripts("https://unpkg.com/prettier@3.2.2/plugins/graphql.js");
 
 (async () => {
   const formatted = await prettier.format("type Query { hello: String }", {
@@ -108,9 +108,9 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@3.2.1/standalone.mjs";
-  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.1/plugins/babel.mjs";
-  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.1/plugins/estree.mjs";
+  import * as prettier from "https://unpkg.com/prettier@3.2.2/standalone.mjs";
+  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.2/plugins/babel.mjs";
+  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.2/plugins/estree.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -126,10 +126,10 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@3.2.1/standalone.mjs";
-  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.1/plugins/babel.mjs";
-  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.1/plugins/estree.mjs";
-  import prettierPluginHtml from "https://unpkg.com/prettier@3.2.1/plugins/html.mjs";
+  import * as prettier from "https://unpkg.com/prettier@3.2.2/standalone.mjs";
+  import prettierPluginBabel from "https://unpkg.com/prettier@3.2.2/plugins/babel.mjs";
+  import prettierPluginEstree from "https://unpkg.com/prettier@3.2.2/plugins/estree.mjs";
+  import prettierPluginHtml from "https://unpkg.com/prettier@3.2.2/plugins/html.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {

website/versioned_docs/version-stable/plugins.md

@@ -50,6 +50,7 @@ Strings provided to `plugins` are ultimately passed to [`import()` expression](h
 - [`prettier-plugin-astro`](https://github.com/withastro/prettier-plugin-astro) by [**@withastro contributors**](https://github.com/withastro/prettier-plugin-astro/graphs/contributors)
 - [`prettier-plugin-elm`](https://github.com/gicentre/prettier-plugin-elm) by [**@giCentre**](https://github.com/gicentre)
 - [`prettier-plugin-erb`](https://github.com/adamzapasnik/prettier-plugin-erb) by [**@adamzapasnik**](https://github.com/adamzapasnik)
+- [`prettier-plugin-gherkin`](https://github.com/mapado/prettier-plugin-gherkin) by [**@mapado**](https://github.com/mapado)
 - [`prettier-plugin-glsl`](https://github.com/NaridaL/glsl-language-toolkit/tree/main/packages/prettier-plugin-glsl) by [**@NaridaL**](https://github.com/NaridaL)
 - [`prettier-plugin-go-template`](https://github.com/NiklasPor/prettier-plugin-go-template) by [**@NiklasPor**](https://github.com/NiklasPor)
 - [`prettier-plugin-java`](https://github.com/jhipster/prettier-java) by [**@JHipster**](https://github.com/jhipster)

yarn.lock

@@ -7317,12 +7317,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:3.2.0":
-  version: 3.2.0
-  resolution: "prettier@npm:3.2.0"
+"prettier@npm:3.2.1":
+  version: 3.2.1
+  resolution: "prettier@npm:3.2.1"
   bin:
     prettier: bin/prettier.cjs
-  checksum: eb2eb63038ca9aaf86bda7dc49b879a278bc8344d28236fef08a8f185e8ce721a40155acc4a494e8f91ecbcdd9a132fd326516f791c61cbfa9037c1f74d6d029
+  checksum: a26d26a74ba5cbf23a9741074ceef4f53a08ced03c42449dc9615ecd08ada9d19d5247ad2b0dfb15b2c8e57ec9f516074627b85b9f03270b08c184c64e7d8f64
   languageName: node
   linkType: hard
 
@@ -7431,7 +7431,7 @@ __metadata:
     postcss-scss: "npm:4.0.9"
     postcss-selector-parser: "npm:2.2.3"
     postcss-values-parser: "npm:2.0.1"
-    prettier: "npm:3.2.0"
+    prettier: "npm:3.2.1"
     pretty-bytes: "npm:6.1.1"
     regexp-util: "npm:2.0.0"
     remark-footnotes: "npm:2.0.0"