bun-types 1.2.5-canary.20250306T140602 → 1.2.5-canary.20250307T140650
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/api/fetch.md +1 -1
- package/docs/api/spawn.md +1 -1
- package/docs/bundler/css.md +1028 -0
- package/docs/bundler/css_modules.md +145 -0
- package/docs/bundler/fullstack.md +0 -1
- package/docs/bundler/loaders.md +6 -0
- package/docs/cli/publish.md +1 -1
- package/docs/guides/ecosystem/nuxt.md +1 -1
- package/docs/guides/install/add-peer.md +2 -2
- package/docs/guides/install/from-npm-install-to-bun-install.md +1 -1
- package/docs/guides/test/run-tests.md +3 -3
- package/docs/guides/test/snapshot.md +3 -3
- package/docs/guides/test/update-snapshots.md +1 -1
- package/docs/guides/util/version.md +1 -1
- package/docs/installation.md +4 -4
- package/docs/runtime/debugger.md +3 -3
- package/docs/test/dom.md +1 -1
- package/package.json +1 -1
- package/test.d.ts +7 -1
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# CSS Modules
|
|
2
|
+
|
|
3
|
+
Bun's bundler also supports bundling [CSS modules](https://css-tricks.com/css-modules-part-1-need/) in addition to [regular CSS](/docs/bundler/css) with support for the following features:
|
|
4
|
+
|
|
5
|
+
- Automatically detecting CSS module files (`.module.css`) with zero configuration
|
|
6
|
+
- Composition (`composes` property)
|
|
7
|
+
- Importing CSS modules into JSX/TSX
|
|
8
|
+
- Warnings/errors for invalid usages of CSS modules
|
|
9
|
+
|
|
10
|
+
A CSS module is a CSS file (with the `.module.css` extension) where are all class names and animations are scoped to the file. This helps you avoid class name collisions as CSS declarations are globally scoped by default.
|
|
11
|
+
|
|
12
|
+
Under the hood, Bun's bundler transforms locally scoped class names into unique identifiers.
|
|
13
|
+
|
|
14
|
+
## Getting started
|
|
15
|
+
|
|
16
|
+
Create a CSS file with the `.module.css` extension:
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
/* styles.module.css */
|
|
20
|
+
.button {
|
|
21
|
+
color: red;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* other-styles.module.css */
|
|
25
|
+
.button {
|
|
26
|
+
color: blue;
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
You can then import this file, for example into a TSX file:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import styles from "./styles.module.css";
|
|
34
|
+
import otherStyles from "./other-styles.module.css";
|
|
35
|
+
|
|
36
|
+
export default function App() {
|
|
37
|
+
return (
|
|
38
|
+
<>
|
|
39
|
+
<button className={styles.button}>Red button!</button>
|
|
40
|
+
<button className={otherStyles.button}>Blue button!</button>
|
|
41
|
+
</>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
The `styles` object from importing the CSS module file will be an object with all class names as keys and
|
|
47
|
+
their unique identifiers as values:
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import styles from "./styles.module.css";
|
|
51
|
+
import otherStyles from "./other-styles.module.css";
|
|
52
|
+
|
|
53
|
+
console.log(styles);
|
|
54
|
+
console.log(otherStyles);
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
This will output:
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
{
|
|
61
|
+
button: "button_123";
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
{
|
|
65
|
+
button: "button_456";
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
As you can see, the class names are unique to each file, avoiding any collisions!
|
|
70
|
+
|
|
71
|
+
### Composition
|
|
72
|
+
|
|
73
|
+
CSS modules allow you to _compose_ class selectors together. This lets you reuse style rules across multiple classes.
|
|
74
|
+
|
|
75
|
+
For example:
|
|
76
|
+
|
|
77
|
+
```css
|
|
78
|
+
/* styles.module.css */
|
|
79
|
+
.button {
|
|
80
|
+
composes: background;
|
|
81
|
+
color: red;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.background {
|
|
85
|
+
background-color: blue;
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Would be the same as writing:
|
|
90
|
+
|
|
91
|
+
```css
|
|
92
|
+
.button {
|
|
93
|
+
background-color: blue;
|
|
94
|
+
color: red;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.background {
|
|
98
|
+
background-color: blue;
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
{% callout %}
|
|
103
|
+
There are a couple rules to keep in mind when using `composes`:
|
|
104
|
+
|
|
105
|
+
- A `composes` property must come before any regular CSS properties or declarations
|
|
106
|
+
- You can only use `composes` on a **simple selector with a single class name**:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
#button {
|
|
110
|
+
/* Invalid! `#button` is not a class selector */
|
|
111
|
+
composes: background;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.button,
|
|
115
|
+
.button-secondary {
|
|
116
|
+
/* Invalid! `.button, .button-secondary` is not a simple selector */
|
|
117
|
+
composes: background;
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
{% /callout %}
|
|
122
|
+
|
|
123
|
+
### Composing from a separate CSS module file
|
|
124
|
+
|
|
125
|
+
You can also compose from a separate CSS module file:
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
/* background.module.css */
|
|
129
|
+
.background {
|
|
130
|
+
background-color: blue;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* styles.module.css */
|
|
134
|
+
.button {
|
|
135
|
+
composes: background from "./background.module.css";
|
|
136
|
+
color: red;
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
{% callout %}
|
|
141
|
+
When composing classes from separate files, be sure that they do not contain the same properties.
|
|
142
|
+
|
|
143
|
+
The CSS module spec says that composing classes from separate files with conflicting properties is
|
|
144
|
+
undefined behavior, meaning that the output may differ and be unreliable.
|
|
145
|
+
{% /callout %}
|
|
@@ -309,5 +309,4 @@ This works similarly to how [`Bun.build` processes HTML files](/docs/bundler/htm
|
|
|
309
309
|
|
|
310
310
|
## This is a work in progress
|
|
311
311
|
|
|
312
|
-
- ~Client-side hot reloading isn't wired up yet. It will be in the future.~ New in Bun v1.2.3
|
|
313
312
|
- This doesn't support `bun build` yet. It also will in the future.
|
package/docs/bundler/loaders.md
CHANGED
|
@@ -4,6 +4,12 @@ The Bun bundler implements a set of default loaders out of the box. As a rule of
|
|
|
4
4
|
|
|
5
5
|
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](https://bun.sh/docs/bundler/plugins) that extend Bun with custom loaders.
|
|
6
6
|
|
|
7
|
+
You can explicitly specify which loader to use using the 'loader' import attribute.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import my_toml from "./my_file" with { loader: "toml" };
|
|
11
|
+
```
|
|
12
|
+
|
|
7
13
|
## Built-in loaders
|
|
8
14
|
|
|
9
15
|
### `js`
|
package/docs/cli/publish.md
CHANGED
|
@@ -9,7 +9,7 @@ $ bunx nuxi init my-nuxt-app
|
|
|
9
9
|
✔ Which package manager would you like to use?
|
|
10
10
|
bun
|
|
11
11
|
◐ Installing dependencies...
|
|
12
|
-
bun install v1.2.5-canary.
|
|
12
|
+
bun install v1.2.5-canary.20250307T140650 (16b4bf34)
|
|
13
13
|
+ @nuxt/devtools@0.8.2
|
|
14
14
|
+ nuxt@3.7.0
|
|
15
15
|
785 packages installed [2.67s]
|
|
@@ -16,7 +16,7 @@ This will add the package to `peerDependencies` in `package.json`.
|
|
|
16
16
|
```json-diff
|
|
17
17
|
{
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
+ "@types/bun": "^1.2.5-canary.
|
|
19
|
+
+ "@types/bun": "^1.2.5-canary.20250307T140650"
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
```
|
|
@@ -28,7 +28,7 @@ Running `bun install` will install peer dependencies by default, unless marked o
|
|
|
28
28
|
```json-diff
|
|
29
29
|
{
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@types/bun": "^1.2.5-canary.
|
|
31
|
+
"@types/bun": "^1.2.5-canary.20250307T140650"
|
|
32
32
|
},
|
|
33
33
|
"peerDependenciesMeta": {
|
|
34
34
|
+ "@types/bun": {
|
|
@@ -97,7 +97,7 @@ $ bun update
|
|
|
97
97
|
$ bun update @types/bun --latest
|
|
98
98
|
|
|
99
99
|
# Update a dependency to a specific version
|
|
100
|
-
$ bun update @types/bun@1.2.5-canary.
|
|
100
|
+
$ bun update @types/bun@1.2.5-canary.20250307T140650
|
|
101
101
|
|
|
102
102
|
# Update all dependencies to the latest versions
|
|
103
103
|
$ bun update --latest
|
|
@@ -21,7 +21,7 @@ Here's what the output of a typical test run looks like. In this case, there are
|
|
|
21
21
|
|
|
22
22
|
```sh
|
|
23
23
|
$ bun test
|
|
24
|
-
bun test v1.2.5-canary.
|
|
24
|
+
bun test v1.2.5-canary.20250307T140650 (9c68abdb)
|
|
25
25
|
|
|
26
26
|
test.test.js:
|
|
27
27
|
✓ add [0.87ms]
|
|
@@ -47,7 +47,7 @@ To only run certain test files, pass a positional argument to `bun test`. The ru
|
|
|
47
47
|
|
|
48
48
|
```sh
|
|
49
49
|
$ bun test test3
|
|
50
|
-
bun test v1.2.5-canary.
|
|
50
|
+
bun test v1.2.5-canary.20250307T140650 (9c68abdb)
|
|
51
51
|
|
|
52
52
|
test3.test.js:
|
|
53
53
|
✓ add [1.40ms]
|
|
@@ -85,7 +85,7 @@ Adding `-t add` will only run tests with "add" in the name. This works with test
|
|
|
85
85
|
|
|
86
86
|
```sh
|
|
87
87
|
$ bun test -t add
|
|
88
|
-
bun test v1.2.5-canary.
|
|
88
|
+
bun test v1.2.5-canary.20250307T140650 (9c68abdb)
|
|
89
89
|
|
|
90
90
|
test.test.js:
|
|
91
91
|
✓ add [1.79ms]
|
|
@@ -18,7 +18,7 @@ The first time this test is executed, Bun will evaluate the value passed into `e
|
|
|
18
18
|
|
|
19
19
|
```sh
|
|
20
20
|
$ bun test test/snap
|
|
21
|
-
bun test v1.2.5-canary.
|
|
21
|
+
bun test v1.2.5-canary.20250307T140650 (9c68abdb)
|
|
22
22
|
|
|
23
23
|
test/snap.test.ts:
|
|
24
24
|
✓ snapshot [1.48ms]
|
|
@@ -61,7 +61,7 @@ Later, when this test file is executed again, Bun will read the snapshot file an
|
|
|
61
61
|
|
|
62
62
|
```sh
|
|
63
63
|
$ bun test
|
|
64
|
-
bun test v1.2.5-canary.
|
|
64
|
+
bun test v1.2.5-canary.20250307T140650 (9c68abdb)
|
|
65
65
|
|
|
66
66
|
test/snap.test.ts:
|
|
67
67
|
✓ snapshot [1.05ms]
|
|
@@ -78,7 +78,7 @@ To update snapshots, use the `--update-snapshots` flag.
|
|
|
78
78
|
|
|
79
79
|
```sh
|
|
80
80
|
$ bun test --update-snapshots
|
|
81
|
-
bun test v1.2.5-canary.
|
|
81
|
+
bun test v1.2.5-canary.20250307T140650 (9c68abdb)
|
|
82
82
|
|
|
83
83
|
test/snap.test.ts:
|
|
84
84
|
✓ snapshot [0.86ms]
|
package/docs/installation.md
CHANGED
|
@@ -14,7 +14,7 @@ Kernel version 5.6 or higher is strongly recommended, but the minimum is 5.1. Us
|
|
|
14
14
|
```bash#macOS/Linux_(curl)
|
|
15
15
|
$ curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL
|
|
16
16
|
# to install a specific version
|
|
17
|
-
$ curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.5-canary.
|
|
17
|
+
$ curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.5-canary.20250307T140650"
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
```bash#npm
|
|
@@ -189,10 +189,10 @@ Since Bun is a single binary, you can install older versions of Bun by re-runnin
|
|
|
189
189
|
|
|
190
190
|
### Installing a specific version of Bun on Linux/Mac
|
|
191
191
|
|
|
192
|
-
To install a specific version of Bun, you can pass the git tag of the version you want to install to the install script, such as `bun-v1.2.0` or `bun-v1.2.5-canary.
|
|
192
|
+
To install a specific version of Bun, you can pass the git tag of the version you want to install to the install script, such as `bun-v1.2.0` or `bun-v1.2.5-canary.20250307T140650`.
|
|
193
193
|
|
|
194
194
|
```sh
|
|
195
|
-
$ curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.5-canary.
|
|
195
|
+
$ curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.5-canary.20250307T140650"
|
|
196
196
|
```
|
|
197
197
|
|
|
198
198
|
### Installing a specific version of Bun on Windows
|
|
@@ -201,7 +201,7 @@ On Windows, you can install a specific version of Bun by passing the version num
|
|
|
201
201
|
|
|
202
202
|
```sh
|
|
203
203
|
# PowerShell:
|
|
204
|
-
$ iex "& {$(irm https://bun.sh/install.ps1)} -Version 1.2.5-canary.
|
|
204
|
+
$ iex "& {$(irm https://bun.sh/install.ps1)} -Version 1.2.5-canary.20250307T140650"
|
|
205
205
|
```
|
|
206
206
|
|
|
207
207
|
## Downloading Bun binaries directly
|
package/docs/runtime/debugger.md
CHANGED
|
@@ -124,11 +124,11 @@ await fetch("https://example.com", {
|
|
|
124
124
|
This prints the `fetch` request as a single-line `curl` command to let you copy-paste into your terminal to replicate the request.
|
|
125
125
|
|
|
126
126
|
```sh
|
|
127
|
-
[fetch] $ curl --http1.1 "https://example.com/" -X POST -H "content-type: application/json" -H "Connection: keep-alive" -H "User-Agent: Bun/1.2.5-canary.
|
|
127
|
+
[fetch] $ curl --http1.1 "https://example.com/" -X POST -H "content-type: application/json" -H "Connection: keep-alive" -H "User-Agent: Bun/1.2.5-canary.20250307T140650" -H "Accept: */*" -H "Host: example.com" -H "Accept-Encoding: gzip, deflate, br" --compressed -H "Content-Length: 13" --data-raw "{\"foo\":\"bar\"}"
|
|
128
128
|
[fetch] > HTTP/1.1 POST https://example.com/
|
|
129
129
|
[fetch] > content-type: application/json
|
|
130
130
|
[fetch] > Connection: keep-alive
|
|
131
|
-
[fetch] > User-Agent: Bun/1.2.5-canary.
|
|
131
|
+
[fetch] > User-Agent: Bun/1.2.5-canary.20250307T140650
|
|
132
132
|
[fetch] > Accept: */*
|
|
133
133
|
[fetch] > Host: example.com
|
|
134
134
|
[fetch] > Accept-Encoding: gzip, deflate, br
|
|
@@ -170,7 +170,7 @@ This prints the following to the console:
|
|
|
170
170
|
[fetch] > HTTP/1.1 POST https://example.com/
|
|
171
171
|
[fetch] > content-type: application/json
|
|
172
172
|
[fetch] > Connection: keep-alive
|
|
173
|
-
[fetch] > User-Agent: Bun/1.2.5-canary.
|
|
173
|
+
[fetch] > User-Agent: Bun/1.2.5-canary.20250307T140650
|
|
174
174
|
[fetch] > Accept: */*
|
|
175
175
|
[fetch] > Host: example.com
|
|
176
176
|
[fetch] > Accept-Encoding: gzip, deflate, br
|
package/docs/test/dom.md
CHANGED
package/package.json
CHANGED
package/test.d.ts
CHANGED
|
@@ -168,8 +168,14 @@ declare module "bun:test" {
|
|
|
168
168
|
* @param label the label for the tests
|
|
169
169
|
* @param fn the function that defines the tests
|
|
170
170
|
*/
|
|
171
|
+
|
|
172
|
+
interface FunctionLike {
|
|
173
|
+
readonly name: string;
|
|
174
|
+
}
|
|
171
175
|
export interface Describe {
|
|
172
|
-
(
|
|
176
|
+
(fn: () => void): void;
|
|
177
|
+
|
|
178
|
+
(label: number | string | Function | FunctionLike, fn: () => void): void;
|
|
173
179
|
/**
|
|
174
180
|
* Skips all other tests, except this group of tests.
|
|
175
181
|
*
|