@knighted/css 1.0.9 → 1.1.0-rc.0

package/dist/cjs/generateTypes.d.cts

@@ -28,6 +28,7 @@ export interface GenerateTypesOptions {
     include?: string[];
     outDir?: string;
     stableNamespace?: string;
+    autoStable?: boolean;
 }
 type ModuleTypeDetector = () => ReturnType<typeof moduleType>;
 declare function resolvePackageRoot(): string;
@@ -62,6 +63,7 @@ export interface ParsedCliArgs {
     include?: string[];
     outDir?: string;
     stableNamespace?: string;
+    autoStable?: boolean;
     help?: boolean;
 }
 declare function parseCliArgs(argv: string[]): ParsedCliArgs;

package/dist/cjs/loader.cjs

@@ -7,15 +7,30 @@ exports.pitch = void 0;
 const node_path_1 = __importDefault(require("node:path"));
 const css_js_1 = require("./css.cjs");
 const moduleInfo_js_1 = require("./moduleInfo.cjs");
+const autoStableSelectors_js_1 = require("./autoStableSelectors.cjs");
 const loaderInternals_js_1 = require("./loaderInternals.cjs");
 const stableSelectorsLiteral_js_1 = require("./stableSelectorsLiteral.cjs");
 const stableNamespace_js_1 = require("./stableNamespace.cjs");
