|
1 | 1 | --- |
2 | | -last_modified: 2026-06-25 |
| 2 | +last_modified: 2026-06-30 |
3 | 3 | title: "Modules" |
4 | 4 | description: "Learn how Deno's ECMAScript module system works: importing local and third-party modules, import attributes, import maps, and supported import types such as Wasm and data URLs." |
5 | 5 | oldUrl: |
@@ -183,6 +183,46 @@ console.log(sheet instanceof CSSStyleSheet); |
183 | 183 | // true |
184 | 184 | ``` |
185 | 185 |
|
| 186 | +Dynamic imports work the same way: |
| 187 | + |
| 188 | +```ts |
| 189 | +const { default: sheet } = await import("./styles.css", { |
| 190 | + with: { type: "css" }, |
| 191 | +}); |
| 192 | +``` |
| 193 | + |
| 194 | +Static imports and dynamic imports with a statically analyzable specifier are |
| 195 | +loaded as part of the module graph and need no permission. Only a dynamic import |
| 196 | +whose specifier can't be analyzed, such as `import(base + "styles.css")`, reads |
| 197 | +the file at runtime and therefore requires read permission (`--allow-read`). |
| 198 | + |
| 199 | +Deno implements the small slice of the `CSSStyleSheet` interface that browser |
| 200 | +module graphs rely on: |
| 201 | + |
| 202 | +- `cssRules` returns the sheet's top-level rules. Unlike the browser, this is a |
| 203 | + **frozen array** of `CSSRule` (not a live `CSSRuleList`), and a fresh array is |
| 204 | + created on each access. |
| 205 | +- `CSSRule.cssText` is the verbatim text of one top-level rule. |
| 206 | +- `replace(text)` and `replaceSync(text)` swap the sheet's contents. As with |
| 207 | + constructed stylesheets in the browser, top-level `@import` rules are dropped. |
| 208 | +- The `new CSSStyleSheet()` constructor is available, but its `options` argument |
| 209 | + (`media`, `disabled`, `baseURL`) is not supported. |
| 210 | + |
| 211 | +```ts |
| 212 | +import sheet from "./styles.css" with { type: "css" }; |
| 213 | + |
| 214 | +for (const rule of sheet.cssRules) { |
| 215 | + console.log(rule.cssText); |
| 216 | +} |
| 217 | + |
| 218 | +sheet.replaceSync("body { color: red; }"); |
| 219 | +``` |
| 220 | + |
| 221 | +Because Deno has no DOM, a sheet can't be adopted anywhere; the implementation |
| 222 | +is backed by the raw CSS text rather than a full CSS object model. `cssRules` |
| 223 | +uses a naive top-level rule split, so the live mutation methods `insertRule` and |
| 224 | +`deleteRule` are not implemented. |
| 225 | + |
186 | 226 | :::info `css` imports |
187 | 227 |
|
188 | 228 | Still experimental. Enable with the `--unstable-raw-imports` CLI flag or the |
|
0 commit comments