feat: --hashed classes with type generation.#68
Merged
knightedcodemonkey merged 1 commit intomainfrom Jan 23, 2026
Merged
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #68 +/- ##
==========================================
- Coverage 91.56% 91.23% -0.33%
==========================================
Files 16 16
Lines 5013 5136 +123
Branches 898 920 +22
==========================================
+ Hits 4590 4686 +96
- Misses 391 418 +27
Partials 32 32 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds a new --hashed mode to the @knighted/css type generation pipeline and wires up a Playwright demo that showcases hashed CSS Modules classes with generated selector types across light and shadow DOM.
Changes:
- Extend
generateTypesand its CLI to support a--hashedmode that emits.knighted-cssproxy modules exposingselectorsbacked by loader-bridgeknightedCssModules, with corresponding docs and tests. - Enhance the loader-bridge to more accurately detect real default exports so hashed proxies can safely consume
?knighted-cssentries. - Add a new Playwright “hashed selectors” demo (React + Lit + shadow DOM) with a dedicated Rspack config, HTML entrypoint, and E2E test.
Reviewed changes
Copilot reviewed 18 out of 20 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/playwright/test/hashed.spec.ts | New Playwright test that verifies light vs shadow DOM cards share visual styles while the shadow card uses a non-empty hashed class, exercising the new hashed selectors demo end-to-end. |
| packages/playwright/src/hashed/styles.module.css | Defines the card layout and typography styles that are consumed as CSS Modules and ultimately referenced via hashed selectors in the demo. |
| packages/playwright/src/hashed/shadow-tree.tsx | Provides a React ShadowTree component that renders HashedCard into the custom element’s shadow DOM, used by the demo and its type-generated proxy. |
| packages/playwright/src/hashed/lit-host.ts | Implements the HashedHost LitElement wrapper that mounts the React ShadowTree, applies extracted CSS via unsafeCSS, and renders a marker using selectors.card for testing. |
| packages/playwright/src/hashed/index.ts | Entry module for the hashed demo that mounts a light-DOM HashedCard and the Lit-based shadow host, used as the Rspack entrypoint for hashed-bundle.js. |
| packages/playwright/src/hashed/constants.ts | Centralizes host tag and data-testid constants for the hashed demo, used by both runtime code and the Playwright test. |
| packages/playwright/src/hashed/card.tsx | Reusable React HashedCard component that consumes the CSS module and exposes a data-testid, forming the basis of the light and shadow cards compared in tests. |
| packages/playwright/rspack.hashed.config.js | Adds a dedicated Rspack config that wires @knighted/css/loader-bridge for ?knighted-css queries and CSS Modules, producing hashed-bundle.js and hashed.css for the demo. |
| packages/playwright/package.json | Extends build/type-generation scripts with build:hashed, types:hashed, and preview:hashed, and bumps the @knighted/css dependency to 1.1.0-rc.8 to support the new mode. |
| packages/playwright/hashed.html | New HTML shell that loads the hashed demo bundle and styles, providing the /hashed.html target for the Playwright test. |
| packages/css/test/generateTypes.test.ts | Adds tests covering generateTypes in hashed mode, internal selector-module formatting for hashed proxies, CLI arg parsing (including mutual exclusion with --auto-stable), and selector helpers. |
| packages/css/test/snapshots/generateTypes.snap.json | Updates CLI help snapshot to include the new --hashed option description. |
| packages/css/src/loaderBridge.ts | Integrates analyzeModule to determine whether upstream modules truly have default exports, and uses this to control how __knightedDefault is derived for bridge modules (important for correct knightedCss/knightedCssModules behavior). |
| packages/css/src/generateTypes.ts | Threads a hashed option through the generator, collects selector tokens from CSS instead of building stable selectors in hashed mode, and emits .knighted-css modules that expose selectors (plus optional knightedCss/knightedCssModules) with updated CLI handling. |
| packages/css/package.json | Bumps @knighted/css to 1.1.0-rc.8 to publish the new --hashed functionality. |
| packages/css/README.md | Documents the --hashed CLI flag, the selectors export shape, and the requirement to route ?knighted-css through the loader-bridge. |
| package-lock.json | Aligns lockfile metadata with the @knighted/css version bump and the Playwright fixture’s dependency on 1.1.0-rc.8. |
| docs/type-generation.md | Extends type-generation docs with a description and example usage of hashed selector proxies and clarifies that --hashed is mutually exclusive with --auto-stable. |
| docs/roadmap.md | Notes a planned --exclude CLI option for type generation, reflecting future work but not altering current behavior. |
| .gitignore | Ignores new hashed build artifacts (dist-hashed/) and hashed selector type output (.knighted-css-hashed/). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.