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

package/dist/loader.js

@@ -1,29 +1,103 @@
-import { cssWithMeta } from './css.js';
+import { cssWithMeta, compileVanillaModule } from './css.js';
+import { detectModuleDefaultExport } from './moduleInfo.js';
+import { buildSanitizedQuery, hasCombinedQuery, hasNamedOnlyQueryFlag, hasQueryFlag, shouldEmitCombinedDefault, shouldForwardDefaultExport, TYPES_QUERY_FLAG, } from './loaderInternals.js';
+import { buildStableSelectorsLiteral } from './stableSelectorsLiteral.js';
+import { resolveStableNamespace } from './stableNamespace.js';
 const DEFAULT_EXPORT_NAME = 'knightedCss';
-const COMBINED_QUERY_FLAG = 'combined';
 const loader = async function loader(source) {
-    const cssOptions = resolveCssOptions(this);
+    const { cssOptions, vanillaOptions, stableNamespace: optionNamespace, } = resolveLoaderOptions(this);
+    const resolvedNamespace = resolveStableNamespace(optionNamespace);
+    const typesRequested = hasQueryFlag(this.resourceQuery, TYPES_QUERY_FLAG);
     const css = await extractCss(this, cssOptions);
-    const injection = buildInjection(css);
-    const input = toSourceString(source);
+    const stableSelectorsLiteral = typesRequested
+        ? buildStableSelectorsLiteral({
+            css,
+            namespace: resolvedNamespace,
+            resourcePath: this.resourcePath,
+            emitWarning: message => emitKnightedWarning(this, message),
+        })
+        : undefined;
+    const injection = buildInjection(css, {
+        stableSelectorsLiteral: stableSelectorsLiteral?.literal,
+    });
     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);
-    return extractCss(this, cssOptions).then(css => createCombinedModule(request, css));
+    const { cssOptions, stableNamespace: optionNamespace } = resolveLoaderOptions(this);
+    const typesRequested = hasQueryFlag(this.resourceQuery, TYPES_QUERY_FLAG);
+    const resolvedNamespace = resolveStableNamespace(optionNamespace);
+    const skipSyntheticDefault = hasNamedOnlyQueryFlag(this.resourceQuery);
+    const defaultSignalPromise = skipSyntheticDefault
+        ? Promise.resolve('unknown')
+        : detectModuleDefaultExport(this.resourcePath);
+    return Promise.all([extractCss(this, cssOptions), defaultSignalPromise]).then(([css, defaultSignal]) => {
+        const emitDefault = shouldEmitCombinedDefault({
+            request,
+            skipSyntheticDefault,
+            detection: defaultSignal,
+        });
+        const stableSelectorsLiteral = typesRequested
+            ? buildStableSelectorsLiteral({
+                css,
+                namespace: resolvedNamespace,
+                resourcePath: this.resourcePath,
+                emitWarning: message => emitKnightedWarning(this, message),
+            })
+            : undefined;
+        return createCombinedModule(request, css, {
+            emitDefault,
+            stableSelectorsLiteral: stableSelectorsLiteral?.literal,
+        });
+    });
 };
 loader.pitch = pitch;
 export default loader;
