https://github.com/knightedcodemonkey/css
Build-time tool that walks module dependencies and bundles all imported CSS into one optimized in-memory string.
https://github.com/knightedcodemonkey/css
compiler css less light-dom lightningcss nodejs oxc-parser oxc-resolver sass scss shadow-dom typescript vanilla-extract
Last synced: about 1 month ago
JSON representation
Build-time tool that walks module dependencies and bundles all imported CSS into one optimized in-memory string.
- Host: GitHub
- URL: https://github.com/knightedcodemonkey/css
- Owner: knightedcodemonkey
- Created: 2025-12-09T00:36:29.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-01-18T17:23:21.000Z (about 1 month ago)
- Last Synced: 2026-01-18T17:27:22.545Z (about 1 month ago)
- Topics: compiler, css, less, light-dom, lightningcss, nodejs, oxc-parser, oxc-resolver, sass, scss, shadow-dom, typescript, vanilla-extract
- Language: TypeScript
- Homepage:
- Size: 769 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Roadmap: docs/roadmap.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# [`@knighted/css`](https://www.npmjs.com/package/@knighted/css)
[](https://codecov.io/gh/knightedcodemonkey/css)
[](https://www.npmjs.com/package/@knighted/css)
`@knighted/css` is a bundler-optional CSS pipeline for JavaScript and TypeScript projects. Use it standalone or plug it into your bundler via the `?knighted-css` loader query—it walks the graph, compiles every CSS-like dependency (CSS, Sass/SCSS, Less, vanilla-extract), and hands back both a concatenated stylesheet string and optional `.knighted-css.*` selector manifests for type-safe loaders.
## What it does (at a glance)
- **Graph walking**: Follows `import` trees the same way Node does (tsconfig `paths`, package `exports`/`imports`, hash specifiers, etc.) using [`oxc-resolver`](https://github.com/oxc-project/oxc-resolver).
- **Multi-dialect compilation**: Runs Sass, Less, Lightning CSS, or vanilla-extract integrations on demand so every dependency ends up as plain CSS.
- **Attribute-aware imports**: Honors static `with { type: "css" }` import attributes (including extensionless/aliased and static dynamic imports) so CSS gets pulled into the graph even when extensions aren’t present.
- **Loader + CLI**: Ship CSS at runtime via `?knighted-css` loader queries or ahead of time via the `css()` API and the `knighted-css-generate-types` command.
- **Shadow DOM + SSR ready**: Inline styles in server renders, ship them alongside web components, or keep classic DOM apps in sync—all without wiring a full bundler.
See the [docs/](./docs) directory for deep dives on loaders, type generation, specificity boosts, Sass aliases, the combined import queries, and the current [2026 roadmap](./docs/roadmap.md).
## Workspaces in this repo
| Workspace | NPM Name | What it contains |
| --------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `packages/css` | [`@knighted/css`](./packages/css/README.md) | The production library: graph walker, compilation pipeline, loader helpers, CLI, and docs. Published to npm and meant for real builds. |
| `packages/playwright` | [`@knighted/css-playwright-fixture`](./packages/playwright/README.md) | The end-to-end demo + regression suite. Playwright drives Lit + React examples, hash-import workspace scenarios, and SSR checks to ensure the core package keeps working across bundlers. |
Each workspace is a standalone npm project. Run commands from the repo root with `npm run -w <workspace>` or `npm run <script> --workspaces` to fan out when needed.
## Quick start
```ts
import { css } from '@knighted/css'
const sheet = await css('./src/entry.tsx', {
cwd: process.cwd(),
lightningcss: { minify: true },
})
console.log(sheet) // use during SSR, static builds, or to inline Shadow DOM styles
```
- Need runtime imports? See [docs/loader.md](./docs/loader.md).
- Want strong selector types? Run `npx knighted-css-generate-types` and follow [docs/type-generation.md](./docs/type-generation.md).
- Need the rundown on Node `exports`/`imports`, Sass prefixes, or custom resolver hooks? Start with [docs/resolution.md](./docs/resolution.md).
## Contributing & Support
1. Install deps with `npm install`.
2. Run `npm run build` to compile `@knighted/css`.
3. Use `npm run test` for unit coverage and `npm run test:e2e` for the Playwright matrix.
Issues and feature ideas are always welcome via [GitHub issues](https://github.com/knightedcodemonkey/css/issues).
## License
MIT © Knighted Code Monkey