Fix formatting of docs directory. (vercel#8416)

### Description

Fixing formatting of `docs` directory.

### Testing Instructions

<!--
  Give a quick description of steps to test your changes.
-->

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "overrides": [
+    {
+      "files": ["./docs/**/*.mdx"],
+      "options": {
+        "singleQuote": true
+      }
+    }
+  ]
+}

docs/pack-docs/advanced/profiling.mdx

@@ -3,7 +3,7 @@ title: Profiling
 description: Learn how to profile Turbopack
 ---
 
-import { ThemedImageFigure } from "#/components/image/themed-image-figure";
+import { ThemedImageFigure } from '#/components/image/themed-image-figure';
 
 ## On macOS
 
@@ -32,12 +32,12 @@ Once the program exits, the profiler will open the trace file in Instruments. Re
 <ThemedImageFigure
   borderRadius={true}
   dark={{
-    source: "/images/docs/pack/instruments-dark.png",
+    source: '/images/docs/pack/instruments-dark.png',
     height: 662,
     width: 968,
   }}
   light={{
-    source: "/images/docs/pack/instruments-light.png",
+    source: '/images/docs/pack/instruments-light.png',
     height: 706,
     width: 1012,
   }}

docs/pack-docs/benchmarks.mdx

@@ -3,7 +3,7 @@ title: Benchmarks
 description: Learn more about benchmarks for Turbopack.
 ---
 
-import { Callout } from "#/components/callout";
+import { Callout } from '#/components/callout';
 
 <Callout type="info">
   Check back soon for benchmark results against real-world Next.js Applications

docs/pack-docs/features/css.mdx

@@ -3,7 +3,7 @@ title: CSS
 description: Learn more about CSS in Turbopack.
 ---
 
