@knighted/css 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/cjs/css.cjs

@@ -10,6 +10,7 @@ const node_path_1 = __importDefault(require("node:path"));
 const node_fs_1 = require("node:fs");
 const dependency_tree_1 = __importDefault(require("dependency-tree"));
 const lightningcss_1 = require("lightningcss");
+const helpers_js_1 = require("./helpers.cjs");
 exports.DEFAULT_EXTENSIONS = ['.css', '.scss', '.sass', '.less', '.css.ts'];
 async function css(entry, options = {}) {
     const { css: output } = await cssWithMeta(entry, options);
@@ -41,6 +42,13 @@ async function cssWithMeta(entry, options = {}) {
     let output = chunks.join('\n');
     if (options.lightningcss) {
         const lightningOptions = normalizeLightningOptions(options.lightningcss);
+        const boostVisitor = (0, helpers_js_1.buildSpecificityVisitor)(options.specificityBoost);
+        const combinedVisitor = boostVisitor && lightningOptions.visitor
+            ? (0, lightningcss_1.composeVisitors)([boostVisitor, lightningOptions.visitor])
+            : (boostVisitor ?? lightningOptions.visitor);
+        if (combinedVisitor) {
+            lightningOptions.visitor = combinedVisitor;
+        }
         const { code } = (0, lightningcss_1.transform)({
             ...lightningOptions,
             filename: lightningOptions.filename ?? 'extracted.css',
@@ -48,6 +56,9 @@ async function cssWithMeta(entry, options = {}) {
         });
         output = code.toString();
     }
+    if (options.specificityBoost?.strategy && !options.specificityBoost.visitor) {
+        output = (0, helpers_js_1.applyStringSpecificityBoost)(output, options.specificityBoost);
+    }
     return { css: output, files: files.map(file => file.path) };
 }
 async function resolveEntry(entry, cwd, resolver) {

package/dist/cjs/css.d.cts

@@ -1,5 +1,6 @@
 import type { Options as DependencyTreeOpts } from 'dependency-tree';
 import { type TransformOptions as LightningTransformOptions } from 'lightningcss';
+import { type SpecificitySelector, type SpecificityStrategy } from './helpers.cjs';
 export declare const DEFAULT_EXTENSIONS: string[];
 type LightningCssConfig = boolean | Partial<Omit<LightningTransformOptions<never>, 'code'>>;
 export type CssResolver = (specifier: string, ctx: {
@@ -11,6 +12,11 @@ export interface CssOptions {
     cwd?: string;
     filter?: (filePath: string) => boolean;
     lightningcss?: LightningCssConfig;
+    specificityBoost?: {
+        visitor?: LightningTransformOptions<never>['visitor'];
+        strategy?: SpecificityStrategy;
+        match?: SpecificitySelector[];
+    };
     dependencyTree?: Partial<Omit<DependencyTreeOpts, 'filename' | 'directory'>>;
     resolver?: CssResolver;
     peerResolver?: PeerLoader;

package/dist/cjs/helpers.cjs

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSpecificityVisitor = buildSpecificityVisitor;
+exports.serializeSelector = serializeSelector;
+exports.escapeRegex = escapeRegex;
+exports.findLastClassName = findLastClassName;
+exports.applyStringSpecificityBoost = applyStringSpecificityBoost;
+function buildSpecificityVisitor(boost) {
+    if (!boost)
+        return undefined;
+    if (boost.visitor)
+        return boost.visitor;
+    if (!boost.strategy)
+        return undefined;
+    const matchers = (boost.match ?? []).map(m => typeof m === 'string' ? new RegExp(`^${escapeRegex(m)}$`) : m);
+    const shouldApply = (selectorStr) => matchers.length === 0 ? true : matchers.some(rx => rx.test(selectorStr));
+    if (boost.strategy.type === 'repeat-class') {
+        const times = Math.max(1, boost.strategy.times ?? 1);
+        const visitor = {
+            Rule: {
+                style(rule) {
+                    if (!rule || !Array.isArray(rule.selectors))
+                        return rule;
+                    const newSelectors = rule.selectors.map((sel) => {
+                        const selectorStr = serializeSelector(sel);
+                        if (!shouldApply(selectorStr))
+                            return sel;
+                        const lastClassName = findLastClassName(selectorStr);
+                        if (!lastClassName)
+                            return sel;
+                        const repeats = Array.from({ length: times }, () => ({
+                            type: 'class',
+                            value: lastClassName,
+                        }));
+                        return [...sel, ...repeats];
+                    });
+                    return { ...rule, selectors: newSelectors };
+                },
+            },
+        };
+        return visitor;
+    }
+    if (boost.strategy.type === 'append-where') {
+        const token = boost.strategy.token;
+        const visitor = {
+            Rule: {
+                style(rule) {
+                    if (!rule || !Array.isArray(rule.selectors))
+                        return rule;
+                    const newSelectors = rule.selectors.map((sel) => {
+                        const selectorStr = serializeSelector(sel);
+                        if (!shouldApply(selectorStr))
+                            return sel;
+                        return [
+                            ...sel,
+                            {
+                                type: 'pseudo-class',
+                                kind: 'where',
+                                selectors: [[{ type: 'class', value: token.replace(/^\./, '') }]],
+                            },
+                        ];
+                    });
+                    return { ...rule, selectors: newSelectors };
+                },
+            },
+        };
+        return visitor;
+    }
+    return undefined;
+}
+function serializeSelector(sel) {
+    return sel
+        .map(node => {
+        if (node.type === 'class')
+            return `.${node.value ?? node.name ?? ''}`;
+        if (node.type === 'id')
+            return `#${node.value ?? node.name ?? ''}`;
+        if (node.type === 'type')
+            return node.name ?? '';
+        if (node.type === 'pseudo-class')
+            return `:${node.kind ?? ''}`;
+        if (node.type === 'combinator')
+            return ` ${node.value ?? ''} `;
+        return '';
+    })
+        .join('')
+        .trim();
+}
+function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function findLastClassName(selector) {
+    let match;
+    let last;
+    const rx = /\.([A-Za-z0-9_-]+)/g;
+    while ((match = rx.exec(selector)) !== null) {
+        last = match[1];
+    }
+    return last;
+}
+function applyStringSpecificityBoost(css, boost) {
+    if (!boost.strategy)
+        return css;
+    const matchers = (boost.match ?? []).map(m => typeof m === 'string' ? new RegExp(`\\.${escapeRegex(m)}(?![\\w-])`, 'g') : m);
+    const applyAll = matchers.length === 0;
+    if (boost.strategy.type === 'repeat-class') {
+        const times = Math.max(1, boost.strategy.times ?? 1);
+        const duplicate = (cls) => cls + cls.repeat(times);
+        if (applyAll) {
+            return css.replace(/\.[A-Za-z0-9_-]+/g, m => duplicate(m));
+        }
+        let result = css;
+        for (const rx of matchers) {
+            result = result.replace(rx, m => duplicate(m));
+        }
+        return result;
+    }
+    if (boost.strategy.type === 'append-where') {
+        const token = boost.strategy.token.replace(/^\./, '');
+        const suffix = `:where(.${token})`;
+        if (applyAll) {
+            return css.replace(/\.[A-Za-z0-9_-]+/g, m => `${m}${suffix}`);
+        }
+        let result = css;
+        for (const rx of matchers) {
+            result = result.replace(rx, m => `${m}${suffix}`);
+        }
+        return result;
+    }
+    return css;
+}

package/dist/cjs/helpers.d.cts

@@ -0,0 +1,27 @@
+import { type TransformOptions as LightningTransformOptions } from 'lightningcss';
+export type SpecificitySelector = string | RegExp;
+export type LightningVisitor = LightningTransformOptions<Record<string, never>>['visitor'];
+export type SpecificityStrategy = {
+    type: 'append-where';
+    token: string;
+} | {
+    type: 'repeat-class';
+    times?: number;
+};
+export declare function buildSpecificityVisitor(boost?: {
+    visitor?: LightningVisitor;
+    strategy?: SpecificityStrategy;
+    match?: SpecificitySelector[];
+}): LightningVisitor | undefined;
+export declare function serializeSelector(sel: Array<{
+    type: string;
+    value?: string;
+    name?: string;
+    kind?: string;
+}>): string;
+export declare function escapeRegex(str: string): string;
+export declare function findLastClassName(selector: string): string | undefined;
+export declare function applyStringSpecificityBoost(css: string, boost: {
+    strategy?: SpecificityStrategy;
+    match?: SpecificitySelector[];
+}): string;

package/dist/css.d.ts

@@ -1,5 +1,6 @@
 import type { Options as DependencyTreeOpts } from 'dependency-tree';
 import { type TransformOptions as LightningTransformOptions } from 'lightningcss';
+import { type SpecificitySelector, type SpecificityStrategy } from './helpers.js';
 export declare const DEFAULT_EXTENSIONS: string[];
 type LightningCssConfig = boolean | Partial<Omit<LightningTransformOptions<never>, 'code'>>;
 export type CssResolver = (specifier: string, ctx: {
@@ -11,6 +12,11 @@ export interface CssOptions {
     cwd?: string;
     filter?: (filePath: string) => boolean;
     lightningcss?: LightningCssConfig;
+    specificityBoost?: {
+        visitor?: LightningTransformOptions<never>['visitor'];
+        strategy?: SpecificityStrategy;
+        match?: SpecificitySelector[];
+    };
     dependencyTree?: Partial<Omit<DependencyTreeOpts, 'filename' | 'directory'>>;
     resolver?: CssResolver;
     peerResolver?: PeerLoader;

package/dist/css.js

@@ -1,7 +1,8 @@
 import path from 'node:path';
 import { promises as fs } from 'node:fs';
 import dependencyTree from 'dependency-tree';
-import { transform as lightningTransform, } from 'lightningcss';
+import { composeVisitors, transform as lightningTransform, } from 'lightningcss';
+import { applyStringSpecificityBoost, buildSpecificityVisitor, } from './helpers.js';
 export const DEFAULT_EXTENSIONS = ['.css', '.scss', '.sass', '.less', '.css.ts'];
 export async function css(entry, options = {}) {
     const { css: output } = await cssWithMeta(entry, options);
@@ -33,6 +34,13 @@ export async function cssWithMeta(entry, options = {}) {
     let output = chunks.join('\n');
     if (options.lightningcss) {
         const lightningOptions = normalizeLightningOptions(options.lightningcss);
+        const boostVisitor = buildSpecificityVisitor(options.specificityBoost);
+        const combinedVisitor = boostVisitor && lightningOptions.visitor
+            ? composeVisitors([boostVisitor, lightningOptions.visitor])
+            : (boostVisitor ?? lightningOptions.visitor);
+        if (combinedVisitor) {
+            lightningOptions.visitor = combinedVisitor;
+        }
         const { code } = lightningTransform({
             ...lightningOptions,
             filename: lightningOptions.filename ?? 'extracted.css',
@@ -40,6 +48,9 @@ export async function cssWithMeta(entry, options = {}) {
         });
         output = code.toString();
     }
+    if (options.specificityBoost?.strategy && !options.specificityBoost.visitor) {
+        output = applyStringSpecificityBoost(output, options.specificityBoost);
+    }
     return { css: output, files: files.map(file => file.path) };
 }
 async function resolveEntry(entry, cwd, resolver) {

package/dist/helpers.d.ts

@@ -0,0 +1,27 @@
+import { type TransformOptions as LightningTransformOptions } from 'lightningcss';
+export type SpecificitySelector = string | RegExp;
+export type LightningVisitor = LightningTransformOptions<Record<string, never>>['visitor'];
+export type SpecificityStrategy = {
+    type: 'append-where';
+    token: string;
+} | {
+    type: 'repeat-class';
+    times?: number;
+};
+export declare function buildSpecificityVisitor(boost?: {
+    visitor?: LightningVisitor;
+    strategy?: SpecificityStrategy;
+    match?: SpecificitySelector[];
+}): LightningVisitor | undefined;
+export declare function serializeSelector(sel: Array<{
+    type: string;
+    value?: string;
+    name?: string;
+    kind?: string;
+}>): string;
+export declare function escapeRegex(str: string): string;
+export declare function findLastClassName(selector: string): string | undefined;
+export declare function applyStringSpecificityBoost(css: string, boost: {
+    strategy?: SpecificityStrategy;
+    match?: SpecificitySelector[];
+}): string;

package/dist/helpers.js

@@ -0,0 +1,124 @@
+export function buildSpecificityVisitor(boost) {
+    if (!boost)
+        return undefined;
+    if (boost.visitor)
+        return boost.visitor;
+    if (!boost.strategy)
+        return undefined;
+    const matchers = (boost.match ?? []).map(m => typeof m === 'string' ? new RegExp(`^${escapeRegex(m)}$`) : m);
+    const shouldApply = (selectorStr) => matchers.length === 0 ? true : matchers.some(rx => rx.test(selectorStr));
+    if (boost.strategy.type === 'repeat-class') {
+        const times = Math.max(1, boost.strategy.times ?? 1);
+        const visitor = {
+            Rule: {
+                style(rule) {
+                    if (!rule || !Array.isArray(rule.selectors))
+                        return rule;
+                    const newSelectors = rule.selectors.map((sel) => {
+                        const selectorStr = serializeSelector(sel);
+                        if (!shouldApply(selectorStr))
+                            return sel;
+                        const lastClassName = findLastClassName(selectorStr);
+                        if (!lastClassName)
+                            return sel;
+                        const repeats = Array.from({ length: times }, () => ({
+                            type: 'class',
+                            value: lastClassName,
+                        }));
+                        return [...sel, ...repeats];
+                    });
+                    return { ...rule, selectors: newSelectors };
+                },
+            },
+        };
+        return visitor;
+    }
+    if (boost.strategy.type === 'append-where') {
+        const token = boost.strategy.token;
+        const visitor = {
+            Rule: {
+                style(rule) {
+                    if (!rule || !Array.isArray(rule.selectors))
+                        return rule;
+                    const newSelectors = rule.selectors.map((sel) => {
+                        const selectorStr = serializeSelector(sel);
+                        if (!shouldApply(selectorStr))
+                            return sel;
+                        return [
+                            ...sel,
+                            {
+                                type: 'pseudo-class',
+                                kind: 'where',
+                                selectors: [[{ type: 'class', value: token.replace(/^\./, '') }]],
+                            },
+                        ];
+                    });
+                    return { ...rule, selectors: newSelectors };
+                },
+            },
+        };
+        return visitor;
+    }
+    return undefined;
+}
+export function serializeSelector(sel) {
+    return sel
+        .map(node => {
+        if (node.type === 'class')
+            return `.${node.value ?? node.name ?? ''}`;
+        if (node.type === 'id')
+            return `#${node.value ?? node.name ?? ''}`;
+        if (node.type === 'type')
+            return node.name ?? '';
+        if (node.type === 'pseudo-class')
+            return `:${node.kind ?? ''}`;
+        if (node.type === 'combinator')
+            return ` ${node.value ?? ''} `;
+        return '';
+    })
+        .join('')
+        .trim();
+}
+export function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+export function findLastClassName(selector) {
+    let match;
+    let last;
+    const rx = /\.([A-Za-z0-9_-]+)/g;
+    while ((match = rx.exec(selector)) !== null) {
+        last = match[1];
+    }
+    return last;
+}
+export function applyStringSpecificityBoost(css, boost) {
+    if (!boost.strategy)
+        return css;
+    const matchers = (boost.match ?? []).map(m => typeof m === 'string' ? new RegExp(`\\.${escapeRegex(m)}(?![\\w-])`, 'g') : m);
+    const applyAll = matchers.length === 0;
+    if (boost.strategy.type === 'repeat-class') {
+        const times = Math.max(1, boost.strategy.times ?? 1);
+        const duplicate = (cls) => cls + cls.repeat(times);
+        if (applyAll) {
+            return css.replace(/\.[A-Za-z0-9_-]+/g, m => duplicate(m));
+        }
+        let result = css;
+        for (const rx of matchers) {
+            result = result.replace(rx, m => duplicate(m));
+        }
+        return result;
+    }
+    if (boost.strategy.type === 'append-where') {
+        const token = boost.strategy.token.replace(/^\./, '');
+        const suffix = `:where(.${token})`;
+        if (applyAll) {
+            return css.replace(/\.[A-Za-z0-9_-]+/g, m => `${m}${suffix}`);
+        }
+        let result = css;
+        for (const rx of matchers) {
+            result = result.replace(rx, m => `${m}${suffix}`);
+        }
+        return result;
+    }
+    return css;
+}

package/dist/loader.d.ts

@@ -1,4 +1,6 @@
-/// <reference path="./loader-queries.d.ts" />
-
-export * from '../loader.js'
-export { default } from '../loader.js'
+import type { LoaderDefinitionFunction } from 'webpack';
+import { type CssOptions } from './css.js';
+export interface KnightedCssLoaderOptions extends CssOptions {
+}
+declare const loader: LoaderDefinitionFunction<KnightedCssLoaderOptions>;
+export default loader;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@knighted/css",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "A build-time utility that traverses JavaScript/TypeScript module dependency graphs to extract, compile, and optimize all imported CSS into a single, in-memory string.",
   "type": "module",
   "main": "./dist/css.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/css.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/css.d.ts",
       "import": "./dist/css.js",
       "require": "./dist/cjs/css.cjs"
     },
@@ -17,46 +17,23 @@
       "require": "./dist/cjs/loader.cjs"
     }
   },
-  "engines": {
-    "node": ">= 22.15.0",
-    "npm": ">= 10.9.0"
-  },
-  "engineStrict": true,
   "keywords": [
     "css",
-    "extract-css",
-    "styles",
     "dependency-graph",
-    "module-dependencies",
-    "lit",
-    "web-components",
-    "shadow-dom",
+    "build-time",
+    "compile",
+    "styles",
     "sass",
     "scss",
     "less",
     "vanilla-extract",
-    "lightningcss",
-    "build-time",
-    "static-analysis",
-    "css-in-js-zero-runtime"
+    "lightningcss"
   ],
   "scripts": {
     "build": "duel",
-    "postbuild": "cp src/types/*.d.ts dist/",
     "check-types": "tsc --noEmit",
     "test": "c8 --reporter=text --reporter=text-summary --reporter=lcov --include \"src/**/*.ts\" tsx --test test/**/*.test.ts",
-    "build:fixture": "npx rspack --config test/fixtures/loader-rspack/rspack.config.js",
-    "preview:fixture": "npm run build:fixture && npx http-server test/fixtures/loader-rspack -p 4173",
-    "prebuild:fixture:playwright": "npm run build",
-    "build:fixture:playwright": "npx rspack --config test/fixtures/playwright/rspack.config.js",
-    "serve:fixture:playwright": "npx http-server test/fixtures/playwright/dist -p 4174",
-    "preview:fixture:playwright": "npm run build:fixture:playwright && npx http-server test/fixtures/playwright -p 4174",
-    "test:e2e": "npx playwright test",
-    "prettier": "prettier --write .",
-    "prettier:check": "prettier --check .",
-    "lint": "oxlint src test",
-    "prepack": "npm run build",
-    "prepare": "husky"
+    "prepack": "npm run build"
   },
   "dependencies": {
     "dependency-tree": "^11.2.0",
@@ -78,27 +55,6 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@knighted/duel": "^2.1.6",
-    "@playwright/test": "^1.48.2",
-    "@rspack/cli": "^1.0.0",
-    "@rspack/core": "^1.0.0",
-    "@types/less": "^3.0.8",
-    "@types/webpack": "^5.28.5",
-    "@vanilla-extract/css": "^1.15.2",
-    "@vanilla-extract/integration": "^8.0.6",
-    "@vanilla-extract/recipes": "^0.5.7",
-    "c8": "^10.1.2",
-    "http-server": "^14.1.1",
-    "husky": "^9.1.7",
-    "less": "^4.2.0",
-    "lint-staged": "^16.2.7",
-    "oxlint": "^0.4.1",
-    "prettier": "^3.7.4",
-    "sass": "^1.80.7",
-    "tsx": "^4.19.2",
-    "typescript": "^5.9.3"
-  },
   "files": [
     "dist"
   ],
@@ -110,15 +66,5 @@
   },
   "bugs": {
     "url": "https://github.com/knightedcodemonkey/css/issues"
-  },
-  "prettier": {
-    "arrowParens": "avoid",
-    "printWidth": 90,
-    "semi": false,
-    "singleQuote": true
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,mjs,cjs,cts,mts}": "oxlint",
-    "*.{js,jsx,ts,tsx,mjs,cjs,cts,mts,json,md,css,scss,html}": "prettier --check"
   }
 }

package/README.md

@@ -1,190 +0,0 @@
-# [`@knighted/css`](https://github.com/knightedcodemonkey/css)
-
-![CI](https://github.com/knightedcodemonkey/css/actions/workflows/ci.yml/badge.svg)
-[![codecov](https://codecov.io/gh/knightedcodemonkey/css/graph/badge.svg?token=q93Qqwvq6l)](https://codecov.io/gh/knightedcodemonkey/css)
-[![NPM version](https://img.shields.io/npm/v/@knighted/css.svg)](https://www.npmjs.com/package/@knighted/css)
-
-`@knighted/css` is a build-time helper that walks a JavaScript/TypeScript module graph, finds every CSS-like dependency (plain CSS, Sass/SCSS, Less, vanilla-extract), compiles them, and returns a single concatenated stylesheet string. It is designed for workflows where you want fully materialized styles ahead of time—feeding Lit components, server-rendered routes, static site builds, or any pipeline that needs all CSS for a specific entry point without running a full bundler.
-
-## Features
-
-- Traverses module graphs using [`dependency-tree`](https://github.com/dependents/node-dependency-tree) to find transitive style imports.
-- Compiles `*.css`, `*.scss`, `*.sass`, `*.less`, and `*.css.ts` (vanilla-extract) files out of the box.
-- Optional post-processing via [`lightningcss`](https://github.com/parcel-bundler/lightningcss) for minification, prefixing, and media query optimizations.
-- Pluggable resolver/filter hooks for custom module resolution (e.g., Rspack/Vite/webpack aliases) or selective inclusion.
-- Peer-resolution helper for optional toolchains (`sass`, `less`, `@vanilla-extract/integration`) so consumers control their dependency graph.
-
-## Requirements
-
-- Node.js `>= 22.15.0`
-- npm `>= 10.9.0`
-- Install peer toolchains you intend to use (`sass`, `less`, `@vanilla-extract/integration`, `@vanilla-extract/recipes`, etc.).
-
-## Installation
-
-```bash
-npm install @knighted/css
-```
-
-Install the peers your project is using, for example `less`, or `sass`, etc.
-
-## Quick Start
-
-```ts
-// scripts/extract-styles.ts
-import { css } from '@knighted/css'
-
-const styles = await css('./src/components/app.ts', {
-  cwd: process.cwd(),
-  lightningcss: { minify: true },
-})
-
-console.log(styles)
-```
-
-Run it with `tsx`/`node` and you will see a fully inlined stylesheet for `app.ts` and every style import it references, regardless of depth.
-
-## API
-
-```ts
-type CssOptions = {
-  extensions?: string[] // customize file extensions to scan
-  cwd?: string // working directory (defaults to process.cwd())
-  filter?: (filePath: string) => boolean
-  lightningcss?: boolean | LightningTransformOptions
-  dependencyTree?: DependencyTreeOptions
-  resolver?: (
-    specifier: string,
-    ctx: { cwd: string },
-  ) => string | Promise<string | undefined>
-  peerResolver?: (name: string) => Promise<unknown> // for custom module loading
-}
-
-async function css(entry: string, options?: CssOptions): Promise<string>
-```
-
-Typical customizations:
-
-- **filter** – Skip certain paths (e.g., storybook-only styles) before compilation.
-- **resolver** – Resolve virtual specifiers the way your bundler does (the repo ships test fixtures for webpack, Vite, and Rspack).
-- **lightningcss** – Pass `true` for defaults or a config object for minification/autoprefixing.
-
-## Examples
-
-### Generate standalone stylesheets
-
-```ts
-import { writeFile } from 'node:fs/promises'
-import { css } from '@knighted/css'
-
-// Build-time script that gathers all CSS imported by a React route
-const sheet = await css('./src/routes/marketing-page.tsx', {
-  lightningcss: { minify: true, targets: { chrome: 120, safari: 17 } },
-})
-
-await writeFile('./dist/marketing-page.css', sheet)
-```
-
-### Inline CSS during SSR
-
-```ts
-import { renderToString } from 'react-dom/server'
-import { css } from '@knighted/css'
-
-export async function render(url: string) {
-  const styles = await css('./src/routes/root.tsx')
-  const html = renderToString(<App url={url} />)
-  return `<!doctype html><style>${styles}</style>${html}`
-}
-```
-
-### Bundler loader (`?knighted-css` query)
-
-When using Webpack/Rspack, add the provided loader so importing a module with a specific query also returns the compiled stylesheet. Recommended DX: import your component as usual, and import the CSS separately via the query import.
-
-```js
-// webpack.config.js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.[jt]sx?$/,
-        resourceQuery: /knighted-css/,
-        use: [
-          {
-            loader: '@knighted/css/loader',
-            options: {
-              lightningcss: { minify: true }, // all css() options supported
-            },
-          },
-        ],
-      },
-    ],
-  },
-}
-```
-
-```ts
-// lit wrapper
-import { LitElement, html, unsafeCSS } from 'lit'
-import { Button } from './button.tsx'
-import { knightedCss as reactStyles } from './button.tsx?knighted-css'
-
-export class ButtonWrapper extends LitElement {
-  static styles = [unsafeCSS(reactStyles)]
-  render() {
-    return html`<${Button} />`
-  }
-}
-
-// Prefer import aliasing when you need a different local name:
-// import { knightedCss as cardCss } from './button.tsx?knighted-css'
-```
-
-The loader appends `export const knightedCss = "/* compiled css */"` to the module when imported with `?knighted-css`. Keep your main module import separate to preserve its typing; use the query import only for the CSS string.
-
-### Custom resolver (enhanced-resolve example)
-
-If your project uses aliases or nonstandard resolution, plug in a custom resolver. Here’s how to use [`enhanced-resolve`](https://github.com/webpack/enhanced-resolve):
-
-```ts
-import { ResolverFactory } from 'enhanced-resolve'
-import { css } from '@knighted/css'
-
-const resolver = ResolverFactory.createResolver({
-  extensions: ['.ts', '.tsx', '.js'],
-  mainFiles: ['index'],
-})
-
-async function resolveWithEnhanced(id: string, cwd: string): Promise<string | undefined> {
-  return new Promise((resolve, reject) => {
-    resolver.resolve({}, cwd, id, {}, (err, result) => {
-      if (err) return reject(err)
-      resolve(result ?? undefined)
-    })
-  })
-}
-
-const styles = await css('./src/routes/page.tsx', {
-  resolver: (specifier, { cwd }) => resolveWithEnhanced(specifier, cwd),
-})
-```
-
-This keeps `@knighted/css` resolution in sync with your bundler’s alias/extension rules.
-
-## Scripts
-
-- `npm run build` – Produce CJS/ESM outputs via `@knighted/duel`.
-- `npm test` – Runs the Node test suite with `tsx` and reports coverage via `c8`.
-- `npm run lint` – Static analysis through `oxlint`.
-
-## Contributing
-
-1. Clone the repo and install dependencies with `npm install`.
-2. Run `npm test` to ensure fixtures compile across Sass/Less/vanilla-extract.
-3. Add/adjust fixtures in `fixtures/` when adding new language features to keep coverage high.
-4. Open a PR with a description of the change and tests.
-
-## License
-
-MIT © Knighted Code Monkey

package/dist/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference path="./loader-queries.d.ts" />
-
-export * from '../css.js'
-export { default } from '../css.js'

package/dist/loader-queries.d.ts

@@ -1,7 +0,0 @@
-/**
- * Ambient declaration for loader query imports like "./file.js?knighted-css".
- * The loader appends a named export `knightedCss` containing the compiled CSS.
- */
-declare module '*?knighted-css*' {
-  export const knightedCss: string
-}