Skip to content

Commit 8088878

Browse files
fix: respect export strategy of combined imports. (#20)
1 parent 05cd9d6 commit 8088878

22 files changed

Lines changed: 1168 additions & 179 deletions

.husky/pre-push

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
#!/usr/bin/env sh
22
set -euo pipefail
33

4+
npm run check:cycles
45
npm run lint
56
npm run prettier:check
67
npm run check-types

README.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -249,13 +249,7 @@ No vendor copies are necessary—the declarations live inside `@knighted/css`, y
249249

250250
#### Combined module + CSS import
251251

252-
If you prefer a single import that returns both your module exports and the compiled stylesheet, append `&combined` to the query:
253-
254-
```ts
255-
import { Button, knightedCss } from './button.tsx?knighted-css&combined'
256-
```
257-
258-
This keeps your bundlers other CSS loaders intact while guaranteeing that `knightedCss` is only computed once. The trade-off is that TypeScript cant infer the original module shape automatically. To restore those typings, use the helper type exported by the loader:
252+
If you prefer a single import that returns both your module exports and the compiled stylesheet, append `&combined` to the query. Then narrow the import once so TypeScript understands the shape:
259253

260254
```ts
261255
import type { KnightedCssCombinedModule } from '@knighted/css/loader'
@@ -266,6 +260,14 @@ const { Button, knightedCss } = combined as KnightedCssCombinedModule<
266260
>
267261
```
268262

263+
Combined imports mirror the source modules default export strategy. Need to guaranteenamed exports onlyregardless of what the source module does? Append `&named-only` (alias: `&no-default`) to the querythe typing stays the same:
264+
265+
```ts
266+
import combined from './button.tsx?knighted-css&combined&named-only'
267+
```
268+
269+
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.
270+
269271
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.
270272

271273
#### vanilla-extract loader guidance

0 commit comments

Comments
 (0)