-import { Callout } from "#/components/callout";
+import { Callout } from '#/components/callout';
 
 CSS parsing and transformation is handled by [Lightning CSS](https://lightningcss.dev/).
 
@@ -12,15 +12,15 @@ CSS parsing and transformation is handled by [Lightning CSS](https://lightningcs
 Importing CSS into global scope is built-in in Turbopack.
 
 ```tsx title="my-file.tsx"
-import "./globals.css";
+import './globals.css';
 ```
 
 ## CSS Modules
 
 Turbopack handles CSS Modules. Any file with a `.module.css` extension will be considered a CSS module, and you can import it into a JavaScript or TypeScript file:
 
 ```tsx title="component.tsx"
-import cssExports from "./phone.module.css";
+import cssExports from './phone.module.css';
 ```
 
 This follows the same rules set out by [Next.js](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) - letting you easily distinguish between global and scoped CSS.
@@ -51,8 +51,8 @@ Turbopack handles [CSS Nesting](https://developer.mozilla.org/en-US/docs/Web/CSS
 Using the CSS `@import` syntax to import other CSS files is supported. This gives you the ability to combine several CSS files together into a single module:
 
 ```css title="globals.css"
-@import "./modal.css";
-@import "./dark.css";
+@import './modal.css';
+@import './dark.css';
 ```
 
 ## PostCSS

docs/pack-docs/features/imports.mdx

@@ -12,7 +12,7 @@ Turbopack bundles your application, so imports won't be resolved to native brows
 Turbopack supports the `require` syntax out-of-the-box:
 
 ```ts title="my-file.ts"
-const { add } = require("./math");
+const { add } = require('./math');
 
 add(1, 2);
 ```
@@ -22,11 +22,11 @@ add(1, 2);
 Importing via the `import` syntax is also supported out-of-the-box. This includes static assets, and `import type`:
 
 ```ts title="my-file.ts"
-import img from "./img.png";
+import img from './img.png';
 
-import type { User } from "../server/types";
+import type { User } from '../server/types';
 
-import { z } from "zod";
+import { z } from 'zod';
 ```
 
 ## Dynamic Imports
@@ -35,7 +35,7 @@ Turbopack supports dynamic imports via `import()`:
 
 ```ts title="my-file.ts"
 const getFeatureFlags = () => {
-  return import("/featureFlags").then((mod) => {
+  return import('/featureFlags').then((mod) => {
     return mod.featureFlags;
   });
 };

docs/pack-docs/features/index.mdx

@@ -3,7 +3,7 @@ title: Features
 description: Learn about Turbopack's supported features
 ---
 
-import { Cards, Card } from "#/components/card";
+import { Cards, Card } from '#/components/card';
 
 The practice of building web applications is enormously diverse. In CSS alone, you have SCSS, Less, CSS Modules, PostCSS, and hundreds of other libraries. Frameworks like React, Vue and Svelte require custom setups.
 

docs/pack-docs/features/javascript.mdx

@@ -3,7 +3,7 @@ title: JavaScript
 description: Learn more about JavaScript in Turbopack.
 ---
 
-import { Callout } from "#/components/callout";
+import { Callout } from '#/components/callout';
 
 ## ECMAScript Support
 

docs/pack-docs/features/static-assets.mdx

@@ -10,15 +10,15 @@ Part of bundling for the web is handling all the asset types the web supports -
 Importing static assets works out of the box with Turbopack:
 
 ```ts title="my-file.ts"
-import img from "./img.png";
+import img from './img.png';
 ```
 
 ### Next.js
 
 In webpack and some other frameworks, importing an image returns a string containing that image's URL.
 
 ```ts title="my-file.ts"
-import img from "./img.png";
+import img from './img.png';
 
 console.log(img); // /assets/static/1uahwd98h123.png
 ```
@@ -30,11 +30,11 @@ In Next.js, importing an image returns an object, containing various metadata ab
 Most frameworks allow you to import JSON directly into your application:
 
 ```ts title="my-file.ts"
-import fixtures from "./fixtures.json";
+import fixtures from './fixtures.json';
 ```
 
 This is supported out of the box with Turbopack, as is performing a named import on that JSON:
 
 ```ts title="my-file.ts"
-import { users, posts } from "./fixtures.json";
+import { users, posts } from './fixtures.json';
 ```

docs/pack-docs/index.mdx

@@ -3,8 +3,8 @@ title: Getting started
 description: Start building web applications with Turbopack.
 ---
 
-import { Callout } from "#/components/callout";
-import { PackageManagerTabs, Tab } from "#/components/tabs";
+import { Callout } from '#/components/callout';
+import { PackageManagerTabs, Tab } from '#/components/tabs';
 
 Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of webpack and [Next.js](https://nextjs.org/) at [Vercel](https://vercel.com/).
 

docs/pack-docs/migrating-from-webpack.mdx

@@ -3,7 +3,7 @@ title: Migrating from webpack to Turbopack
 description: Learn about how to migrate from webpack to its Rust-powered successor, Turbopack.
 ---
 
-import { Callout } from "#/components/callout";
+import { Callout } from '#/components/callout';
 
 We're planning Turbopack as the successor to webpack. In the future, we plan to give Turbopack all the tools needed to support your webpack app.
 

docs/repo-docs/core-concepts/index.mdx

@@ -3,7 +3,7 @@ title: Core concepts
 description: Learn about the core concepts behind Turborepo.
 ---
 
-import { Card, Cards } from "#/components/card";
+import { Card, Cards } from '#/components/card';
 
 Learn more about the core concepts of Turborepo:
 

docs/repo-docs/core-concepts/internal-packages.mdx

@@ -3,7 +3,7 @@ title: Internal Packages
 description: Learn how to build Internal Packages in your monorepo.
 ---
 
-import { PackageManagerTabs, Tab } from "#/components/tabs";
+import { PackageManagerTabs, Tab } from '#/components/tabs';
 
 Internal Packages are libraries whose source code is inside your Workspace. You can quickly make Internal Packages to share code within your monorepo and choose to [publish them to the npm registry](/repo/docs/guides/publishing-libraries) if you need to later.
 
@@ -46,7 +46,7 @@ In the [Creating an Internal Package guide](/repo/docs/crafting-your-repository/
 You can then import the package into your code like you're used to doing with an external package:
 
 ```tsx title="./apps/web/app/page.tsx"
-import { Button } from "@repo/ui"; // [!code highlight]
+import { Button } from '@repo/ui'; // [!code highlight]
 
 export default function Page() {
   return <Button>Submit</Button>;

docs/repo-docs/core-concepts/package-and-task-graph.mdx

@@ -3,7 +3,7 @@ title: Package and Task Graphs
 description: Turborepo builds a Task Graph based on your configuration and repository structure.
 ---
 
-import { File, Folder, Files } from "#/components/files";
+import { File, Folder, Files } from '#/components/files';
 
 ## Package Graph
 

docs/repo-docs/core-concepts/package-types.mdx

@@ -3,7 +3,7 @@ title: Package types
 description: Learn about the different types of packages in a workspace.
 ---
 
-import { Callout } from "#/components/callout";
+import { Callout } from '#/components/callout';
 
 In Turborepo, we talk about two types of packages:
 

docs/repo-docs/core-concepts/remote-caching.mdx

@@ -3,26 +3,26 @@ title: Remote Caching
 description: Share cache artifacts across machines for even faster builds.
 ---
 
-import { Callout } from "#/components/callout";
-import { PlatformTabs, PackageManagerTabs, Tab } from "#/components/tabs";
-import { ThemeAwareImage } from "#/components/theme-aware-image";
+import { Callout } from '#/components/callout';
+import { PlatformTabs, PackageManagerTabs, Tab } from '#/components/tabs';
+import { ThemeAwareImage } from '#/components/theme-aware-image';
 
 Turborepo's [task cache](/repo/docs/crafting-your-repository/caching) saves time by never doing the same work twice.
 
 But there's a problem: **the cache is local to your machine**. When you're working with a Continuous Integration system, this can result in a lot of duplicated work:
 
 <ThemeAwareImage
   dark={{
-    alt: "Local caching creates a cache on each system.",
-    src: "/images/docs/local-caching-dark.png",
+    alt: 'Local caching creates a cache on each system.',
+    src: '/images/docs/local-caching-dark.png',
     props: {
       width: 896,
       height: 345,
     },
   }}
   light={{
-    alt: "Local caching creates a cache on each system.",
-    src: "/images/docs/local-caching-light.png",
+    alt: 'Local caching creates a cache on each system.',
+    src: '/images/docs/local-caching-light.png',
     props: {
       width: 896,
       height: 345,
@@ -44,16 +44,16 @@ What if you could share a single Turborepo cache across your entire team (and ev
 
 <ThemeAwareImage
   dark={{
-    alt: "Remote caching creates a shared cache for your entire team.",
-    src: "/images/docs/remote-caching-dark.png",
+    alt: 'Remote caching creates a shared cache for your entire team.',
+    src: '/images/docs/remote-caching-dark.png',
     props: {
       width: 896,
       height: 489,
     },
   }}
   light={{
-    alt: "Remote caching creates a shared cache for your entire team.",
-    src: "/images/docs/remote-caching-light.png",
+    alt: 'Remote caching creates a shared cache for your entire team.',
+    src: '/images/docs/remote-caching-light.png',
     props: {
       width: 896,
       height: 489,

docs/repo-docs/crafting-your-repository/caching.mdx

@@ -3,9 +3,9 @@ title: Caching
 description: Learn about caching in Turborepo.
 ---
 
-import { Step, Steps } from "#/components/steps";
-import { PackageManagerTabs, Tab } from "#/components/tabs";
-import { Callout } from "#/components/callout";
+import { Step, Steps } from '#/components/steps';
+import { PackageManagerTabs, Tab } from '#/components/tabs';
+import { Callout } from '#/components/callout';
 
 Turborepo uses caching to speed up builds, ensuring you **never do the same work twice**. When your task is cacheable, Turborepo will restore the results of your task from cache using a fingerprint from the first time the task was ran.
 

docs/repo-docs/crafting-your-repository/configuring-tasks.mdx

@@ -3,28 +3,28 @@ title: Configuring tasks
 description: Learn how to describe the workflows in your repository to get them done as fast as possible.
 ---
 
-import { LinkToDocumentation } from "#/components/link-to-documentation";
-import { Callout } from "#/components/callout";
-import { Tabs, Tab } from "#/components/tabs";
-import { Files, File, Folder } from "#/components/files";
-import { ThemeAwareImage } from "#/components/theme-aware-image";
+import { LinkToDocumentation } from '#/components/link-to-documentation';
+import { Callout } from '#/components/callout';
+import { Tabs, Tab } from '#/components/tabs';
+import { Files, File, Folder } from '#/components/files';
+import { ThemeAwareImage } from '#/components/theme-aware-image';
 
 Turborepo will always run tasks in the order described in your [`turbo.json` configuration](/repo/docs/reference/configuration) and [Package Graph](/repo/docs/core-concepts/package-and-task-graph#package-graph), parallelizing work whenever possible to ensure everything runs as fast as possible. This is faster than running tasks one at a time, and it's a part of what makes Turborepo so fast.
 
 For example, <code style={{textWrap: "wrap"}}>yarn workspaces run lint && yarn workspaces run test && yarn workspaces run build</code> would look like this:
 
 <ThemeAwareImage
   dark={{
-    alt: "A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.",
-    src: "/images/docs/slow-tasks-dark.png",
+    alt: 'A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.',
+    src: '/images/docs/slow-tasks-dark.png',
     props: {
       width: 778,
       height: 331,
     },
   }}
   light={{
-    alt: "A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.",
-    src: "/images/docs/slow-tasks-light.png",
+    alt: 'A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.',
+    src: '/images/docs/slow-tasks-light.png',
     props: {
       width: 778,
       height: 331,
@@ -36,16 +36,16 @@ But, to get the same work done **faster** with Turborepo, you can use `turbo run
 
 <ThemeAwareImage
   dark={{
-    alt: "A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.",
-    src: "/images/docs/turborepo-tasks-fast-dark.png",
+    alt: 'A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.',
+    src: '/images/docs/turborepo-tasks-fast-dark.png',
     props: {
       width: 778,
       height: 448,
     },
   }}
   light={{
-    alt: "A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.",
-    src: "/images/docs/turborepo-tasks-fast-light.png",
+    alt: 'A graphical representation of `turbo run lint test build`. It shows all tasks running in parallel, with much less empty space where scripts are not being ran.',
+    src: '/images/docs/turborepo-tasks-fast-light.png',
     props: {
       width: 778,
       height: 448,

docs/repo-docs/crafting-your-repository/constructing-ci.mdx

@@ -3,9 +3,9 @@ title: Constructing CI
 description: Learn how Turborepo can help you efficiently complete all the necessary tasks and accelerate your development workflow.
 ---
 
-import { Callout } from "#/components/callout";
-import { Tabs, Tab } from "#/components/tabs";
-import { Step, Steps } from "#/components/steps";
+import { Callout } from '#/components/callout';
+import { Tabs, Tab } from '#/components/tabs';
+import { Step, Steps } from '#/components/steps';
 
 Turborepo speeds up builds, lints, tests, and any other tasks that you need to do in your Continuous Integration pipelines. Through parallelization and [Remote Caching](/repo/docs/core-concepts/remote-caching), Turborepo makes your CI dramatically faster.
 

docs/repo-docs/crafting-your-repository/creating-an-internal-package.mdx

@@ -3,10 +3,10 @@ title: Creating an Internal Package
 description: Learn how to create an Internal Package for your monorepo.
 ---
 
-import { Callout } from "#/components/callout";
-import { Steps, Step } from "#/components/steps";
-import { PackageManagerTabs, Tabs, Tab } from "#/components/tabs";
-import { Files, File, Folder } from "#/components/files";
+import { Callout } from '#/components/callout';
+import { Steps, Step } from '#/components/steps';
+import { PackageManagerTabs, Tabs, Tab } from '#/components/tabs';
+import { Files, File, Folder } from '#/components/files';
 
 [Internal Packages](/repo/docs/core-concepts/internal-packages) are the building blocks of your workspace, giving you a powerful way to share code and functionality across your repo. Turborepo automatically understands the relationships between Internal Packages using the dependencies in `package.json`, creating a [Package Graph](/repo/docs/core-concepts/package-and-task-graph#package-graph) under the hood to optimize your repository's workflows.
 
@@ -241,7 +241,7 @@ You're ready to use your new package in an application. Let's add it to the `web
 `@repo/math` is now available in the `web` application, you can use it in your code:
 
 ```tsx title="apps/web/src/app/page.tsx"
-import { add } from "@repo/math/add";
+import { add } from '@repo/math/add';
 
 function Page() {
   return <div>{add(1, 2)}</div>;