-
Notifications
You must be signed in to change notification settings - Fork 0
docs: plugin. #73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
docs: plugin. #73
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| # Resolver plugin (`knightedCssResolverPlugin`) | ||
|
|
||
| `knightedCssResolverPlugin` is the resolver companion for declaration mode. It teaches your | ||
| bundler to rewrite module imports to `?knighted-css` (and `&combined` when applicable) when a | ||
| matching declaration sidecar exists, so runtime exports stay aligned with the generated types. | ||
|
|
||
| Without the plugin, TypeScript may compile, but the bundler will load the original module | ||
| without the loader query. That means `knightedCss`, `stableSelectors`, or other injected exports | ||
| will be missing at runtime. | ||
|
|
||
| ## What it does | ||
|
|
||
| - Scans resolved JS/TS module requests. | ||
| - Looks for a declaration sidecar (`.d.ts`) generated by `knighted-css-generate-types --mode declaration`. | ||
| - If a sidecar is found, rewrites the request to append `?knighted-css`. | ||
| - Optionally enforces strict sidecar matches using a manifest to avoid accidental rewrites. | ||
| - Optionally marks “combined” entries (via `combinedPaths`) so the query includes `&combined`. | ||
|
|
||
| ## Options | ||
|
|
||
| ```ts | ||
| import { KnightedCssResolverPlugin } from '@knighted/css/plugin' | ||
|
|
||
| new KnightedCssResolverPlugin({ | ||
| rootDir: string, | ||
| tsconfig: string | Record<string, unknown>, | ||
| conditions: string[], | ||
| extensions: string[], | ||
| debug: boolean, | ||
| combinedPaths: Array<string | RegExp>, | ||
| strictSidecar: boolean, | ||
| manifestPath: string, | ||
|
knightedcodemonkey marked this conversation as resolved.
Outdated
|
||
| }) | ||
| ``` | ||
|
|
||
| - `rootDir` (optional): Base directory used for resolver scoping. Defaults to `process.cwd()`. | ||
| - `tsconfig` (optional): Path to a tsconfig or an in-memory tsconfig object for path resolution. | ||
| - `conditions` (optional): Custom `package.json` export conditions to honor during resolution. | ||
| - `extensions` (optional): File extensions considered as script modules. Defaults to | ||
| `.ts`, `.tsx`, `.js`, `.jsx`, `.mts`, `.cts`, `.mjs`, `.cjs`. | ||
| - `debug` (optional): Logs rewrite decisions and a summary of cache hits/misses. | ||
| - `combinedPaths` (optional): List of strings or regexes. Any resolved path that matches will | ||
| receive `&combined` alongside `?knighted-css`. | ||
| - `strictSidecar` (optional): When true, only modules present in the manifest are rewritten. | ||
| Defaults to true when `manifestPath` is provided. | ||
| - `manifestPath` (optional): Path to the sidecar manifest generated by | ||
| `knighted-css-generate-types --manifest`. Used for strict matching. | ||
|
|
||
| ## Basic usage (declaration mode) | ||
|
|
||
| ```js | ||
| // rspack.config.js | ||
| import { KnightedCssResolverPlugin } from '@knighted/css/plugin' | ||
|
|
||
| export default { | ||
| resolve: { | ||
| plugins: [new KnightedCssResolverPlugin()], | ||
| }, | ||
| } | ||
| ``` | ||
|
|
||
| ```ts | ||
| // Type generation | ||
| knighted-css-generate-types --root . --include src --mode declaration | ||
| ``` | ||
|
|
||
| This lets you write clean imports while still receiving `knightedCss` at runtime: | ||
|
|
||
| ```ts | ||
| import Button, { knightedCss } from './button.js' | ||
| ``` | ||
|
|
||
| ## Strict sidecar + manifest (recommended) | ||
|
|
||
| Use strict sidecars to avoid rewriting modules that merely happen to have a `.d.ts` next to | ||
| them. This ensures only declaration mode sidecars generated by the CLI trigger rewrites. | ||
|
|
||
| ```sh | ||
| knighted-css-generate-types --root . --include src --mode declaration --manifest .knighted-css/knighted-manifest.json | ||
| ``` | ||
|
|
||
| ```js | ||
| // rspack.config.js | ||
| import path from 'node:path' | ||
| import { KnightedCssResolverPlugin } from '@knighted/css/plugin' | ||
|
|
||
| export default { | ||
| resolve: { | ||
| plugins: [ | ||
| new KnightedCssResolverPlugin({ | ||
| strictSidecar: true, | ||
| manifestPath: path.resolve('.knighted-css/knighted-manifest.json'), | ||
| }), | ||
| ], | ||
| }, | ||
| } | ||
| ``` | ||
|
|
||
| ## Combined imports | ||
|
|
||
| If you have modules that are consumed with combined exports (`?knighted-css&combined`), | ||
| set `combinedPaths` to ensure the resolver appends `&combined` during rewrites. | ||
|
|
||
| Example of an import that relies on `&combined` at runtime: | ||
|
|
||
| ```ts | ||
| import { Card, knightedCss } from './combined-card.js' | ||
| ``` | ||
|
|
||
| And how you would use `combinedPaths` to support that: | ||
|
|
||
| ```js | ||
| import path from 'node:path' | ||
| import { KnightedCssResolverPlugin } from '@knighted/css/plugin' | ||
|
|
||
| export default { | ||
| resolve: { | ||
| plugins: [ | ||
| new KnightedCssResolverPlugin({ | ||
| combinedPaths: [ | ||
| path.resolve('src/components/combined-card.tsx'), | ||
| /src\/views\/.*\.tsx$/, | ||
| ], | ||
| }), | ||
| ], | ||
| }, | ||
| } | ||
| ``` | ||
|
|
||
| ## Debugging | ||
|
|
||
| Enable `debug: true` to log each decision and a final summary that includes counts for | ||
| rewrites, cache hits, marker misses, and manifest misses. | ||
|
|
||
| ```js | ||
| import { KnightedCssResolverPlugin } from '@knighted/css/plugin' | ||
|
|
||
| export default { | ||
| resolve: { | ||
| plugins: [new KnightedCssResolverPlugin({ debug: true })], | ||
| }, | ||
| } | ||
| ``` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.