-function resolveCssOptions(ctx) {
+function resolveLoaderOptions(ctx) {
     const rawOptions = (typeof ctx.getOptions === 'function' ? ctx.getOptions() : {});
+    const { vanilla, stableNamespace, ...rest } = rawOptions;
+    const cssOptions = {
+        ...rest,
+        cwd: rest.cwd ?? ctx.rootContext ?? process.cwd(),
+    };
     return {
-        ...rawOptions,
-        cwd: rawOptions.cwd ?? ctx.rootContext ?? process.cwd(),
+        cssOptions,
+        vanillaOptions: vanilla,
+        stableNamespace,
     };
 }
 async function extractCss(ctx, options) {
@@ -37,22 +111,20 @@ async function extractCss(ctx, options) {
 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 buildInjection(css, extras) {
+    const lines = [`\n\nexport const ${DEFAULT_EXPORT_NAME} = ${JSON.stringify(css)};\n`];
+    if (extras?.stableSelectorsLiteral) {
+        lines.push(extras.stableSelectorsLiteral);
+    }
+    return lines.join('');
 }
 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,40 +132,40 @@ function buildProxyRequest(ctx) {
     }
     return 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 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 createCombinedModule(request, css) {
+function createCombinedModule(request, css, options) {
+    const shouldEmitDefault = options?.emitDefault ?? shouldForwardDefaultExport(request);
     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 (shouldEmitDefault) {
+        lines.push(`const __knightedDefault =
+typeof __knightedModule.default !== 'undefined'
+  ? __knightedModule.default
+  : __knightedModule;`, 'export default __knightedDefault;');
+    }
+    lines.push(buildInjection(css, { stableSelectorsLiteral: options?.stableSelectorsLiteral }));
+    return lines.join('\n');
+}
+function emitKnightedWarning(ctx, message) {
+    const formatted = `\x1b[33m@knighted/css warning\x1b[0m ${message}`;
+    if (typeof ctx.emitWarning === 'function') {
+        ctx.emitWarning(new Error(formatted));
+        return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(formatted);
 }

package/dist/loaderInternals.d.ts

@@ -0,0 +1,23 @@
+import type { ModuleDefaultSignal } from './moduleInfo.js';
+export declare const COMBINED_QUERY_FLAG = "combined";
+export declare const TYPES_QUERY_FLAG = "types";
+export declare const NAMED_ONLY_QUERY_FLAGS: readonly ["named-only", "no-default"];
+export type SelectorTypeVariant = 'types' | 'combined' | 'combinedWithoutDefault';
+export declare function splitQuery(query: string): string[];
+export declare function isQueryFlag(entry: string, flag: string): boolean;
+export declare function buildSanitizedQuery(query?: string | null): string;
+export declare function hasQueryFlag(query: string | null | undefined, flag: string): boolean;
+export declare function shouldForwardDefaultExport(request: string): boolean;
+export declare function hasCombinedQuery(query?: string | null): boolean;
+export declare function hasNamedOnlyQueryFlag(query?: string | null): boolean;
+export declare function determineSelectorVariant(query?: string | null): SelectorTypeVariant;
+export declare function shouldEmitCombinedDefault(options: {
+    detection: ModuleDefaultSignal;
+    request: string;
+    skipSyntheticDefault: boolean;
+}): boolean;
+export declare const __loaderInternals: {
+    buildSanitizedQuery: typeof buildSanitizedQuery;
+    shouldEmitCombinedDefault: typeof shouldEmitCombinedDefault;
+    determineSelectorVariant: typeof determineSelectorVariant;
+};

package/dist/loaderInternals.js

@@ -0,0 +1,96 @@
+export const COMBINED_QUERY_FLAG = 'combined';
+export const TYPES_QUERY_FLAG = 'types';
+export const NAMED_ONLY_QUERY_FLAGS = ['named-only', 'no-default'];
+export function splitQuery(query) {
+    const trimmed = query.startsWith('?') ? query.slice(1) : query;
+    if (!trimmed)
+        return [];
+    return trimmed.split('&').filter(Boolean);
+}
+export function isQueryFlag(entry, flag) {
+    const [rawKey] = entry.split('=');
+    try {
+        return decodeURIComponent(rawKey) === flag;
+    }
+    catch {
+        return rawKey === flag;
+    }
+}
+export function buildSanitizedQuery(query) {
+    if (!query)
+        return '';
+    const entries = splitQuery(query).filter(part => {
+        if (isQueryFlag(part, COMBINED_QUERY_FLAG)) {
+            return false;
+        }
+        if (isQueryFlag(part, 'knighted-css')) {
+            return false;
+        }
+        if (isQueryFlag(part, TYPES_QUERY_FLAG)) {
+            return false;
+        }
+        if (NAMED_ONLY_QUERY_FLAGS.some(flag => isQueryFlag(part, flag))) {
+            return false;
+        }
+        return true;
+    });
+    return entries.length > 0 ? `?${entries.join('&')}` : '';
+}
+export function hasQueryFlag(query, flag) {
+    if (!query)
+        return false;
+    const entries = splitQuery(query);
+    if (entries.length === 0)
+        return false;
+    return entries.some(part => isQueryFlag(part, flag));
+}
+function safeDecode(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+export 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;
+}
+export function hasCombinedQuery(query) {
+    return hasQueryFlag(query, COMBINED_QUERY_FLAG);
+}
+export function hasNamedOnlyQueryFlag(query) {
+    return NAMED_ONLY_QUERY_FLAGS.some(flag => hasQueryFlag(query, flag));
+}
+export function determineSelectorVariant(query) {
+    if (hasCombinedQuery(query)) {
+        return hasNamedOnlyQueryFlag(query) ? 'combinedWithoutDefault' : 'combined';
+    }
+    return 'types';
+}
+export function shouldEmitCombinedDefault(options) {
+    if (options.skipSyntheticDefault) {
+        return false;
+    }
+    if (!shouldForwardDefaultExport(options.request)) {
+        return false;
+    }
+    if (options.detection === 'has-default') {
+        return true;
+    }
+    if (options.detection === 'no-default') {
+        return false;
+    }
+    return true;
+}
+export const __loaderInternals = {
+    buildSanitizedQuery,
+    shouldEmitCombinedDefault,
+    determineSelectorVariant,
+};

package/dist/moduleGraph.d.ts

@@ -0,0 +1,15 @@
+import type { CssResolver } from './types.js';
+export interface ModuleGraphOptions {
+    tsConfig?: string | Record<string, unknown>;
+    extensions?: string[];
+    conditions?: string[];
+}
+interface CollectOptions {
+    cwd: string;
+    styleExtensions: string[];
+    filter: (filePath: string) => boolean;
+    resolver?: CssResolver;
+    graphOptions?: ModuleGraphOptions;
+}
+export declare function collectStyleImports(entryPath: string, options: CollectOptions): Promise<string[]>;
+export {};