@knighted/css 1.0.0-alpha.4 → 1.0.0-rc.1

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

@@ -1,25 +1,165 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.pitch = void 0;
 const css_js_1 = require("./css.cjs");
 const DEFAULT_EXPORT_NAME = 'knightedCss';
+const COMBINED_QUERY_FLAG = 'combined';
 const loader = async function loader(source) {
-    const rawOptions = (typeof this.getOptions === 'function' ? this.getOptions() : {});
-    const cssOptions = rawOptions;
-    const normalizedOptions = {
-        ...cssOptions,
-        cwd: cssOptions.cwd ?? this.rootContext ?? process.cwd(),
-    };
-    const { css, files } = await (0, css_js_1.cssWithMeta)(this.resourcePath, normalizedOptions);
-    const uniqueFiles = new Set([this.resourcePath, ...files]);
-    for (const file of uniqueFiles) {
-        this.addDependency(file);
-    }
-    const input = typeof source === 'string' ? source : source.toString('utf8');
-    const injection = `\n\nexport const ${DEFAULT_EXPORT_NAME} = ${JSON.stringify(css)};\n`;
+    const { cssOptions, vanillaOptions } = resolveLoaderOptions(this);
+    const css = await extractCss(this, cssOptions);
+    const injection = buildInjection(css);
     const isStyleModule = this.resourcePath.endsWith('.css.ts');
-    const output = isStyleModule
-        ? `${injection}export default {};\n`
-        : `${input}${injection}`;
-    return output;
+    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 } = resolveLoaderOptions(this);
+    return extractCss(this, cssOptions).then(css => createCombinedModule(request, css));
 };
+exports.pitch = pitch;
+loader.pitch = exports.pitch;
 exports.default = loader;
+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 {
+        cssOptions,
+        vanillaOptions: vanilla,
+    };
+}
+async function extractCss(ctx, options) {
+    const { css, files } = await (0, css_js_1.cssWithMeta)(ctx.resourcePath, options);
+    const uniqueFiles = new Set([ctx.resourcePath, ...files]);
+    for (const file of uniqueFiles) {
+        ctx.addDependency(file);
+    }
+    return css;
+}
+function toSourceString(source) {
+    return typeof source === 'string' ? source : source.toString('utf8');
+}
+function buildInjection(css) {
+    return `\n\nexport const ${DEFAULT_EXPORT_NAME} = ${JSON.stringify(css)};\n`;
+}
+function hasCombinedQuery(query) {
+    if (!query)
+        return false;
+    const trimmed = query.startsWith('?') ? query.slice(1) : query;
+    if (!trimmed)
+        return false;
+    return trimmed
+        .split('&')
+        .filter(Boolean)
+        .some(part => isQueryFlag(part, COMBINED_QUERY_FLAG));
+}
+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') {
+        return ctx.utils.contextify(context, request);
+    }
+    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 '';
+    const entries = splitQuery(query).filter(part => {
+        return !isQueryFlag(part, COMBINED_QUERY_FLAG) && !isQueryFlag(part, 'knighted-css');
+    });
+    return entries.length > 0 ? `?${entries.join('&')}` : '';
+}
+function splitQuery(query) {
+    const trimmed = query.startsWith('?') ? query.slice(1) : query;
+    if (!trimmed)
+        return [];
+    return trimmed.split('&').filter(Boolean);
+}
+function isQueryFlag(entry, flag) {
+    const [rawKey] = entry.split('=');
+    try {
+        return decodeURIComponent(rawKey) === flag;
+    }
+    catch {
+        return rawKey === flag;
+    }
+}
+function createCombinedModule(request, css) {
+    const requestLiteral = JSON.stringify(request);
+    const lines = [
+        `import * as __knightedModule from ${requestLiteral};`,
+        `export * from ${requestLiteral};`,
+    ];
+    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

@@ -1,6 +1,14 @@
-import type { LoaderDefinitionFunction } from 'webpack';
+import type { LoaderDefinitionFunction, PitchLoaderDefinitionFunction } from 'webpack';
 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>;
 export default loader;

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

@@ -1,6 +1,14 @@
-import type { LoaderDefinitionFunction } from 'webpack';
+import type { LoaderDefinitionFunction, PitchLoaderDefinitionFunction } from 'webpack';
 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>;
 export default loader;

package/dist/loader.js

@@ -1,23 +1,161 @@
-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 rawOptions = (typeof this.getOptions === 'function' ? this.getOptions() : {});
-    const cssOptions = rawOptions;
-    const normalizedOptions = {
-        ...cssOptions,
-        cwd: cssOptions.cwd ?? this.rootContext ?? process.cwd(),
-    };
-    const { css, files } = await cssWithMeta(this.resourcePath, normalizedOptions);
-    const uniqueFiles = new Set([this.resourcePath, ...files]);
-    for (const file of uniqueFiles) {
-        this.addDependency(file);
-    }
-    const input = typeof source === 'string' ? source : source.toString('utf8');
-    const injection = `\n\nexport const ${DEFAULT_EXPORT_NAME} = ${JSON.stringify(css)};\n`;
+    const { cssOptions, vanillaOptions } = resolveLoaderOptions(this);
+    const css = await extractCss(this, cssOptions);
+    const injection = buildInjection(css);
     const isStyleModule = this.resourcePath.endsWith('.css.ts');
-    const output = isStyleModule
-        ? `${injection}export default {};\n`
-        : `${input}${injection}`;
-    return output;
+    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 } = resolveLoaderOptions(this);
+    return extractCss(this, cssOptions).then(css => createCombinedModule(request, css));
 };
