@knighted/css 1.0.0-rc.0 → 1.0.0-rc.2

package/dist/cjs/css.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_EXTENSIONS = void 0;
 exports.css = css;
 exports.cssWithMeta = cssWithMeta;
+exports.compileVanillaModule = compileVanillaModule;
 const node_path_1 = __importDefault(require("node:path"));
 const node_fs_1 = require("node:fs");
 const dependency_tree_1 = __importDefault(require("dependency-tree"));
@@ -114,7 +115,7 @@ async function compileStyleModule(file, { cwd, peerResolver }) {
         case '.less':
             return compileLess(file.path, peerResolver);
         case '.css.ts':
-            return compileVanillaExtract(file.path, cwd, peerResolver);
+            return (await compileVanillaModule(file.path, cwd, peerResolver)).css;
         default:
             return '';
     }
@@ -134,7 +135,7 @@ async function compileLess(filePath, peerResolver) {
     const result = await less.render(source, { filename: filePath });
     return result.css;
 }
-async function compileVanillaExtract(filePath, cwd, peerResolver) {
+async function compileVanillaModule(filePath, cwd, peerResolver) {
     const mod = await optionalPeer('@vanilla-extract/integration', 'Vanilla Extract', peerResolver);
     const namespace = unwrapModuleNamespace(mod);
     const compileFn = namespace.compile;
@@ -174,7 +175,10 @@ async function compileVanillaExtract(filePath, cwd, peerResolver) {
             imports.push(virtualFile.source);
         }
     }
-    return imports.join('\n');
+    return {
+        source,
+        css: imports.join('\n'),
+    };
 }
 const defaultPeerLoader = name => import(name);
 async function optionalPeer(name, label, loader) {

package/dist/cjs/css.d.cts

@@ -21,6 +21,10 @@ export interface CssOptions {
     resolver?: CssResolver;
     peerResolver?: PeerLoader;
 }
+export interface VanillaCompileResult {
+    source: string;
+    css: string;
+}
 /**
  * Extract and compile all CSS-like dependencies for a given module.
  */
@@ -30,4 +34,5 @@ export interface CssResult {
 }
 export declare function css(entry: string, options?: CssOptions): Promise<string>;
 export declare function cssWithMeta(entry: string, options?: CssOptions): Promise<CssResult>;
+export declare function compileVanillaModule(filePath: string, cwd: string, peerResolver?: PeerLoader): Promise<VanillaCompileResult>;
 export {};

package/dist/cjs/loader.cjs

@@ -5,29 +5,63 @@ const css_js_1 = require("./css.cjs");
 const DEFAULT_EXPORT_NAME = 'knightedCss';
 const COMBINED_QUERY_FLAG = 'combined';
 const loader = async function loader(source) {
-    const cssOptions = resolveCssOptions(this);
+    const { cssOptions, vanillaOptions } = resolveLoaderOptions(this);
     const css = await extractCss(this, cssOptions);
     const injection = buildInjection(css);
-    const input = toSourceString(source);
     const isStyleModule = this.resourcePath.endsWith('.css.ts');
-    return isStyleModule ? `${injection}export default {};\n` : `${input}${injection}`;
+    if (isStyleModule) {
+        const { source: compiledSource } = await (0, css_js_1.compileVanillaModule)(this.resourcePath, cssOptions.cwd ?? this.rootContext ?? process.cwd(), cssOptions.peerResolver);
+        const vanillaSource = maybeTransformVanillaModule(compiledSource, vanillaOptions);
+        return `${vanillaSource}${injection}`;
+    }
+    const input = toSourceString(source);
+    return `${input}${injection}`;
 };
+function transformVanillaModuleToEsm(source) {
+    const exportBlock = /__export\([^,]+,\s*{([\s\S]*?)}\);/m.exec(source);
+    if (!exportBlock) {
+        return source;
+    }
+    const names = exportBlock[1]
+        .split(',')
+        .map(part => part.trim())
+        .filter(Boolean)
+        .map(entry => entry.split(':')[0]?.trim())
+        .filter(Boolean);
+    let transformed = source.replace(/module\.exports\s*=\s*__toCommonJS\([^;]+;\n?/m, '');
+    transformed = transformed.replace(/0 && \(module\.exports = {[^}]+}\);?\n?/m, '');
+    if (names.length > 0) {
+        transformed = `${transformed}\nexport { ${names.join(', ')} };\n`;
+    }
+    return transformed;
+}
+function maybeTransformVanillaModule(source, options) {
+    if (!options?.transformToEsm) {
+        return source;
+    }
+    return transformVanillaModuleToEsm(source);
+}
 const pitch = function pitch() {
     if (!hasCombinedQuery(this.resourceQuery)) {
         return;
     }
     const request = buildProxyRequest(this);
-    const cssOptions = resolveCssOptions(this);
+    const { cssOptions } = resolveLoaderOptions(this);
     return extractCss(this, cssOptions).then(css => createCombinedModule(request, css));
 };
 exports.pitch = pitch;
 loader.pitch = exports.pitch;
 exports.default = loader;
-function resolveCssOptions(ctx) {
+function resolveLoaderOptions(ctx) {
     const rawOptions = (typeof ctx.getOptions === 'function' ? ctx.getOptions() : {});
+    const { vanilla, ...rest } = rawOptions;
+    const cssOptions = {
+        ...rest,
+        cwd: rest.cwd ?? ctx.rootContext ?? process.cwd(),
+    };
     return {
-        ...rawOptions,
-        cwd: rawOptions.cwd ?? ctx.rootContext ?? process.cwd(),
+        cssOptions,
+        vanillaOptions: vanilla,
     };
 }
 async function extractCss(ctx, options) {
@@ -57,6 +91,11 @@ function hasCombinedQuery(query) {
 }
 function buildProxyRequest(ctx) {
     const sanitizedQuery = buildSanitizedQuery(ctx.resourceQuery);
+    const rawRequest = getRawRequest(ctx);
+    if (rawRequest) {
+        const stripped = stripResourceQuery(rawRequest);
+        return `${stripped}${sanitizedQuery}`;
+    }
     const request = `${ctx.resourcePath}${sanitizedQuery}`;
     const context = ctx.context ?? ctx.rootContext ?? process.cwd();
     if (ctx.utils && typeof ctx.utils.contextify === 'function') {
@@ -64,6 +103,18 @@ function buildProxyRequest(ctx) {
     }
     return request;
 }
+function getRawRequest(ctx) {
+    const mod = ctx._module;
+    const request = mod?.rawRequest;
+    if (typeof request === 'string' && request.length > 0) {
+        return request;
+    }
+    return undefined;
+}
+function stripResourceQuery(request) {
+    const idx = request.indexOf('?');
+    return idx >= 0 ? request.slice(0, idx) : request;
+}
 function buildSanitizedQuery(query) {
     if (!query)
         return '';
@@ -89,15 +140,26 @@ function isQueryFlag(entry, flag) {
 }
 function createCombinedModule(request, css) {
     const requestLiteral = JSON.stringify(request);
-    const defaultExport = `const __knightedDefault =
-typeof __knightedModule.default !== 'undefined'
-  ? __knightedModule.default
-  : __knightedModule;`;
-    return [
+    const lines = [
         `import * as __knightedModule from ${requestLiteral};`,
         `export * from ${requestLiteral};`,
-        defaultExport,
-        'export default __knightedDefault;',
-        buildInjection(css),
-    ].join('\n');
+    ];
+    if (shouldForwardDefaultExport(request)) {
+        lines.push(`const __knightedDefault =
+typeof __knightedModule.default !== 'undefined'
+  ? __knightedModule.default
+  : __knightedModule;`, 'export default __knightedDefault;');
+    }
+    lines.push(buildInjection(css));
+    return lines.join('\n');
+}
+function shouldForwardDefaultExport(request) {
+    const [pathPart] = request.split('?');
+    if (!pathPart)
+        return true;
+    const lower = pathPart.toLowerCase();
+    if (lower.endsWith('.css.ts') || lower.endsWith('.css.js')) {
+        return false;
+    }
+    return true;
 }

package/dist/cjs/loader.d.cts

@@ -3,7 +3,11 @@ import { type CssOptions } from './css.cjs';
 export type KnightedCssCombinedModule<TModule> = TModule & {
     knightedCss: string;
 };
+export interface KnightedCssVanillaOptions {
+    transformToEsm?: boolean;
+}
 export interface KnightedCssLoaderOptions extends CssOptions {
+    vanilla?: KnightedCssVanillaOptions;
 }
 declare const loader: LoaderDefinitionFunction<KnightedCssLoaderOptions>;
 export declare const pitch: PitchLoaderDefinitionFunction<KnightedCssLoaderOptions>;

package/dist/css.d.ts

@@ -21,6 +21,10 @@ export interface CssOptions {
     resolver?: CssResolver;
     peerResolver?: PeerLoader;
 }
+export interface VanillaCompileResult {
+    source: string;
+    css: string;
+}
 /**
  * Extract and compile all CSS-like dependencies for a given module.
  */
@@ -30,4 +34,5 @@ export interface CssResult {
 }
 export declare function css(entry: string, options?: CssOptions): Promise<string>;
 export declare function cssWithMeta(entry: string, options?: CssOptions): Promise<CssResult>;
+export declare function compileVanillaModule(filePath: string, cwd: string, peerResolver?: PeerLoader): Promise<VanillaCompileResult>;
 export {};

package/dist/css.js

@@ -106,7 +106,7 @@ async function compileStyleModule(file, { cwd, peerResolver }) {
         case '.less':
             return compileLess(file.path, peerResolver);
         case '.css.ts':
-            return compileVanillaExtract(file.path, cwd, peerResolver);
+            return (await compileVanillaModule(file.path, cwd, peerResolver)).css;
         default:
             return '';
     }
@@ -126,7 +126,7 @@ async function compileLess(filePath, peerResolver) {
     const result = await less.render(source, { filename: filePath });
     return result.css;
 }
-async function compileVanillaExtract(filePath, cwd, peerResolver) {
+export async function compileVanillaModule(filePath, cwd, peerResolver) {
     const mod = await optionalPeer('@vanilla-extract/integration', 'Vanilla Extract', peerResolver);
     const namespace = unwrapModuleNamespace(mod);
     const compileFn = namespace.compile;
@@ -166,7 +166,10 @@ async function compileVanillaExtract(filePath, cwd, peerResolver) {
             imports.push(virtualFile.source);
         }
     }
-    return imports.join('\n');
+    return {
+        source,
+        css: imports.join('\n'),
+    };
 }
 const defaultPeerLoader = name => import(name);
 async function optionalPeer(name, label, loader) {

package/dist/loader.d.ts

@@ -3,7 +3,11 @@ import { type CssOptions } from './css.js';
 export type KnightedCssCombinedModule<TModule> = TModule & {
     knightedCss: string;
 };
+export interface KnightedCssVanillaOptions {
+    transformToEsm?: boolean;
+}
 export interface KnightedCssLoaderOptions extends CssOptions {
+    vanilla?: KnightedCssVanillaOptions;
 }
 declare const loader: LoaderDefinitionFunction<KnightedCssLoaderOptions>;
 export declare const pitch: PitchLoaderDefinitionFunction<KnightedCssLoaderOptions>;

package/dist/loader.js

@@ -1,29 +1,63 @@
-import { cssWithMeta } from './css.js';
+import { cssWithMeta, compileVanillaModule } from './css.js';
 const DEFAULT_EXPORT_NAME = 'knightedCss';
 const COMBINED_QUERY_FLAG = 'combined';
 const loader = async function loader(source) {
-    const cssOptions = resolveCssOptions(this);
+    const { cssOptions, vanillaOptions } = resolveLoaderOptions(this);
     const css = await extractCss(this, cssOptions);
     const injection = buildInjection(css);
-    const input = toSourceString(source);
     const isStyleModule = this.resourcePath.endsWith('.css.ts');
-    return isStyleModule ? `${injection}export default {};\n` : `${input}${injection}`;
+    if (isStyleModule) {
+        const { source: compiledSource } = await compileVanillaModule(this.resourcePath, cssOptions.cwd ?? this.rootContext ?? process.cwd(), cssOptions.peerResolver);
+        const vanillaSource = maybeTransformVanillaModule(compiledSource, vanillaOptions);
+        return `${vanillaSource}${injection}`;
+    }
+    const input = toSourceString(source);
+    return `${input}${injection}`;
 };
+function transformVanillaModuleToEsm(source) {
+    const exportBlock = /__export\([^,]+,\s*{([\s\S]*?)}\);/m.exec(source);
+    if (!exportBlock) {
+        return source;
+    }
+    const names = exportBlock[1]
+        .split(',')
+        .map(part => part.trim())
+        .filter(Boolean)
+        .map(entry => entry.split(':')[0]?.trim())
+        .filter(Boolean);
+    let transformed = source.replace(/module\.exports\s*=\s*__toCommonJS\([^;]+;\n?/m, '');
+    transformed = transformed.replace(/0 && \(module\.exports = {[^}]+}\);?\n?/m, '');
+    if (names.length > 0) {
+        transformed = `${transformed}\nexport { ${names.join(', ')} };\n`;
+    }
+    return transformed;
+}
+function maybeTransformVanillaModule(source, options) {
+    if (!options?.transformToEsm) {
+        return source;
+    }
+    return transformVanillaModuleToEsm(source);
+}
 export const pitch = function pitch() {
     if (!hasCombinedQuery(this.resourceQuery)) {
         return;
     }
     const request = buildProxyRequest(this);
-    const cssOptions = resolveCssOptions(this);
+    const { cssOptions } = resolveLoaderOptions(this);
     return extractCss(this, cssOptions).then(css => createCombinedModule(request, css));
 };
 loader.pitch = pitch;
 export default loader;
-function resolveCssOptions(ctx) {
+function resolveLoaderOptions(ctx) {
     const rawOptions = (typeof ctx.getOptions === 'function' ? ctx.getOptions() : {});
+    const { vanilla, ...rest } = rawOptions;
+    const cssOptions = {
+        ...rest,
+        cwd: rest.cwd ?? ctx.rootContext ?? process.cwd(),
+    };
     return {
-        ...rawOptions,
-        cwd: rawOptions.cwd ?? ctx.rootContext ?? process.cwd(),
+        cssOptions,
+        vanillaOptions: vanilla,
     };
 }
 async function extractCss(ctx, options) {
@@ -53,6 +87,11 @@ function hasCombinedQuery(query) {
 }
 function buildProxyRequest(ctx) {
     const sanitizedQuery = buildSanitizedQuery(ctx.resourceQuery);
+    const rawRequest = getRawRequest(ctx);
+    if (rawRequest) {
+        const stripped = stripResourceQuery(rawRequest);
+        return `${stripped}${sanitizedQuery}`;
+    }
     const request = `${ctx.resourcePath}${sanitizedQuery}`;
     const context = ctx.context ?? ctx.rootContext ?? process.cwd();
     if (ctx.utils && typeof ctx.utils.contextify === 'function') {
@@ -60,6 +99,18 @@ function buildProxyRequest(ctx) {
     }
     return request;
 }
+function getRawRequest(ctx) {
+    const mod = ctx._module;
+    const request = mod?.rawRequest;
+    if (typeof request === 'string' && request.length > 0) {
+        return request;
+    }
+    return undefined;
+}
+function stripResourceQuery(request) {
+    const idx = request.indexOf('?');
+    return idx >= 0 ? request.slice(0, idx) : request;
+}
 function buildSanitizedQuery(query) {
     if (!query)
         return '';
@@ -85,15 +136,26 @@ function isQueryFlag(entry, flag) {
 }
 function createCombinedModule(request, css) {
     const requestLiteral = JSON.stringify(request);
-    const defaultExport = `const __knightedDefault =
-typeof __knightedModule.default !== 'undefined'
-  ? __knightedModule.default
-  : __knightedModule;`;
-    return [
+    const lines = [
         `import * as __knightedModule from ${requestLiteral};`,
         `export * from ${requestLiteral};`,
-        defaultExport,
-        'export default __knightedDefault;',
-        buildInjection(css),
-    ].join('\n');
+    ];
+    if (shouldForwardDefaultExport(request)) {
+        lines.push(`const __knightedDefault =
+typeof __knightedModule.default !== 'undefined'
+  ? __knightedModule.default
+  : __knightedModule;`, 'export default __knightedDefault;');
+    }
+    lines.push(buildInjection(css));
+    return lines.join('\n');
+}
+function shouldForwardDefaultExport(request) {
+    const [pathPart] = request.split('?');
+    if (!pathPart)
+        return true;
+    const lower = pathPart.toLowerCase();
+    if (lower.endsWith('.css.ts') || lower.endsWith('.css.js')) {
+        return false;
+    }
+    return true;
 }

package/loader-queries.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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
+}
+
+/**
+ * Ambient declaration for combined loader imports (e.g. "./file.tsx?knighted-css&combined").
+ * These modules behave like the original module with an additional `knightedCss` export.
+ * TypeScript cannot infer the underlying module automatically, so consumers can
+ * import the default export and narrow it with `KnightedCssCombinedModule<typeof import('./file')>`.
+ */
+type KnightedCssCombinedModule<TModule> = TModule & { knightedCss: string }
+
+declare module '*?knighted-css&combined' {
+  const combined: KnightedCssCombinedModule<Record<string, unknown>>
+  export default combined
+  export const knightedCss: string
+}

package/package.json

@@ -1,13 +1,26 @@
 {
   "name": "@knighted/css",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.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": "./types.d.ts",
+  "typesVersions": {
+    "*": {
+      "loader": [
+        "./dist/loader.d.ts"
+      ],
+      "loader-queries": [
+        "./loader-queries.d.ts"
+      ],
+      "*": [
+        "./types.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
-      "types": "./dist/css.d.ts",
+      "types": "./types.d.ts",
       "import": "./dist/css.js",
       "require": "./dist/cjs/css.cjs"
     },
@@ -15,6 +28,10 @@
       "types": "./dist/loader.d.ts",
       "import": "./dist/loader.js",
       "require": "./dist/cjs/loader.cjs"
+    },
+    "./loader-queries": {
+      "types": "./loader-queries.d.ts",
+      "default": "./loader-queries.d.ts"
     }
   },
   "keywords": [
@@ -56,7 +73,9 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "loader-queries.d.ts",
+    "types.d.ts"
   ],
   "author": "KCM <knightedcodemonkey@gmail.com>",
   "license": "MIT",

package/types.d.ts

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