Skip to content

Commit a28f780

Browse files
authored
docs: expand CSS module import documentation (#3374)
1 parent e2e67ea commit a28f780

1 file changed

Lines changed: 41 additions & 1 deletion

File tree

runtime/fundamentals/modules.md

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
last_modified: 2026-06-25
2+
last_modified: 2026-06-30
33
title: "Modules"
44
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."
55
oldUrl:
@@ -183,6 +183,46 @@ console.log(sheet instanceof CSSStyleSheet);
183183
// true
184184
```
185185

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+
186226
:::info `css` imports
187227

188228
Still experimental. Enable with the `--unstable-raw-imports` CLI flag or the

0 commit comments

Comments
 (0)