Skip to content

README.md

Latest commit

 

History

History
34 lines (23 loc) · 2.67 KB

README.md

File metadata and controls

34 lines (23 loc) · 2.67 KB

@knighted/css Playwright fixtures

This package builds the demo surface Playwright hits in CI. It now covers three scenarios:

  • Lit + React wrapper (bundled via Rspack/Webpack): exercises vanilla CSS, Sass/Less, vanilla-extract, combined loader queries, and the attribute-import card that uses with { type: "css" } in a bundled flow.
  • Hash-imports workspace demo: minimal npm workspace under src/hash-imports-workspace/ proving @knighted/css/loader and css() respect hash-prefixed package.json#imports (#workspace/*).
  • Native CSS import attributes (no bundler): plain ESM page at /src/native-attr/index.html that imports ./native-attr.css with { type: 'css' } and applies the stylesheet at runtime.
  • Mode fixture (declaration/module variants): /src/mode showcases single-specifier declaration imports, hashed selectors, and strict sidecar behavior under the resolver plugin.

How to run

  • Full matrix (default): npm test (runs chromium plus webpack + SSR builds).
  • Hash-imports only: npm run test -- --project=chromium hash-imports.spec.ts.
  • Local preview server: npm run preview -w @knighted/css-playwright-fixture (serves at http://localhost:4174 after building Rspack/webpack/SSR outputs).

Mode fixture notes

The mode demo (/mode.html) is built via rspack.mode.config.js. It depends on declaration sidecars generated by knighted-css-generate-types and a strict manifest used by the resolver plugin.

Key pieces:

  • npm run types:mode generates declaration sidecars for the mode fixtures, including a strict-only path for strict-ok-card.tsx.
  • npm run types:mode also writes the merged strict manifest to .knighted-css-mode/knighted-manifest.json via scripts/generate-mode-types.ts.
  • The manifest is produced by passing a manifest path to knighted-css-generate-types (declaration mode only) and then merging the per-mode outputs.
  • The resolver plugin is configured with strictSidecar: true and manifestPath so single-specifier imports like ./declaration-card.js rewrite to ?knighted-css at build time without warnings.

If you are debugging the mode fixture, use KNIGHTED_CSS_DEBUG_MODE=1 npm run build:mode to see rewrite decisions in the terminal.

Exercising CSS import attributes

  • Bundled path (Lit/React attribute card): after npm run preview -w @knighted/css-playwright-fixture, open http://localhost:4174/ and locate the card with test id dialect-attr-import (rendered by lit-react.spec.ts).
  • Native path (no bundler): open http://localhost:4174/src/native-attr/index.html. Chrome 123+ supports CSS module scripts; the page adopts the imported stylesheet so you should see the chip styling without the "Waiting for styles…" placeholder.