+loader.pitch = pitch;
 export default loader;
+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 {
+        cssOptions,
+        vanillaOptions: vanilla,
+    };
+}
+async function extractCss(ctx, options) {
+    const { css, files } = await cssWithMeta(ctx.resourcePath, options);
+    const uniqueFiles = new Set([ctx.resourcePath, ...files]);
+    for (const file of uniqueFiles) {
+        ctx.addDependency(file);
+    }
+    return css;
+}
+function toSourceString(source) {
+    return typeof source === 'string' ? source : source.toString('utf8');
+}
+function buildInjection(css) {
+    return `\n\nexport const ${DEFAULT_EXPORT_NAME} = ${JSON.stringify(css)};\n`;
+}
+function hasCombinedQuery(query) {
+    if (!query)
+        return false;
+    const trimmed = query.startsWith('?') ? query.slice(1) : query;
+    if (!trimmed)
+        return false;
+    return trimmed
+        .split('&')
+        .filter(Boolean)
+        .some(part => isQueryFlag(part, COMBINED_QUERY_FLAG));
+}
+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') {
+        return ctx.utils.contextify(context, request);
+    }
+    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 '';
+    const entries = splitQuery(query).filter(part => {
+        return !isQueryFlag(part, COMBINED_QUERY_FLAG) && !isQueryFlag(part, 'knighted-css');
+    });
+    return entries.length > 0 ? `?${entries.join('&')}` : '';
+}
+function splitQuery(query) {
+    const trimmed = query.startsWith('?') ? query.slice(1) : query;
+    if (!trimmed)
+        return [];
+    return trimmed.split('&').filter(Boolean);
+}
+function isQueryFlag(entry, flag) {
+    const [rawKey] = entry.split('=');
+    try {
+        return decodeURIComponent(rawKey) === flag;
+    }
+    catch {
+        return rawKey === flag;
+    }
+}
+function createCombinedModule(request, css) {
+    const requestLiteral = JSON.stringify(request);
+    const lines = [
+        `import * as __knightedModule from ${requestLiteral};`,
+        `export * from ${requestLiteral};`,
+    ];
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/css",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-rc.1",
   "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",