diff --git a/docs/bundler/loaders.mdx b/docs/bundler/loaders.mdx
index 89e8824679..bb55a49675 100644
--- a/docs/bundler/loaders.mdx
+++ b/docs/bundler/loaders.mdx
@@ -11,10 +11,12 @@ The Bun bundler implements a set of default loaders out of the box.
Bun uses the file extension to determine which built-in loader should be used to parse the file. Every loader has a name, such as `js`, `tsx`, or `json`. These names are used when building plugins that extend Bun with custom loaders.
-You can explicitly specify which loader to use using the `'loader'` import attribute.
+You can explicitly specify which loader to use using the `'type'` import attribute.
```ts title="index.ts" icon="/icons/typescript.svg"
-import my_toml from "./my_file" with { loader: "toml" };
+import my_toml from "./my_file" with { type: "toml" };
+// or with dynamic imports
+const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });
```
## Built-in loaders
@@ -117,8 +119,7 @@ var config = {
```
- Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files,
- allowing comments and trailing commas in these files.
+ Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files.
---
diff --git a/docs/runtime/file-types.mdx b/docs/runtime/file-types.mdx
index 87e8284a85..89e23779c1 100644
--- a/docs/runtime/file-types.mdx
+++ b/docs/runtime/file-types.mdx
@@ -5,14 +5,16 @@ description: "File types and loaders supported by Bun's bundler and runtime"
The Bun bundler implements a set of default loaders out of the box. As a rule of thumb, the bundler and the runtime both support the same set of file types out of the box.
-`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.toml` `.json` `.txt` `.wasm` `.node` `.html`
+`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.css` `.json` `.jsonc` `.toml` `.yaml` `.yml` `.txt` `.wasm` `.node` `.html` `.sh`
Bun uses the file extension to determine which built-in _loader_ should be used to parse the file. Every loader has a name, such as `js`, `tsx`, or `json`. These names are used when building [plugins](/bundler/plugins) that extend Bun with custom loaders.
-You can explicitly specify which loader to use using the 'loader' import attribute.
+You can explicitly specify which loader to use using the `'type'` import attribute.
```ts
-import my_toml from "./my_file" with { loader: "toml" };
+import my_toml from "./my_file" with { type: "toml" };
+// or with dynamic imports
+const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });
```
---
@@ -84,6 +86,29 @@ export default {
+### `jsonc`
+
+**JSON with Comments loader**. Default for `.jsonc`.
+
+JSONC (JSON with Comments) files can be directly imported. Bun will parse them, stripping out comments and trailing commas.
+
+```ts
+import config from "./config.jsonc";
+console.log(config);
+```
+
+During bundling, the parsed JSONC is inlined into the bundle as a JavaScript object, identical to the `json` loader.
+
+```ts
+var config = {
+ option: "value",
+};
+```
+
+
+ Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files.
+
+
### `toml`
**TOML loader**. Default for `.toml`.
@@ -128,6 +153,50 @@ export default {
+### `yaml`
+
+**YAML loader**. Default for `.yaml` and `.yml`.
+
+YAML files can be directly imported. Bun will parse them with its fast native YAML parser.
+
+```ts
+import config from "./config.yaml";
+console.log(config);
+
+// via import attribute:
+import data from "./data.txt" with { type: "yaml" };
+```
+
+During bundling, the parsed YAML is inlined into the bundle as a JavaScript object.
+
+```ts
+var config = {
+ name: "my-app",
+ version: "1.0.0",
+ // ...other fields
+};
+```
+
+If a `.yaml` or `.yml` file is passed as an entrypoint, it will be converted to a `.js` module that `export default`s the parsed object.
+
+
+
+```yaml Input
+name: John Doe
+age: 35
+email: johndoe@example.com
+```
+
+```ts Output
+export default {
+ name: "John Doe",
+ age: 35,
+ email: "johndoe@example.com",
+};
+```
+
+
+
### `text`
**Text loader**. Default for `.txt`.
@@ -283,6 +352,18 @@ The `html` loader behaves differently depending on how it's used:
+### `css`
+
+**CSS loader**. Default for `.css`.
+
+CSS files can be directly imported. This is primarily useful for [full-stack applications](/bundler/html-static) where CSS is bundled alongside HTML.
+
+```ts
+import "./styles.css";
+```
+
+There isn't any value returned from the import, it's only used for side effects.
+
### `sh` loader
**Bun Shell loader**. Default for `.sh` files