Unquote keys in import attributes (#15888)

Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/javascript/15888.md

@@ -0,0 +1,13 @@
+#### Unquote keys in import attributes (#15888 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+import json from "./mod.json" with { "type": "json" };
+
+// Prettier stable
+import json from "./mod.json" with { "type": "json" };
+
+// Prettier main
+import json from "./mod.json" with { type: "json" };
+```

src/language-js/clean.js

@@ -79,7 +79,8 @@ function clean(original, cloned, parent) {
       original.type === "PropertyDefinition" ||
       original.type === "TSDeclareMethod" ||
       original.type === "TSPropertySignature" ||
-      original.type === "ObjectTypeProperty") &&
+      original.type === "ObjectTypeProperty" ||
+      original.type === "ImportAttribute") &&
     typeof original.key === "object" &&
     original.key &&
     (original.key.type === "Literal" ||

src/language-js/print/estree.js

@@ -228,7 +228,7 @@ function printEstree(path, options, print, args) {
     case "ExportDefaultSpecifier":
       return printModuleSpecifier(path, options, print);
     case "ImportAttribute":
-      return [print("key"), ": ", print("value")];
+      return printProperty(path, options, print);
     case "Import":
       return "import";
 

src/language-js/print/property.js

@@ -26,7 +26,8 @@ function printPropertyKey(path, options, print) {
     const objectHasStringProp = (
       parent.properties ||
       parent.body ||
-      parent.members
+      parent.members ||
+      parent.attributes
     ).some(
       (prop) =>
         !prop.computed &&

src/language-js/utils/index.js

@@ -616,6 +616,7 @@ function isStringPropSafeToUnquote(node, options) {
       )) ||
       (isSimpleNumber(node.key.value) &&
         String(Number(node.key.value)) === node.key.value &&
+        node.type !== "ImportAttribute" &&
         (options.parser === "babel" ||
           options.parser === "acorn" ||
           options.parser === "espree" ||

tests/format/js/import-attributes/__snapshots__/jsfmt.spec.js.snap

@@ -24,6 +24,84 @@ exports[`dynamic-import.js [meriyah] format 1`] = `
 Cause: [1:20]: Expected ')'"
 `;
 
+exports[`dynamic-import.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:20)
+> 1 | import("./foo.json", { with: { type: "json" } });
+    |                    ^
+  2 |
+Cause: Unexpected token (1:19)"
+`;
+
+exports[`dynamic-import.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token , (1:20)
+> 1 | import("./foo.json", { with: { type: "json" } });
+    |                    ^
+  2 |
+Cause: Unexpected token ,"
+`;
+
+exports[`dynamic-import.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Expected ')' (1:20)
+> 1 | import("./foo.json", { with: { type: "json" } });
+    |                    ^
+  2 |
+Cause: [1:20]: Expected ')'"
+`;
+
+exports[`dynamic-import.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+import("./foo.json", { with: { type: "json" } });
+
+=====================================output=====================================
+import("./foo.json", { with: { type: "json" } });
+
+================================================================================
+`;
+
+exports[`dynamic-import.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:20)
+> 1 | import("./foo.json", { with: { type: "json" } });
+    |                    ^
+  2 |
+Cause: Unexpected token (1:19)"
+`;
+
+exports[`dynamic-import.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token , (1:20)
+> 1 | import("./foo.json", { with: { type: "json" } });
+    |                    ^
+  2 |
+Cause: Unexpected token ,"
+`;
+
+exports[`dynamic-import.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Expected ')' (1:20)
+> 1 | import("./foo.json", { with: { type: "json" } });
+    |                    ^
+  2 |
+Cause: [1:20]: Expected ')'"
+`;
+
+exports[`dynamic-import.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+import("./foo.json", { with: { type: "json" } });
+
+=====================================output=====================================
+import("./foo.json", { with: { type: "json" } });
+
+================================================================================
+`;
+
 exports[`dynamic-import.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]
@@ -71,6 +149,126 @@ exports[`empty.js [meriyah] format 1`] = `
 Cause: [2:36]: Unexpected token: 'with'"
 `;
 
