Skip to content

Commit 649ace8

Browse files
docs: add combined query matrix.
1 parent ac22d5d commit 649ace8

2 files changed

Lines changed: 55 additions & 1 deletion

File tree

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ import combined from './button.tsx?knighted-css&combined&named-only'
268268

269269
The `named-only` flag suppresses the synthetic default entirely, which is handy for codebases that consistently destructure combined modules or rely on namespace imports for type narrowing.
270270

271-
You can mix and match: regular `?knighted-css` imports keep strong module typings and just add the CSS string, while `?knighted-css&combined` dedupes your CSS loader pipeline when you need everything at once.
271+
You can mix and match: regular `?knighted-css` imports keep strong module typings and just add the CSS string, while `?knighted-css&combined` dedupes your CSS loader pipeline when you need everything at once. Need a quick reference for which query to use? Check the [Combined query matrix](./docs/combined-queries.md).
272272

273273
#### vanilla-extract loader guidance
274274

docs/combined-queries.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Knighted CSS Combined Loader Reference
2+
3+
This document summarizes how `?knighted-css&combined` behaves for different module export shapes and how to structure your imports accordingly. Use it as guidance when filing documentation feedback for `@knighted/css`.
4+
5+
## Decision Matrix
6+
7+
| Source module exports | Recommended query | TypeScript import pattern | Notes |
8+
| --------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
9+
| **Named exports only** | `?knighted-css&combined&named-only` | [Snippet](#named-exports-only) | `&named-only` disables the synthetic default export so you only destructure the original named members plus `knightedCss`. |
10+
| **Default export only** | `?knighted-css&combined` | [Snippet](#default-export-only) | Loader mirrors the default export and adds `knightedCss`, so default-import code keeps working. |
11+
| **Default + named exports** | `?knighted-css&combined` (append `&named-only` when you never consume the default) | [Snippet](#default-and-named-exports) | Without the flag you get both default + named exports; adding it drops the synthetic default for stricter codebases. |
12+
13+
## Named exports only
14+
15+
```ts
16+
import type { KnightedCssCombinedModule } from '@knighted/css/loader'
17+
import combined from './module.js?knighted-css&combined&named-only'
18+
19+
const { Component, knightedCss } = combined as KnightedCssCombinedModule<
20+
typeof import('./module.js')
21+
>
22+
```
23+
24+
## Default export only
25+
26+
```ts
27+
import type { KnightedCssCombinedModule } from '@knighted/css/loader'
28+
import combined from './module.js?knighted-css&combined'
29+
30+
const { default: Component, knightedCss } = combined as KnightedCssCombinedModule<
31+
typeof import('./module.js')
32+
>
33+
```
34+
35+
## Default and named exports
36+
37+
```ts
38+
import type { KnightedCssCombinedModule } from '@knighted/css/loader'
39+
import combined from './module.js?knighted-css&combined'
40+
41+
const {
42+
default: Component,
43+
helper,
44+
knightedCss,
45+
} = combined as KnightedCssCombinedModule<typeof import('./module.js')>
46+
```
47+
48+
Prefer `?knighted-css&combined&named-only` plus the [named exports only](#named-exports-only) snippet when you intentionally avoid default exports but still need the named members and `knightedCss`.
49+
50+
## Key Takeaways
51+
52+
- The loader always injects `knightedCss` alongside the module’s exports.
53+
- To avoid synthetic defaults (and TypeScript warnings) for modules that only expose named exports, add `&named-only` and use a namespace import.
54+
- Namespace imports plus `KnightedCssCombinedModule<typeof import('./module')>` work universally; default imports are optional conveniences when the source module exposes a default you actually consume.

0 commit comments

Comments
 (0)