+const stableSelectors_js_1 = require("./stableSelectors.cjs");
 const DEFAULT_EXPORT_NAME = 'knightedCss';
 const loader = async function loader(source) {
     const { cssOptions, vanillaOptions, stableNamespace: optionNamespace, } = resolveLoaderOptions(this);
     const resolvedNamespace = (0, stableNamespace_js_1.resolveStableNamespace)(optionNamespace);
     const typesRequested = (0, loaderInternals_js_1.hasQueryFlag)(this.resourceQuery, loaderInternals_js_1.TYPES_QUERY_FLAG);
-    const css = await extractCss(this, cssOptions);
+    const isStyleModule = this.resourcePath.endsWith('.css.ts');
+    const cssOptionsForExtract = isStyleModule
+        ? { ...cssOptions, autoStable: undefined }
+        : cssOptions;
+    const cssMeta = await extractCss(this, cssOptionsForExtract);
+    const activeAutoStable = (0, autoStableSelectors_js_1.normalizeAutoStableOption)(cssOptionsForExtract.autoStable);
+    const cssModuleExports = activeAutoStable
+        ? mergeCssModuleExports(cssMeta.exports, {
+            namespace: activeAutoStable.namespace ?? resolvedNamespace,
+            include: activeAutoStable.include,
+            exclude: activeAutoStable.exclude,
+        })
+        : undefined;
+    const css = cssMeta.css;
     const stableSelectorsLiteral = typesRequested
         ? (0, stableSelectorsLiteral_js_1.buildStableSelectorsLiteral)({
             css,
@@ -25,10 +40,12 @@ const loader = async function loader(source) {
             target: 'js',
         })
         : undefined;
+    const emitCssModuleDefault = isCssLikeResource(this.resourcePath) && Boolean(cssModuleExports);
     const injection = buildInjection(css, {
         stableSelectorsLiteral: stableSelectorsLiteral?.literal,
+        cssModuleExports,
+        emitCssModuleDefault,
     });
-    const isStyleModule = this.resourcePath.endsWith('.css.ts');
     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);
@@ -73,24 +90,34 @@ const pitch = function pitch() {
     const defaultSignalPromise = skipSyntheticDefault
         ? Promise.resolve('unknown')
         : (0, moduleInfo_js_1.detectModuleDefaultExport)(this.resourcePath);
-    return Promise.all([extractCss(this, cssOptions), defaultSignalPromise]).then(([css, defaultSignal]) => {
+    return Promise.all([extractCss(this, cssOptions), defaultSignalPromise]).then(([cssMeta, defaultSignal]) => {
         const emitDefault = (0, loaderInternals_js_1.shouldEmitCombinedDefault)({
             request,
             skipSyntheticDefault,
             detection: defaultSignal,
         });
+        const activeAutoStable = (0, autoStableSelectors_js_1.normalizeAutoStableOption)(cssOptions.autoStable);
+        const cssModuleExports = activeAutoStable
+            ? mergeCssModuleExports(cssMeta.exports, {
+                namespace: activeAutoStable.namespace ?? resolvedNamespace,
+                include: activeAutoStable.include,
+                exclude: activeAutoStable.exclude,
+            })
+            : undefined;
         const stableSelectorsLiteral = typesRequested
             ? (0, stableSelectorsLiteral_js_1.buildStableSelectorsLiteral)({
-                css,
+                css: cssMeta.css,
                 namespace: resolvedNamespace,
                 resourcePath: this.resourcePath,
                 emitWarning: message => emitKnightedWarning(this, message),
                 target: 'js',
             })
             : undefined;
-        return createCombinedModule(request, css, {
+        return createCombinedModule(request, cssMeta.css, {
             emitDefault,
             stableSelectorsLiteral: stableSelectorsLiteral?.literal,
+            cssModuleExports,
+            emitCssModuleDefault: false,
         });
     });
 };
@@ -111,12 +138,12 @@ function resolveLoaderOptions(ctx) {
     };
 }
 async function extractCss(ctx, options) {
-    const { css, files } = await (0, css_js_1.cssWithMeta)(ctx.resourcePath, options);
-    const uniqueFiles = new Set([ctx.resourcePath, ...files]);
+    const result = await (0, css_js_1.cssWithMeta)(ctx.resourcePath, options);
+    const uniqueFiles = new Set([ctx.resourcePath, ...result.files]);
     for (const file of uniqueFiles) {
         ctx.addDependency(file);
     }
-    return css;
+    return result;
 }
 function toSourceString(source) {
     return typeof source === 'string' ? source : source.toString('utf8');
@@ -126,8 +153,57 @@ function buildInjection(css, extras) {
     if (extras?.stableSelectorsLiteral) {
         lines.push(extras.stableSelectorsLiteral);
     }
+    if (extras?.cssModuleExports) {
+        lines.push(`export const knightedCssModules = ${JSON.stringify(extras.cssModuleExports)};`);
+        if (extras.emitCssModuleDefault) {
+            lines.push('export default knightedCssModules;');
+        }
+    }
     return lines.join('');
 }
+function isCssLikeResource(resourcePath) {
+    return (/\.(css|scss|sass|less)(\?.*)?$/i.test(resourcePath) &&
+        !resourcePath.endsWith('.css.ts'));
+}
+function mergeCssModuleExports(exportsMap, options) {
+    if (!exportsMap)
+        return undefined;
+    const output = {};
+    for (const [token, value] of Object.entries(exportsMap)) {
+        const hashedParts = toClassParts(value);
+        if (options.exclude && options.exclude.test(token)) {
+            output[token] = hashedParts.join(' ');
+            continue;
+        }
+        if (options.include && !options.include.test(token)) {
+            output[token] = hashedParts.join(' ');
+            continue;
+        }
+        const stable = (0, stableSelectors_js_1.stableClass)(token, { namespace: options.namespace });
+        if (stable && !hashedParts.includes(stable)) {
+            hashedParts.push(stable);
+        }
+        output[token] = hashedParts.join(' ');
+    }
+    return output;
+}
+function toClassParts(value) {
+    if (!value)
+        return [];
+    if (Array.isArray(value)) {
+        return value.flatMap(part => part.split(/\s+/).filter(Boolean));
+    }
+    if (typeof value === 'object') {
+        const parts = [
+            value.name,
+            ...(value.composes ?? []).map(entry => typeof entry === 'string' ? entry : entry?.name),
+        ]
+            .filter(Boolean)
+            .map(String);
+        return parts.flatMap(part => part.split(/\s+/).filter(Boolean));
+    }
+    return value.split(/\s+/).filter(Boolean);
+}
 function buildProxyRequest(ctx) {
     const sanitizedQuery = (0, loaderInternals_js_1.buildSanitizedQuery)(ctx.resourceQuery);
     const rawRequest = getRawRequest(ctx);
@@ -208,7 +284,11 @@ typeof __knightedModule.default !== 'undefined'
   ? __knightedModule.default
   : __knightedModule;`, 'export default __knightedDefault;');
     }
-    lines.push(buildInjection(css, { stableSelectorsLiteral: options?.stableSelectorsLiteral }));
+    lines.push(buildInjection(css, {
+        stableSelectorsLiteral: options?.stableSelectorsLiteral,
+        cssModuleExports: options?.cssModuleExports,
+        emitCssModuleDefault: options?.emitCssModuleDefault,
+    }));
     return lines.join('\n');
 }
 function emitKnightedWarning(ctx, message) {