+exports[`empty.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (2:33)
+  1 | export * as foo from "foo.json"
+> 2 | export * as bar from "bar.json" with { }
+    |                                 ^
+  3 | export * as baz from "baz.json" with { /* comment */ }
+  4 |
+  5 | import * as foo from "foo.json"
+Cause: Unexpected token (2:32)"
+`;
+
+exports[`empty.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (2:33)
+  1 | export * as foo from "foo.json"
+> 2 | export * as bar from "bar.json" with { }
+    |                                 ^
+  3 | export * as baz from "baz.json" with { /* comment */ }
+  4 |
+  5 | import * as foo from "foo.json"
+Cause: Unexpected token with"
+`;
+
+exports[`empty.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (2:36)
+  1 | export * as foo from "foo.json"
+> 2 | export * as bar from "bar.json" with { }
+    |                                    ^
+  3 | export * as baz from "baz.json" with { /* comment */ }
+  4 |
+  5 | import * as foo from "foo.json"
+Cause: [2:36]: Unexpected token: 'with'"
+`;
+
+exports[`empty.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+export * as foo from "foo.json"
+export * as bar from "bar.json" with { }
+export * as baz from "baz.json" with { /* comment */ }
+
+import * as foo from "foo.json"
+import * as bar from "bar.json" with { }
+import * as baz from "baz.json" with { /* comment */ }
+
+=====================================output=====================================
+export * as foo from "foo.json";
+export * as bar from "bar.json" with {};
+export * as baz from "baz.json" /* comment */ with {};
+
+import * as foo from "foo.json";
+import * as bar from "bar.json" with {};
+import * as baz from "baz.json" /* comment */ with {};
+
+================================================================================
+`;
+
+exports[`empty.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (2:33)
+  1 | export * as foo from "foo.json"
+> 2 | export * as bar from "bar.json" with { }
+    |                                 ^
+  3 | export * as baz from "baz.json" with { /* comment */ }
+  4 |
+  5 | import * as foo from "foo.json"
+Cause: Unexpected token (2:32)"
+`;
+
+exports[`empty.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (2:33)
+  1 | export * as foo from "foo.json"
+> 2 | export * as bar from "bar.json" with { }
+    |                                 ^
+  3 | export * as baz from "baz.json" with { /* comment */ }
+  4 |
+  5 | import * as foo from "foo.json"
+Cause: Unexpected token with"
+`;
+
+exports[`empty.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (2:36)
+  1 | export * as foo from "foo.json"
+> 2 | export * as bar from "bar.json" with { }
+    |                                    ^
+  3 | export * as baz from "baz.json" with { /* comment */ }
+  4 |
+  5 | import * as foo from "foo.json"
+Cause: [2:36]: Unexpected token: 'with'"
+`;
+
+exports[`empty.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+export * as foo from "foo.json"
+export * as bar from "bar.json" with { }
+export * as baz from "baz.json" with { /* comment */ }
+
+import * as foo from "foo.json"
+import * as bar from "bar.json" with { }
+import * as baz from "baz.json" with { /* comment */ }
+
+=====================================output=====================================
+export * as foo from "foo.json";
+export * as bar from "bar.json" with {};
+export * as baz from "baz.json" /* comment */ with {};
+
+import * as foo from "foo.json";
+import * as bar from "bar.json" with {};
+import * as baz from "baz.json" /* comment */ with {};
+
+================================================================================
+`;
+
 exports[`empty.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]
@@ -127,6 +325,132 @@ exports[`keyword-detect.js [meriyah] format 1`] = `
 Cause: [1:38]: Unexpected token: 'with'"
 `;
 
+exports[`keyword-detect.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:35)
+> 1 | import "./test.json" /* assert */ with /* assert */  { type: "json" }
+    |                                   ^
+  2 | import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+  3 | import "./test.json" /* with */ assert /* with */  { type: "json" }
+  4 | import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+Cause: Unexpected token (1:34)"
+`;
+
+exports[`keyword-detect.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (1:35)
+> 1 | import "./test.json" /* assert */ with /* assert */  { type: "json" }
+    |                                   ^
+  2 | import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+  3 | import "./test.json" /* with */ assert /* with */  { type: "json" }
+  4 | import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+Cause: Unexpected token with"
+`;
+
+exports[`keyword-detect.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:38)
+> 1 | import "./test.json" /* assert */ with /* assert */  { type: "json" }
+    |                                      ^
+  2 | import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+  3 | import "./test.json" /* with */ assert /* with */  { type: "json" }
+  4 | import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+Cause: [1:38]: Unexpected token: 'with'"
+`;
+
+exports[`keyword-detect.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+import "./test.json" /* assert */ with /* assert */  { type: "json" }
+import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+import "./test.json" /* with */ assert /* with */  { type: "json" }
+import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+
+export {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+export {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+
+export * from "./test.json" /* assert */ with /* assert */  { type: "json" }
+export * from "./test.json" /* with */ assert /* with */  { type: "json" }
+
+=====================================output=====================================
+import "./test.json" /* assert */ /* assert */ with { type: "json" };
+import {} from "./test.json" /* assert */ /* assert */ with { type: "json" };
+import "./test.json" /* with */ /* with */ assert { type: "json" };
+import {} from "./test.json" /* with */ /* with */ assert { type: "json" };
+
+export {} from "./test.json" /* assert */ /* assert */ with { type: "json" };
+export {} from "./test.json" /* with */ /* with */ assert { type: "json" };
+
+export * from "./test.json" /* assert */ /* assert */ with { type: "json" };
+export * from "./test.json" /* with */ /* with */ assert { type: "json" };
+
+================================================================================
+`;
+
+exports[`keyword-detect.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:35)
+> 1 | import "./test.json" /* assert */ with /* assert */  { type: "json" }
+    |                                   ^
+  2 | import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+  3 | import "./test.json" /* with */ assert /* with */  { type: "json" }
+  4 | import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+Cause: Unexpected token (1:34)"
+`;
+
+exports[`keyword-detect.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (1:35)
+> 1 | import "./test.json" /* assert */ with /* assert */  { type: "json" }
+    |                                   ^
+  2 | import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+  3 | import "./test.json" /* with */ assert /* with */  { type: "json" }
+  4 | import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+Cause: Unexpected token with"
+`;
+
+exports[`keyword-detect.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:38)
+> 1 | import "./test.json" /* assert */ with /* assert */  { type: "json" }
+    |                                      ^
+  2 | import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+  3 | import "./test.json" /* with */ assert /* with */  { type: "json" }
+  4 | import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+Cause: [1:38]: Unexpected token: 'with'"
+`;
+
+exports[`keyword-detect.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+import "./test.json" /* assert */ with /* assert */  { type: "json" }
+import {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+import "./test.json" /* with */ assert /* with */  { type: "json" }
+import {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+
+export {} from "./test.json" /* assert */ with /* assert */  { type: "json" }
+export {} from "./test.json" /* with */ assert /* with */  { type: "json" }
+
+export * from "./test.json" /* assert */ with /* assert */  { type: "json" }
+export * from "./test.json" /* with */ assert /* with */  { type: "json" }
+
+=====================================output=====================================
+import "./test.json" /* assert */ /* assert */ with { type: "json" };
+import {} from "./test.json" /* assert */ /* assert */ with { type: "json" };
+import "./test.json" /* with */ /* with */ assert { type: "json" };
+import {} from "./test.json" /* with */ /* with */ assert { type: "json" };
+
+export {} from "./test.json" /* assert */ /* assert */ with { type: "json" };
+export {} from "./test.json" /* with */ /* with */ assert { type: "json" };
+
+export * from "./test.json" /* assert */ /* assert */ with { type: "json" };
+export * from "./test.json" /* with */ /* with */ assert { type: "json" };
+
+================================================================================
+`;
+
 exports[`keyword-detect.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]
@@ -183,6 +507,84 @@ exports[`multi-types.js [meriyah] format 1`] = `
 Cause: [1:34]: Unexpected token: 'with'"
 `;
 
+exports[`multi-types.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:31)
+> 1 | import json from "./foo.json" with { type: "json", type: "bar" };
+    |                               ^
+  2 |
+Cause: Unexpected token (1:30)"
+`;
+
+exports[`multi-types.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (1:31)
+> 1 | import json from "./foo.json" with { type: "json", type: "bar" };
+    |                               ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`multi-types.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:34)
+> 1 | import json from "./foo.json" with { type: "json", type: "bar" };
+    |                                  ^
+  2 |
+Cause: [1:34]: Unexpected token: 'with'"
+`;
+
+exports[`multi-types.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+import json from "./foo.json" with { type: "json", type: "bar" };
+
+=====================================output=====================================
+import json from "./foo.json" with { type: "json", type: "bar" };
+
+================================================================================
+`;
+
+exports[`multi-types.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:31)
+> 1 | import json from "./foo.json" with { type: "json", type: "bar" };
+    |                               ^
+  2 |
+Cause: Unexpected token (1:30)"
+`;
+
+exports[`multi-types.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (1:31)
+> 1 | import json from "./foo.json" with { type: "json", type: "bar" };
+    |                               ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`multi-types.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:34)
+> 1 | import json from "./foo.json" with { type: "json", type: "bar" };
+    |                                  ^
+  2 |
+Cause: [1:34]: Unexpected token: 'with'"
+`;
+
+exports[`multi-types.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+import json from "./foo.json" with { type: "json", type: "bar" };
+
+=====================================output=====================================
+import json from "./foo.json" with { type: "json", type: "bar" };
+
+================================================================================
+`;
+
 exports[`multi-types.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]
@@ -221,6 +623,84 @@ exports[`non-type.js [meriyah] format 1`] = `
 Cause: [1:31]: Unexpected token: 'with'"
 `;
 
+exports[`non-type.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:28)
+> 1 | import foo from "foo.json" with { lazy: "true" };
+    |                            ^
+  2 |
+Cause: Unexpected token (1:27)"
+`;
+
+exports[`non-type.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (1:28)
+> 1 | import foo from "foo.json" with { lazy: "true" };
+    |                            ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`non-type.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:31)
+> 1 | import foo from "foo.json" with { lazy: "true" };
+    |                               ^
+  2 |
+Cause: [1:31]: Unexpected token: 'with'"
+`;
+
+exports[`non-type.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+import foo from "foo.json" with { lazy: "true" };
+
+=====================================output=====================================
+import foo from "foo.json" with { lazy: "true" };
+
+================================================================================
+`;
+
+exports[`non-type.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:28)
+> 1 | import foo from "foo.json" with { lazy: "true" };
+    |                            ^
+  2 |
+Cause: Unexpected token (1:27)"
+`;
+
+exports[`non-type.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (1:28)
+> 1 | import foo from "foo.json" with { lazy: "true" };
+    |                            ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`non-type.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:31)
+> 1 | import foo from "foo.json" with { lazy: "true" };
+    |                               ^
+  2 |
+Cause: [1:31]: Unexpected token: 'with'"
+`;
+
+exports[`non-type.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+import foo from "foo.json" with { lazy: "true" };
+
+=====================================output=====================================
+import foo from "foo.json" with { lazy: "true" };
+
+================================================================================
+`;
+
 exports[`non-type.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]
@@ -235,6 +715,194 @@ import foo from "foo.json" with { lazy: "true" };
 ================================================================================
 `;
 
+exports[`quoted-keys.js [acorn] format 1`] = `
+"Unexpected token (1:29)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                             ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: Unexpected token (1:28)"
+`;
+
+exports[`quoted-keys.js [espree] format 1`] = `
+"Unexpected token with (1:29)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                             ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: Unexpected token with"
+`;
+
+exports[`quoted-keys.js [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:32)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                                ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: [1:32]: Unexpected token: 'with'"
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:29)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                             ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: Unexpected token (1:28)"
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (1:29)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                             ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: Unexpected token with"
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:32)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                                ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: [1:32]: Unexpected token: 'with'"
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+import json from './mod.js' with { "type":"json" };
+import json from './mod.js' with { "foobar":"json" };
+import json from './mod.js' with { "type-foo" :"json" };
+import json from './mod.js' with { "333foo" :"json" };
+import json from './mod.js' with { "0" :"json" };
+import json from './mod.js' with { "0n" :"json" };
+import json from './mod.js' with { "33333" :"json" };
+import json from './mod.js' with { "33333n" :"json" };
+import json from './mod.js' with { "33333b" :"json" };
+import json from './mod.js' with { "03333" :"json" };
+
+=====================================output=====================================
+import json from "./mod.js" with { type: "json" };
+import json from "./mod.js" with { foobar: "json" };
+import json from "./mod.js" with { "type-foo": "json" };
+import json from "./mod.js" with { "333foo": "json" };
+import json from "./mod.js" with { "0": "json" };
+import json from "./mod.js" with { "0n": "json" };
+import json from "./mod.js" with { "33333": "json" };
+import json from "./mod.js" with { "33333n": "json" };
+import json from "./mod.js" with { "33333b": "json" };
+import json from "./mod.js" with { "03333": "json" };
+
+================================================================================
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:29)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                             ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: Unexpected token (1:28)"
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (1:29)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                             ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: Unexpected token with"
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:32)
+> 1 | import json from './mod.js' with { "type":"json" };
+    |                                ^
+  2 | import json from './mod.js' with { "foobar":"json" };
+  3 | import json from './mod.js' with { "type-foo" :"json" };
+  4 | import json from './mod.js' with { "333foo" :"json" };
+Cause: [1:32]: Unexpected token: 'with'"
+`;
+
+exports[`quoted-keys.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+import json from './mod.js' with { "type":"json" };
+import json from './mod.js' with { "foobar":"json" };
+import json from './mod.js' with { "type-foo" :"json" };
+import json from './mod.js' with { "333foo" :"json" };
+import json from './mod.js' with { "0" :"json" };
+import json from './mod.js' with { "0n" :"json" };
+import json from './mod.js' with { "33333" :"json" };
+import json from './mod.js' with { "33333n" :"json" };
+import json from './mod.js' with { "33333b" :"json" };
+import json from './mod.js' with { "03333" :"json" };
+
+=====================================output=====================================
+import json from "./mod.js" with { "type": "json" };
+import json from "./mod.js" with { "foobar": "json" };
+import json from "./mod.js" with { "type-foo": "json" };
+import json from "./mod.js" with { "333foo": "json" };
+import json from "./mod.js" with { "0": "json" };
+import json from "./mod.js" with { "0n": "json" };
+import json from "./mod.js" with { "33333": "json" };
+import json from "./mod.js" with { "33333n": "json" };
+import json from "./mod.js" with { "33333b": "json" };
+import json from "./mod.js" with { "03333": "json" };
+
+================================================================================
+`;
+
+exports[`quoted-keys.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+import json from './mod.js' with { "type":"json" };
+import json from './mod.js' with { "foobar":"json" };
+import json from './mod.js' with { "type-foo" :"json" };
+import json from './mod.js' with { "333foo" :"json" };
+import json from './mod.js' with { "0" :"json" };
+import json from './mod.js' with { "0n" :"json" };
+import json from './mod.js' with { "33333" :"json" };
+import json from './mod.js' with { "33333n" :"json" };
+import json from './mod.js' with { "33333b" :"json" };
+import json from './mod.js' with { "03333" :"json" };
+
+=====================================output=====================================
+import json from "./mod.js" with { type: "json" };
+import json from "./mod.js" with { foobar: "json" };
+import json from "./mod.js" with { "type-foo": "json" };
+import json from "./mod.js" with { "333foo": "json" };
+import json from "./mod.js" with { "0": "json" };
+import json from "./mod.js" with { "0n": "json" };
+import json from "./mod.js" with { "33333": "json" };
+import json from "./mod.js" with { "33333n": "json" };
+import json from "./mod.js" with { "33333b": "json" };
+import json from "./mod.js" with { "03333": "json" };
+
+================================================================================
+`;
+
 exports[`re-export.js [acorn] format 1`] = `
 "Unexpected token (1:44)
 > 1 | export { default as foo2 } from "foo.json" with { type: "json" };
@@ -265,6 +933,104 @@ exports[`re-export.js [meriyah] format 1`] = `
 Cause: [1:47]: Unexpected token: 'with'"
 `;
 
+exports[`re-export.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:44)
+> 1 | export { default as foo2 } from "foo.json" with { type: "json" };
+    |                                            ^
+  2 | export * from "foo.json" with { type: "json" };
+  3 | export * as foo3 from "foo.json" with { type: "json" };
+  4 |
+Cause: Unexpected token (1:43)"
+`;
+
+exports[`re-export.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (1:44)
+> 1 | export { default as foo2 } from "foo.json" with { type: "json" };
+    |                                            ^
+  2 | export * from "foo.json" with { type: "json" };
+  3 | export * as foo3 from "foo.json" with { type: "json" };
+  4 |
+Cause: Unexpected token with"
+`;
+
+exports[`re-export.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:47)
+> 1 | export { default as foo2 } from "foo.json" with { type: "json" };
+    |                                               ^
+  2 | export * from "foo.json" with { type: "json" };
+  3 | export * as foo3 from "foo.json" with { type: "json" };
+  4 |
+Cause: [1:47]: Unexpected token: 'with'"
+`;
+
+exports[`re-export.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+export { default as foo2 } from "foo.json" with { type: "json" };
+export * from "foo.json" with { type: "json" };
+export * as foo3 from "foo.json" with { type: "json" };
+
+=====================================output=====================================
+export { default as foo2 } from "foo.json" with { type: "json" };
+export * from "foo.json" with { type: "json" };
+export * as foo3 from "foo.json" with { type: "json" };
+
+================================================================================
+`;
+
+exports[`re-export.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:44)
+> 1 | export { default as foo2 } from "foo.json" with { type: "json" };
+    |                                            ^
+  2 | export * from "foo.json" with { type: "json" };
+  3 | export * as foo3 from "foo.json" with { type: "json" };
+  4 |
+Cause: Unexpected token (1:43)"
+`;
+
+exports[`re-export.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (1:44)
+> 1 | export { default as foo2 } from "foo.json" with { type: "json" };
+    |                                            ^
+  2 | export * from "foo.json" with { type: "json" };
+  3 | export * as foo3 from "foo.json" with { type: "json" };
+  4 |
+Cause: Unexpected token with"
+`;
+
+exports[`re-export.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:47)
+> 1 | export { default as foo2 } from "foo.json" with { type: "json" };
+    |                                               ^
+  2 | export * from "foo.json" with { type: "json" };
+  3 | export * as foo3 from "foo.json" with { type: "json" };
+  4 |
+Cause: [1:47]: Unexpected token: 'with'"
+`;
+
+exports[`re-export.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+export { default as foo2 } from "foo.json" with { type: "json" };
+export * from "foo.json" with { type: "json" };
+export * as foo3 from "foo.json" with { type: "json" };
+
+=====================================output=====================================
+export { default as foo2 } from "foo.json" with { type: "json" };
+export * from "foo.json" with { type: "json" };
+export * as foo3 from "foo.json" with { type: "json" };
+
+================================================================================
+`;
+
 exports[`re-export.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]
@@ -307,6 +1073,84 @@ exports[`static-import.js [meriyah] format 1`] = `
 Cause: [1:34]: Unexpected token: 'with'"
 `;
 
+exports[`static-import.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:31)
+> 1 | import json from "./foo.json" with { type: "json" };
+    |                               ^
+  2 |
+Cause: Unexpected token (1:30)"
+`;
+
+exports[`static-import.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (1:31)
+> 1 | import json from "./foo.json" with { type: "json" };
+    |                               ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`static-import.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:34)
+> 1 | import json from "./foo.json" with { type: "json" };
+    |                                  ^
+  2 |
+Cause: [1:34]: Unexpected token: 'with'"
+`;
+
+exports[`static-import.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+import json from "./foo.json" with { type: "json" };
+
+=====================================output=====================================
+import json from "./foo.json" with { type: "json" };
+
+================================================================================
+`;
+
+exports[`static-import.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:31)
+> 1 | import json from "./foo.json" with { type: "json" };
+    |                               ^
+  2 |
+Cause: Unexpected token (1:30)"
+`;
+
+exports[`static-import.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (1:31)
+> 1 | import json from "./foo.json" with { type: "json" };
+    |                               ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`static-import.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:34)
+> 1 | import json from "./foo.json" with { type: "json" };
+    |                                  ^
+  2 |
+Cause: [1:34]: Unexpected token: 'with'"
+`;
+
+exports[`static-import.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+import json from "./foo.json" with { type: "json" };
+
+=====================================output=====================================
+import json from "./foo.json" with { type: "json" };
+
+================================================================================
+`;
+
 exports[`static-import.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]
@@ -345,6 +1189,84 @@ exports[`without-from.js [meriyah] format 1`] = `
 Cause: [1:17]: Unexpected token: 'with'"
 `;
 
+exports[`without-from.js - {"quoteProps":"consistent"} [acorn] format 1`] = `
+"Unexpected token (1:14)
+> 1 | import "foo" with { type: "json" }
+    |              ^
+  2 |
+Cause: Unexpected token (1:13)"
+`;
+
+exports[`without-from.js - {"quoteProps":"consistent"} [espree] format 1`] = `
+"Unexpected token with (1:14)
+> 1 | import "foo" with { type: "json" }
+    |              ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`without-from.js - {"quoteProps":"consistent"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:17)
+> 1 | import "foo" with { type: "json" }
+    |                 ^
+  2 |
+Cause: [1:17]: Unexpected token: 'with'"
+`;
+
+exports[`without-from.js - {"quoteProps":"consistent"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "consistent"
+                                                                                | printWidth
+=====================================input======================================
+import "foo" with { type: "json" }
+
+=====================================output=====================================
+import "foo" with { type: "json" };
+
+================================================================================
+`;
+
+exports[`without-from.js - {"quoteProps":"preserve"} [acorn] format 1`] = `
+"Unexpected token (1:14)
+> 1 | import "foo" with { type: "json" }
+    |              ^
+  2 |
+Cause: Unexpected token (1:13)"
+`;
+
+exports[`without-from.js - {"quoteProps":"preserve"} [espree] format 1`] = `
+"Unexpected token with (1:14)
+> 1 | import "foo" with { type: "json" }
+    |              ^
+  2 |
+Cause: Unexpected token with"
+`;
+
+exports[`without-from.js - {"quoteProps":"preserve"} [meriyah] format 1`] = `
+"Unexpected token: 'with' (1:17)
+> 1 | import "foo" with { type: "json" }
+    |                 ^
+  2 |
+Cause: [1:17]: Unexpected token: 'with'"
+`;
+
+exports[`without-from.js - {"quoteProps":"preserve"} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript"]
+printWidth: 80
+quoteProps: "preserve"
+                                                                                | printWidth
+=====================================input======================================
+import "foo" with { type: "json" }
+
+=====================================output=====================================
+import "foo" with { type: "json" };
+
+================================================================================
+`;
+
 exports[`without-from.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript"]

tests/format/js/import-attributes/jsfmt.spec.js

@@ -1,34 +1,44 @@
+const errors = {
+  acorn: [
+    "dynamic-import.js",
+    "empty.js",
+    "multi-types.js",
+    "static-import.js",
+    "re-export.js",
+    "without-from.js",
+    "non-type.js",
+    "keyword-detect.js",
+    "quoted-keys.js",
+  ],
+  espree: [
+    "dynamic-import.js",
+    "empty.js",
+    "multi-types.js",
+    "static-import.js",
+    "re-export.js",
+    "without-from.js",
+    "non-type.js",
+    "keyword-detect.js",
+    "quoted-keys.js",
+  ],
+  meriyah: [
+    "dynamic-import.js",
+    "empty.js",
+    "multi-types.js",
+    "static-import.js",
+    "re-export.js",
+    "without-from.js",
+    "non-type.js",
+    "keyword-detect.js",
+    "quoted-keys.js",
+  ],
+};
+runFormatTest(import.meta, ["babel", "typescript"], { errors });
 runFormatTest(import.meta, ["babel", "typescript"], {
-  errors: {
-    acorn: [
-      "dynamic-import.js",
-      "empty.js",
-      "multi-types.js",
-      "static-import.js",
-      "re-export.js",
-      "without-from.js",
-      "non-type.js",
-      "keyword-detect.js",
-    ],
-    espree: [
-      "dynamic-import.js",
-      "empty.js",
-      "multi-types.js",
-      "static-import.js",
-      "re-export.js",
-      "without-from.js",
-      "non-type.js",
-      "keyword-detect.js",
-    ],
-    meriyah: [
-      "dynamic-import.js",
-      "empty.js",
-      "multi-types.js",
-      "static-import.js",
-      "re-export.js",
-      "without-from.js",
-      "non-type.js",
-      "keyword-detect.js",
-    ],
-  },
+  quoteProps: "consistent",
+  errors,
+});
+runFormatTest(import.meta, ["babel", "typescript"], {
+  quoteProps: "preserve",
+  errors,
 });

tests/format/js/import-attributes/quoted-keys.js

@@ -0,0 +1,10 @@
+import json from './mod.js' with { "type":"json" };
+import json from './mod.js' with { "foobar":"json" };
+import json from './mod.js' with { "type-foo" :"json" };
+import json from './mod.js' with { "333foo" :"json" };
+import json from './mod.js' with { "0" :"json" };
+import json from './mod.js' with { "0n" :"json" };
+import json from './mod.js' with { "33333" :"json" };
+import json from './mod.js' with { "33333n" :"json" };
+import json from './mod.js' with { "33333b" :"json" };
+import json from './mod.js' with { "03333" :"json" };