@knighted/css 1.1.0-rc.6 → 1.1.0-rc.7

package/dist/cjs/loaderBridge.cjs

@@ -6,20 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.__loaderBridgeInternals = exports.pitch = void 0;
 const node_path_1 = __importDefault(require("node:path"));
 const loaderInternals_js_1 = require("./loaderInternals.cjs");
+const styleGraph_js_1 = require("./styleGraph.cjs");
 const DEFAULT_EXPORT_NAME = 'knightedCss';
+const BRIDGE_STYLE_EXTENSIONS = ['.css', '.scss', '.sass', '.less', '.css.ts'];
 const loader = function loader(source) {
     return source;
 };
 const pitch = function pitch(remainingRequest) {
     const resolvedRemainingRequest = resolveRemainingRequest(this, remainingRequest);
     if (isJsLikeResource(this.resourcePath) && (0, loaderInternals_js_1.hasCombinedQuery)(this.resourceQuery)) {
-        const callback = this.async();
+        const callback = getAsyncCallback(this);
         if (!callback) {
             return createCombinedJsBridgeModuleSync(resolvedRemainingRequest);
         }
         readResourceSource(this)
-            .then(source => {
-            const cssRequests = collectCssModuleRequests(source).map(request => buildBridgeCssRequest(request));
+            .then(async (source) => {
+            const cssRequests = await collectBridgeStyleRequests(this, source);
             const upstreamRequest = buildUpstreamRequest(resolvedRemainingRequest);
             callback(null, createCombinedJsBridgeModule({
                 upstreamRequest: upstreamRequest || '',
@@ -30,6 +32,33 @@ const pitch = function pitch(remainingRequest) {
             .catch(error => callback(error));
         return;
     }
+    const callback = getAsyncCallback(this);
+    if (!callback) {
+        const localsRequest = buildProxyRequest(this);
+        const upstreamRequest = buildUpstreamRequest(resolvedRemainingRequest);
+        const { emitCssModules } = resolveLoaderOptions(this);
+        const combined = (0, loaderInternals_js_1.hasCombinedQuery)(this.resourceQuery);
+        const skipSyntheticDefault = (0, loaderInternals_js_1.hasNamedOnlyQueryFlag)(this.resourceQuery);
+        if ((0, loaderInternals_js_1.hasQueryFlag)(this.resourceQuery, loaderInternals_js_1.TYPES_QUERY_FLAG)) {
+            emitKnightedWarning(this, 'The bridge loader does not generate stableSelectors. Remove the "types" query flag.');
+        }
+        const emitDefault = combined
+            ? (0, loaderInternals_js_1.shouldEmitCombinedDefault)({
+                detection: 'unknown',
+                request: localsRequest,
+                skipSyntheticDefault,
+            })
+            : false;
+        const resolvedUpstream = upstreamRequest || localsRequest;
+        const resolvedLocals = upstreamRequest || localsRequest;
+        return createBridgeModule({
+            localsRequest: resolvedLocals,
+            upstreamRequest: resolvedUpstream,
+            combined,
+            emitDefault,
+            emitCssModules,
+        });
+    }
     const localsRequest = buildProxyRequest(this);
     const upstreamRequest = buildUpstreamRequest(resolvedRemainingRequest);
     const { emitCssModules } = resolveLoaderOptions(this);
@@ -47,13 +76,23 @@ const pitch = function pitch(remainingRequest) {
         : false;
     const resolvedUpstream = upstreamRequest || localsRequest;
     const resolvedLocals = upstreamRequest || localsRequest;
-    return createBridgeModule({
-        localsRequest: resolvedLocals,
-        upstreamRequest: resolvedUpstream,
-        combined,
-        emitDefault,
-        emitCssModules,
-    });
+    const collectSource = isJsLikeResource(this.resourcePath)
+        ? readResourceSource(this)
+        : Promise.resolve(undefined);
+    collectSource
+        .then(async (source) => {
+        const cssRequests = await collectBridgeStyleRequests(this, source);
+        callback(null, createBridgeModule({
+            localsRequest: resolvedLocals,
+            upstreamRequest: resolvedUpstream,
+            combined,
+            emitDefault,
+            emitCssModules,
+            cssRequests,
+        }));
+    })
+        .catch(error => callback(error));
+    return;
 };
 exports.pitch = pitch;
 loader.pitch = exports.pitch;
@@ -64,6 +103,9 @@ function resolveLoaderOptions(ctx) {
         emitCssModules: rawOptions.emitCssModules !== false,
     };
 }
+function getAsyncCallback(ctx) {
+    return typeof ctx.async === 'function' ? ctx.async() : undefined;
+}
 function readResourceSource(ctx) {
     return new Promise((resolve, reject) => {
         ctx.fs.readFile(ctx.resourcePath, (error, data) => {
@@ -79,9 +121,70 @@ function readResourceSource(ctx) {
         });
     });
 }
-function collectCssModuleRequests(source) {
+async function collectBridgeStyleRequests(ctx, source) {
+    const graphImports = await collectStyleGraphImports(ctx);
+    const graphPaths = new Set(graphImports.map(filePath => node_path_1.default.resolve(filePath)));
+    const graphRequests = graphImports
+        .filter(filePath => node_path_1.default.resolve(filePath) !== node_path_1.default.resolve(ctx.resourcePath))
+        .map(filePath => buildBridgeCssRequest(filePath));
+    if (!source) {
+        return dedupeRequests(graphRequests);
+    }
+    const directSpecifiers = collectStyleImportSpecifiers(source);
+    const directRequests = directSpecifiers
+        .map(specifier => {
+        const [resource, query] = specifier.split('?');
+        if (query) {
+            return buildBridgeCssRequest(specifier);
+        }
+        const resolved = resolveStyleSpecifier(resource, ctx.resourcePath);
+        if (resolved && graphPaths.has(resolved)) {
+            return undefined;
+        }
+        return buildBridgeCssRequest(specifier);
+    })
+        .filter((request) => Boolean(request));
+    return dedupeRequests([...graphRequests, ...directRequests]);
+}
+async function collectStyleGraphImports(ctx) {
+    const cwd = ctx.rootContext ?? node_path_1.default.dirname(ctx.resourcePath);
+    const filter = (filePath) => !filePath.includes('node_modules');
+    try {
+        return await (0, styleGraph_js_1.collectTransitiveStyleImports)(ctx.resourcePath, {
+            cwd,
+            styleExtensions: BRIDGE_STYLE_EXTENSIONS,
+            filter,
+        });
+    }
+    catch {
+        return [];
+    }
+}
+function resolveStyleSpecifier(specifier, importer) {
+    if (!specifier)
+        return undefined;
+    if (specifier.startsWith('.')) {
+        return node_path_1.default.resolve(node_path_1.default.dirname(importer), specifier);
+    }
+    if (node_path_1.default.isAbsolute(specifier)) {
+        return node_path_1.default.resolve(specifier);
+    }
+    return undefined;
+}
+function dedupeRequests(requests) {
+    const seen = new Set();
+    const output = [];
+    for (const request of requests) {
+        if (seen.has(request))
+            continue;
+        seen.add(request);
+        output.push(request);
+    }
+    return output;
+}
+function collectStyleImportSpecifiers(source) {
     const matches = new Set();
-    const importPattern = /(?:import|export)\s+(?:[^'"\n]+\s+from\s+)?['"]([^'"\n]+?\.module\.(?:css|scss|sass|less)(?:\?[^'"\n]+)?)['"]/g;
+    const importPattern = /(?:import|export)\s+(?:[^'"\n]+\s+from\s+)?['"]([^'"\n]+?\.(?:css|scss|sass|less|css\.ts)(?:\?[^'"\n]+)?)['"]/g;
     let match;
     while ((match = importPattern.exec(source))) {
         if (match[1]) {
@@ -112,10 +215,12 @@ function createCombinedJsBridgeModule(options) {
     const upstreamLiteral = JSON.stringify(options.upstreamRequest);
     const cssImports = options.cssRequests.map((request, index) => {
         const literal = JSON.stringify(request);
-        return `import { knightedCss as __knightedCss${index}, knightedCssModules as __knightedCssModules${index} } from ${literal};`;
+        return `import * as __knightedStyle${index} from ${literal};`;
     });
-    const cssValues = options.cssRequests.map((_, index) => `__knightedCss${index}`);
-    const cssModulesValues = options.cssRequests.map((_, index) => `__knightedCssModules${index}`);
+    const cssValues = options.cssRequests.map((_, index) => `__knightedStyle${index}.knightedCss`);
+    const cssModulesValues = options.cssRequests.map((request, index) => isCssModuleRequest(request)
+        ? `__knightedStyle${index}.knightedCssModules`
+        : 'undefined');
     const lines = [
         `import * as __knightedUpstream from ${upstreamLiteral};`,
         ...cssImports,
@@ -194,19 +299,30 @@ function resolveCssModules(primary, module) {
 function createBridgeModule(options) {
     const localsLiteral = JSON.stringify(options.localsRequest);
     const upstreamLiteral = JSON.stringify(options.upstreamRequest);
+    const cssRequests = options.cssRequests ?? [];
+    const cssImports = cssRequests.map((request, index) => {
+        const literal = JSON.stringify(request);
+        return `import * as __knightedStyle${index} from ${literal};`;
+    });
+    const cssValues = cssRequests.map((_, index) => `__knightedStyle${index}.knightedCss`);
+    const cssModulesValues = cssRequests.map((request, index) => isCssModuleRequest(request)
+        ? `__knightedStyle${index}.knightedCssModules`
+        : 'undefined');
     const lines = [
         `import * as __knightedLocals from ${localsLiteral};`,
         `import * as __knightedUpstream from ${upstreamLiteral};`,
+        ...cssImports,
         `const __knightedDefault =\ntypeof __knightedUpstream.default !== 'undefined'\n  ? __knightedUpstream.default\n  : __knightedUpstream;`,
         `const __knightedResolveCss = ${resolveCssText.toString()};`,
         `const __knightedResolveCssModules = ${resolveCssModules.toString()};`,
         `const __knightedUpstreamLocals =\n  __knightedResolveCssModules(__knightedUpstream, __knightedUpstream);`,
         `const __knightedLocalsExport =\n  __knightedUpstreamLocals ??\n  __knightedResolveCssModules(__knightedLocals, __knightedLocals) ??\n  __knightedLocals;`,
-        `const __knightedCss = __knightedResolveCss(__knightedDefault, __knightedUpstream);`,
+        `const __knightedBaseCss = __knightedResolveCss(__knightedDefault, __knightedUpstream);`,
+        `const __knightedCss = [__knightedBaseCss, ${cssValues.join(', ')}].filter(Boolean).join('\\n');`,
         `export const ${DEFAULT_EXPORT_NAME} = __knightedCss;`,
     ];
     if (options.emitCssModules) {
-        lines.push(`const __knightedCssModules = __knightedLocalsExport ?? __knightedResolveCssModules(\n  __knightedDefault,\n  __knightedUpstream,\n);`, 'export const knightedCssModules = __knightedCssModules;');
+        lines.push(`const __knightedCssModules = Object.assign({}, ...[__knightedLocalsExport ?? __knightedResolveCssModules(\n  __knightedDefault,\n  __knightedUpstream,\n), ${cssModulesValues.join(', ')}].filter(Boolean));`, 'export const knightedCssModules = __knightedCssModules;');
     }
     if (options.combined) {
         lines.push(`export * from ${localsLiteral};`);
@@ -228,6 +344,11 @@ function buildUpstreamRequest(remainingRequest) {
         : `!!${remainingRequest}`;
     return request;
 }
+function isCssModuleRequest(request) {
+    const [resource] = request.split('?');
+    const lower = resource.toLowerCase();
+    return /\.module\.(css|scss|sass|less|css\.ts)$/.test(lower);
+}
 function buildProxyRequest(ctx) {
     const sanitizedQuery = (0, loaderInternals_js_1.buildSanitizedQuery)(ctx.resourceQuery);
     const rawRequest = getRawRequest(ctx);
@@ -337,7 +458,7 @@ function emitKnightedWarning(ctx, message) {
     console.warn(formatted);
 }
 exports.__loaderBridgeInternals = {
-    collectCssModuleRequests,
+    collectStyleImportSpecifiers,
     buildBridgeCssRequest,
     createCombinedJsBridgeModule,
     isJsLikeResource,