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

package/dist/loader.js

@@ -1,10 +1,25 @@
 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, vanillaOptions } = resolveLoaderOptions(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 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');
     if (isStyleModule) {
         const { source: compiledSource } = await compileVanillaModule(this.resourcePath, cssOptions.cwd ?? this.rootContext ?? process.cwd(), cssOptions.peerResolver);
@@ -43,14 +58,38 @@ export const pitch = function pitch() {
         return;
     }
     const request = buildProxyRequest(this);
-    const { cssOptions } = resolveLoaderOptions(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 resolveLoaderOptions(ctx) {
     const rawOptions = (typeof ctx.getOptions === 'function' ? ctx.getOptions() : {});
-    const { vanilla, ...rest } = rawOptions;
+    const { vanilla, stableNamespace, ...rest } = rawOptions;
     const cssOptions = {
         ...rest,
         cwd: rest.cwd ?? ctx.rootContext ?? process.cwd(),
@@ -58,6 +97,7 @@ function resolveLoaderOptions(ctx) {
     return {
         cssOptions,
         vanillaOptions: vanilla,
+        stableNamespace,
     };
 }
 async function extractCss(ctx, options) {
@@ -71,19 +111,12 @@ 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);
@@ -111,51 +144,28 @@ 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) {
+function createCombinedModule(request, css, options) {
+    const shouldEmitDefault = options?.emitDefault ?? shouldForwardDefaultExport(request);
     const requestLiteral = JSON.stringify(request);
     const lines = [
         `import * as __knightedModule from ${requestLiteral};`,
         `export * from ${requestLiteral};`,
     ];
-    if (shouldForwardDefaultExport(request)) {
+    if (shouldEmitDefault) {
         lines.push(`const __knightedDefault =
 typeof __knightedModule.default !== 'undefined'
   ? __knightedModule.default
   : __knightedModule;`, 'export default __knightedDefault;');
     }
-    lines.push(buildInjection(css));
+    lines.push(buildInjection(css, { stableSelectorsLiteral: options?.stableSelectorsLiteral }));
     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;
+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;
     }
-    return true;
+    // 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 {};