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

package/README.md

@@ -100,7 +100,7 @@ export async function render(url: string) {
 
 ### 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:
+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
@@ -114,7 +114,6 @@ module.exports = {
           {
             loader: '@knighted/css/loader',
             options: {
-              exportName: 'reactStyles', // optional (default: "knightedCss")
               lightningcss: { minify: true }, // all css() options supported
             },
           },
@@ -128,7 +127,8 @@ module.exports = {
 ```ts
 // lit wrapper
 import { LitElement, html, unsafeCSS } from 'lit'
-import { Button, reactStyles } from './button.tsx?knighted-css'
+import { Button } from './button.tsx'
+import { knightedCss as reactStyles } from './button.tsx?knighted-css'
 
 export class ButtonWrapper extends LitElement {
   static styles = [unsafeCSS(reactStyles)]
@@ -137,12 +137,40 @@ export class ButtonWrapper extends LitElement {
   }
 }
 
-// per-import override:
-// import { Button, cardCss } from './button.tsx?knighted-css&exportName=cardCss'
-// (exportName in the query wins over the loader option)
+// Prefer import aliasing when you need a different local name:
+// import { knightedCss as cardCss } from './button.tsx?knighted-css'
 ```
 
-The loader appends `export const reactStyles = "/* compiled css */"` to the module, so you can wire it directly into Lit’s `static styles` or any other runtime.
+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
 

package/dist/cjs/css.d.cts

@@ -1,4 +1,4 @@
-import type { DependencyTreeOptions } from 'dependency-tree';
+import type { Options as DependencyTreeOpts } from 'dependency-tree';
 import { type TransformOptions as LightningTransformOptions } from 'lightningcss';
 export declare const DEFAULT_EXTENSIONS: string[];
 type LightningCssConfig = boolean | Partial<Omit<LightningTransformOptions<never>, 'code'>>;
@@ -11,7 +11,7 @@ export interface CssOptions {
     cwd?: string;
     filter?: (filePath: string) => boolean;
     lightningcss?: LightningCssConfig;
-    dependencyTree?: Partial<Omit<DependencyTreeOptions, 'filename' | 'directory'>>;
+    dependencyTree?: Partial<Omit<DependencyTreeOpts, 'filename' | 'directory'>>;
     resolver?: CssResolver;
     peerResolver?: PeerLoader;
 }

package/dist/cjs/loader.cjs

@@ -4,14 +4,7 @@ const css_js_1 = require("./css.cjs");
 const DEFAULT_EXPORT_NAME = 'knightedCss';
 const loader = async function loader(source) {
     const rawOptions = (typeof this.getOptions === 'function' ? this.getOptions() : {});
-    const queryParams = typeof this.resourceQuery === 'string' && this.resourceQuery.startsWith('?')
-        ? new URLSearchParams(this.resourceQuery.slice(1))
-        : undefined;
-    const queryExportName = queryParams?.get('exportName')?.trim();
-    const isValidIdentifier = typeof queryExportName === 'string' &&
-        /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(queryExportName);
-    const { exportName = DEFAULT_EXPORT_NAME, ...cssOptions } = rawOptions;
-    const resolvedExportName = isValidIdentifier ? queryExportName : exportName;
+    const cssOptions = rawOptions;
     const normalizedOptions = {
         ...cssOptions,
         cwd: cssOptions.cwd ?? this.rootContext ?? process.cwd(),
@@ -22,8 +15,11 @@ const loader = async function loader(source) {
         this.addDependency(file);
     }
     const input = typeof source === 'string' ? source : source.toString('utf8');
-    const injection = `\n\nexport const ${resolvedExportName} = ${JSON.stringify(css)};\n`;
-    const output = `${input}${injection}`;
+    const injection = `\n\nexport const ${DEFAULT_EXPORT_NAME} = ${JSON.stringify(css)};\n`;
+    const isStyleModule = this.resourcePath.endsWith('.css.ts');
+    const output = isStyleModule
+        ? `${injection}export default {};\n`
+        : `${input}${injection}`;
     return output;
 };
 exports.default = loader;

package/dist/cjs/loader.d.cts

@@ -1,11 +1,6 @@
 import type { LoaderDefinitionFunction } from 'webpack';
 import { type CssOptions } from './css.cjs';
 export interface KnightedCssLoaderOptions extends CssOptions {
-    /**
-     * Named export that will contain the compiled CSS string.
-     * Defaults to "knightedCss".
-     */
-    exportName?: string;
 }
 declare const loader: LoaderDefinitionFunction<KnightedCssLoaderOptions>;
 export default loader;

package/dist/css.d.ts

@@ -1,4 +1,4 @@
-import type { DependencyTreeOptions } from 'dependency-tree';
+import type { Options as DependencyTreeOpts } from 'dependency-tree';
 import { type TransformOptions as LightningTransformOptions } from 'lightningcss';
 export declare const DEFAULT_EXTENSIONS: string[];
 type LightningCssConfig = boolean | Partial<Omit<LightningTransformOptions<never>, 'code'>>;
@@ -11,7 +11,7 @@ export interface CssOptions {
     cwd?: string;
     filter?: (filePath: string) => boolean;
     lightningcss?: LightningCssConfig;
-    dependencyTree?: Partial<Omit<DependencyTreeOptions, 'filename' | 'directory'>>;
+    dependencyTree?: Partial<Omit<DependencyTreeOpts, 'filename' | 'directory'>>;
     resolver?: CssResolver;
     peerResolver?: PeerLoader;
 }

package/dist/index.d.ts

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

package/dist/loader-queries.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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
+}

package/dist/loader.d.ts

@@ -1,11 +1,4 @@
-import type { LoaderDefinitionFunction } from 'webpack';
-import { type CssOptions } from './css.js';
-export interface KnightedCssLoaderOptions extends CssOptions {
-    /**
-     * Named export that will contain the compiled CSS string.
-     * Defaults to "knightedCss".
-     */
-    exportName?: string;
-}
-declare const loader: LoaderDefinitionFunction<KnightedCssLoaderOptions>;
-export default loader;
+/// <reference path="./loader-queries.d.ts" />
+
+export * from '../loader.js'
+export { default } from '../loader.js'

package/dist/loader.js

@@ -2,14 +2,7 @@ import { cssWithMeta } from './css.js';
 const DEFAULT_EXPORT_NAME = 'knightedCss';
 const loader = async function loader(source) {
     const rawOptions = (typeof this.getOptions === 'function' ? this.getOptions() : {});
-    const queryParams = typeof this.resourceQuery === 'string' && this.resourceQuery.startsWith('?')
-        ? new URLSearchParams(this.resourceQuery.slice(1))
-        : undefined;
-    const queryExportName = queryParams?.get('exportName')?.trim();
-    const isValidIdentifier = typeof queryExportName === 'string' &&
-        /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(queryExportName);
-    const { exportName = DEFAULT_EXPORT_NAME, ...cssOptions } = rawOptions;
-    const resolvedExportName = isValidIdentifier ? queryExportName : exportName;
+    const cssOptions = rawOptions;
     const normalizedOptions = {
         ...cssOptions,
         cwd: cssOptions.cwd ?? this.rootContext ?? process.cwd(),
@@ -20,8 +13,11 @@ const loader = async function loader(source) {
         this.addDependency(file);
     }
     const input = typeof source === 'string' ? source : source.toString('utf8');
-    const injection = `\n\nexport const ${resolvedExportName} = ${JSON.stringify(css)};\n`;
-    const output = `${input}${injection}`;
+    const injection = `\n\nexport const ${DEFAULT_EXPORT_NAME} = ${JSON.stringify(css)};\n`;
+    const isStyleModule = this.resourcePath.endsWith('.css.ts');
+    const output = isStyleModule
+        ? `${injection}export default {};\n`
+        : `${input}${injection}`;
     return output;
 };
 export default loader;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@knighted/css",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "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/css.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/css.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/css.js",
       "require": "./dist/cjs/css.cjs"
     },
@@ -42,8 +42,16 @@
   ],
   "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",
@@ -51,7 +59,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "dependency-tree": "^9.0.0",
+    "dependency-tree": "^11.2.0",
     "lightningcss": "^1.30.2"
   },
   "peerDependencies": {
@@ -72,6 +80,8 @@
   },
   "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",
@@ -79,6 +89,7 @@
     "@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",