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

package/dist/cjs/stableSelectors.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableClassFromModule = void 0;
+exports.stableToken = stableToken;
+exports.stableClass = stableClass;
+exports.stableSelector = stableSelector;
+exports.createStableClassFactory = createStableClassFactory;
+exports.stableClassName = stableClassName;
+const DEFAULT_NAMESPACE = 'knighted';
+const defaultJoin = (values) => values.filter(Boolean).join(' ');
+const normalizeToken = (token) => {
+    const sanitized = token
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/[^A-Za-z0-9_-]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+    return sanitized.length ? sanitized : 'stable';
+};
+function stableToken(token, options) {
+    const normalized = normalizeToken(token);
+    const namespace = options?.namespace?.trim() ?? DEFAULT_NAMESPACE;
+    if (!namespace) {
+        return normalized;
+    }
+    return `${namespace}-${normalized}`;
+}
+function stableClass(token, options) {
+    return stableToken(token, options);
+}
+function stableSelector(token, options) {
+    return `.${stableToken(token, options)}`;
+}
+function createStableClassFactory(options) {
+    return (token) => stableClass(token, options);
+}
+function stableClassName(styles, key, options) {
+    const hashed = styles[key] ?? '';
+    const token = options?.token ?? String(key);
+    const stable = stableClass(token, options);
+    const join = options?.join ?? defaultJoin;
+    return join([hashed, stable]);
+}
+exports.stableClassFromModule = stableClassName;

package/dist/cjs/stableSelectors.d.cts

@@ -0,0 +1,13 @@
+export interface StableSelectorOptions {
+    namespace?: string;
+}
+export interface StableClassNameOptions extends StableSelectorOptions {
+    token?: string;
+    join?: (values: string[]) => string;
+}
+export declare function stableToken(token: string, options?: StableSelectorOptions): string;
+export declare function stableClass(token: string, options?: StableSelectorOptions): string;
+export declare function stableSelector(token: string, options?: StableSelectorOptions): string;
+export declare function createStableClassFactory(options?: StableSelectorOptions): (token: string) => string;
+export declare function stableClassName<T extends Record<string, string>>(styles: T, key: keyof T | string, options?: StableClassNameOptions): string;
+export declare const stableClassFromModule: typeof stableClassName;

package/dist/cjs/stableSelectorsLiteral.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.__stableSelectorsLiteralInternals = void 0;
+exports.buildStableSelectorsLiteral = buildStableSelectorsLiteral;
+exports.collectStableSelectors = collectStableSelectors;
+exports.formatStableSelectorMap = formatStableSelectorMap;
+const lightningcss_1 = require("lightningcss");
+const helpers_js_1 = require("./helpers.cjs");
+function buildStableSelectorsLiteral(options) {
+    const trimmedNamespace = options.namespace.trim();
+    if (!trimmedNamespace) {
+        options.emitWarning(`stableSelectors requested for ${options.resourcePath} but "stableNamespace" resolved to an empty value.`);
+        return {
+            literal: 'export const stableSelectors = {} as const;\n',
+            selectorMap: new Map(),
+        };
+    }
+    const selectorMap = collectStableSelectors(options.css, trimmedNamespace, options.resourcePath);
+    if (selectorMap.size === 0) {
+        options.emitWarning(`stableSelectors requested for ${options.resourcePath} but no selectors matched namespace "${trimmedNamespace}".`);
+    }
+    return {
+        literal: `export const stableSelectors = ${formatStableSelectorMap(selectorMap)} as const;\n`,
+        selectorMap,
+    };
+}
+function collectStableSelectors(css, namespace, filename) {
+    if (!namespace)
+        return new Map();
+    const astResult = collectStableSelectorsFromAst(css, namespace, filename);
+    if (astResult) {
+        return astResult;
+    }
+    return collectStableSelectorsByRegex(css, namespace);
+}
+function collectStableSelectorsFromAst(css, namespace, filename) {
+    try {
+        const tokens = new Map();
+        const escaped = (0, helpers_js_1.escapeRegex)(namespace);
+        const pattern = new RegExp(`\\.${escaped}-([A-Za-z0-9_-]+)`, 'g');
+        (0, lightningcss_1.transform)({
+            filename: filename ?? 'knighted-types-probe.css',
+            code: Buffer.from(css),
+            minify: false,
+            visitor: {
+                Rule: {
+                    style(rule) {
+                        const target = Array.isArray(rule?.selectors)
+                            ? rule
+                            : rule?.value && Array.isArray(rule.value.selectors)
+                                ? rule.value
+                                : undefined;
+                        if (!target)
+                            return rule;
+                        for (const selector of target.selectors) {
+                            const selectorStr = (0, helpers_js_1.serializeSelector)(selector);
+                            pattern.lastIndex = 0;
+                            let match;
+                            while ((match = pattern.exec(selectorStr)) !== null) {
+                                const token = match[1];
+                                if (!token)
+                                    continue;
+                                tokens.set(token, `${namespace}-${token}`);
+                            }
+                        }
+                        return rule;
+                    },
+                },
+            },
+        });
+        return tokens;
+    }
+    catch {
+        return undefined;
+    }
+}
+function collectStableSelectorsByRegex(css, namespace) {
+    const escaped = (0, helpers_js_1.escapeRegex)(namespace);
+    const pattern = new RegExp(`\\.${escaped}-([A-Za-z0-9_-]+)`, 'g');
+    const tokens = new Map();
+    let match;
+    while ((match = pattern.exec(css)) !== null) {
+        const token = match[1];
+        if (!token)
+            continue;
+        tokens.set(token, `${namespace}-${token}`);
+    }
+    return tokens;
+}
+function formatStableSelectorMap(map) {
+    if (map.size === 0) {
+        return 'Object.freeze({})';
+    }
+    const entries = Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
+    const lines = entries.map(([token, selector]) => {
+        return `  ${JSON.stringify(token)}: ${JSON.stringify(selector)}`;
+    });
+    return `Object.freeze({\n${lines.join(',\n')}\n})`;
+}
+exports.__stableSelectorsLiteralInternals = {
+    collectStableSelectors,
+    collectStableSelectorsByRegex,
+    formatStableSelectorMap,
+};

package/dist/cjs/stableSelectorsLiteral.d.cts

@@ -0,0 +1,19 @@
+export interface StableSelectorsLiteralResult {
+    literal: string;
+    selectorMap: Map<string, string>;
+}
+export declare function buildStableSelectorsLiteral(options: {
+    css: string;
+    namespace: string;
+    resourcePath: string;
+    emitWarning: (message: string) => void;
+}): StableSelectorsLiteralResult;
+export declare function collectStableSelectors(css: string, namespace: string, filename?: string): Map<string, string>;
+declare function collectStableSelectorsByRegex(css: string, namespace: string): Map<string, string>;
+export declare function formatStableSelectorMap(map: Map<string, string>): string;
+export declare const __stableSelectorsLiteralInternals: {
+    collectStableSelectors: typeof collectStableSelectors;
+    collectStableSelectorsByRegex: typeof collectStableSelectorsByRegex;
+    formatStableSelectorMap: typeof formatStableSelectorMap;
+};
+export {};

package/dist/cjs/types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/types.d.cts

@@ -0,0 +1,4 @@
+export type CssResolver = (specifier: string, ctx: {
+    cwd: string;
+    from?: string;
+}) => string | Promise<string | undefined>;

package/dist/css.d.ts

@@ -1,11 +1,11 @@
-import type { Options as DependencyTreeOpts } from 'dependency-tree';
 import { type TransformOptions as LightningTransformOptions } from 'lightningcss';
 import { type SpecificitySelector, type SpecificityStrategy } from './helpers.js';
+import type { ModuleGraphOptions } from './moduleGraph.js';
+import type { CssResolver } from './types.js';
+export type { CssResolver } from './types.js';
+export type { ModuleGraphOptions } from './moduleGraph.js';
 export declare const DEFAULT_EXTENSIONS: string[];
 type LightningCssConfig = boolean | Partial<Omit<LightningTransformOptions<never>, 'code'>>;
-export type CssResolver = (specifier: string, ctx: {
-    cwd: string;
-}) => string | Promise<string | undefined>;
 type PeerLoader = (name: string) => Promise<unknown>;
 export interface CssOptions {
     extensions?: string[];
@@ -17,10 +17,14 @@ export interface CssOptions {
         strategy?: SpecificityStrategy;
         match?: SpecificitySelector[];
     };
-    dependencyTree?: Partial<Omit<DependencyTreeOpts, 'filename' | 'directory'>>;
+    moduleGraph?: ModuleGraphOptions;
     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,4 @@ export interface CssResult {
 }
 export declare function css(entry: string, options?: CssOptions): Promise<string>;
 export declare function cssWithMeta(entry: string, options?: CssOptions): Promise<CssResult>;
-export {};
+export declare function compileVanillaModule(filePath: string, cwd: string, peerResolver?: PeerLoader): Promise<VanillaCompileResult>;

package/dist/css.js

@@ -1,8 +1,9 @@
 import path from 'node:path';
-import { promises as fs } from 'node:fs';
-import dependencyTree from 'dependency-tree';
+import { existsSync, promises as fs } from 'node:fs';
 import { composeVisitors, transform as lightningTransform, } from 'lightningcss';
 import { applyStringSpecificityBoost, buildSpecificityVisitor, } from './helpers.js';
+import { collectStyleImports } from './moduleGraph.js';
+import { createSassImporter } from './sassInternals.js';
 export const DEFAULT_EXTENSIONS = ['.css', '.scss', '.sass', '.less', '.css.ts'];
 export async function css(entry, options = {}) {
     const { css: output } = await cssWithMeta(entry, options);
@@ -12,11 +13,12 @@ export async function cssWithMeta(entry, options = {}) {
     const cwd = options.cwd ? path.resolve(options.cwd) : process.cwd();
     const entryPath = await resolveEntry(entry, cwd, options.resolver);
     const extensions = (options.extensions ?? DEFAULT_EXTENSIONS).map(ext => ext.toLowerCase());
-    const files = collectStyleDependencies(entryPath, {
+    const files = await collectStyleDependencies(entryPath, {
         cwd,
         extensions,
         filter: options.filter,
-        dependencyTreeOptions: options.dependencyTree,
+        graphOptions: options.moduleGraph,
+        resolver: options.resolver,
     });
     if (files.length === 0) {
         return { css: '', files: [] };
@@ -26,6 +28,7 @@ export async function cssWithMeta(entry, options = {}) {
         const chunk = await compileStyleModule(file, {
             cwd,
             peerResolver: options.peerResolver,
+            resolver: options.resolver,
         });
         if (chunk) {
             chunks.push(chunk);
@@ -65,30 +68,33 @@ async function resolveEntry(entry, cwd, resolver) {
     }
     return path.resolve(cwd, entry);
 }
-function collectStyleDependencies(entryPath, { cwd, extensions, filter, dependencyTreeOptions, }) {
+async function collectStyleDependencies(entryPath, { cwd, extensions, filter, graphOptions, resolver, }) {
     const seen = new Set();
     const order = [];
     const shouldInclude = typeof filter === 'function'
         ? filter
         : (filePath) => !filePath.includes('node_modules');
     const entryIsStyle = Boolean(matchExtension(entryPath, extensions));
-    let treeList = [];
+    let discoveredStyles = [];
     if (!entryIsStyle) {
-        const dependencyConfig = {
-            ...dependencyTreeOptions,
-            filename: entryPath,
-            directory: cwd,
+        discoveredStyles = await collectStyleImports(entryPath, {
+            cwd,
+            styleExtensions: extensions,
             filter: shouldInclude,
-        };
-        treeList = dependencyTree.toList(dependencyConfig);
+            resolver,
+            graphOptions,
+        });
     }
-    const candidates = entryIsStyle ? [entryPath] : [entryPath, ...treeList];
+    const candidates = entryIsStyle ? [entryPath] : [entryPath, ...discoveredStyles];
     for (const candidate of candidates) {
         const match = matchExtension(candidate, extensions);
-        if (!match || seen.has(candidate))
+        if (!match)
+            continue;
+        const resolvedCandidate = path.resolve(candidate);
+        if (seen.has(resolvedCandidate))
             continue;
-        seen.add(candidate);
-        order.push({ path: path.resolve(candidate), ext: match });
+        seen.add(resolvedCandidate);
+        order.push({ path: resolvedCandidate, ext: match });
     }
     return order;
 }
@@ -96,28 +102,79 @@ function matchExtension(filePath, extensions) {
     const lower = filePath.toLowerCase();
     return extensions.find(ext => lower.endsWith(ext));
 }
-async function compileStyleModule(file, { cwd, peerResolver }) {
+async function compileStyleModule(file, { cwd, peerResolver, resolver, }) {
     switch (file.ext) {
         case '.css':
             return fs.readFile(file.path, 'utf8');
         case '.scss':
         case '.sass':
-            return compileSass(file.path, file.ext === '.sass', peerResolver);
+            return compileSass(file.path, file.ext === '.sass', {
+                cwd,
+                peerResolver,
+                resolver,
+            });
         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 '';
     }
 }
-async function compileSass(filePath, indented, peerResolver) {
+async function compileSass(filePath, indented, { cwd, peerResolver, resolver, }) {
     const sassModule = await optionalPeer('sass', 'Sass', peerResolver);
-    const sass = sassModule;
-    const result = sass.compile(filePath, {
-        style: 'expanded',
+    const sass = resolveSassNamespace(sassModule);
+    const importer = createSassImporter({ cwd, resolver });
+    const loadPaths = buildSassLoadPaths(filePath);
+    if (typeof sass.compileAsync === 'function') {
+        const result = await sass.compileAsync(filePath, {
+            style: 'expanded',
+            loadPaths,
+            importers: importer ? [importer] : undefined,
+        });
+        return result.css;
+    }
+    if (typeof sass.render === 'function') {
+        return renderLegacySass(sass, filePath, indented, loadPaths);
+    }
+    throw new Error('@knighted/css: Installed "sass" package does not expose compileAsync or render APIs. Please update "sass" to a supported version.');
+}
+function renderLegacySass(sass, filePath, indented, loadPaths) {
+    return new Promise((resolve, reject) => {
+        sass.render({
+            file: filePath,
+            indentedSyntax: indented,
+            outputStyle: 'expanded',
+            includePaths: loadPaths,
+        }, (error, result) => {
+            if (error) {
+                reject(error);
+                return;
+            }
+            if (!result || typeof result.css === 'undefined') {
+                resolve('');
+                return;
+            }
+            resolve(result.css.toString());
+        });
     });
-    return result.css;
+}
+// Ensure Sass can resolve bare module specifiers by walking node_modules folders.
+function buildSassLoadPaths(filePath) {
+    const loadPaths = new Set();
+    let cursor = path.dirname(filePath);
+    const root = path.parse(cursor).root;
+    while (true) {
+        loadPaths.add(cursor);
+        loadPaths.add(path.join(cursor, 'node_modules'));
+        if (cursor === root)
+            break;
+        cursor = path.dirname(cursor);
+    }
+    const cwd = process.cwd();
+    loadPaths.add(cwd);
+    loadPaths.add(path.join(cwd, 'node_modules'));
+    return Array.from(loadPaths).filter(dir => dir && existsSync(dir));
 }
 async function compileLess(filePath, peerResolver) {
     const mod = await optionalPeer('less', 'Less', peerResolver);
@@ -126,7 +183,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 +223,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) {
@@ -185,6 +245,27 @@ async function optionalPeer(name, label, loader) {
         throw error;
     }
 }
+function resolveSassNamespace(mod) {
+    if (isSassNamespace(mod)) {
+        return mod;
+    }
+    if (typeof mod === 'object' &&
+        mod !== null &&
+        'default' in mod) {
+        const candidate = mod.default;
+        if (isSassNamespace(candidate)) {
+            return candidate;
+        }
+    }
+    return mod;
+}
+function isSassNamespace(candidate) {
+    if (typeof candidate !== 'object' || !candidate) {
+        return false;
+    }
+    const namespace = candidate;
+    return typeof namespace.compile === 'function' || typeof namespace.render === 'function';
+}
 function unwrapModuleNamespace(mod) {
     if (typeof mod === 'object' &&
         mod !== null &&

package/dist/generateTypes.d.ts

@@ -0,0 +1,104 @@
+import { createRequire } from 'node:module';
+import { moduleType } from 'node-module-type';
+import { getTsconfig } from 'get-tsconfig';
+import { type MatchPath } from 'tsconfig-paths';
+import { cssWithMeta } from './css.js';
+import { type SelectorTypeVariant } from './loaderInternals.js';
+interface ManifestEntry {
+    file: string;
+    hash: string;
+}
+type Manifest = Record<string, ManifestEntry>;
+interface ImportMatch {
+    specifier: string;
+    importer: string;
+}
+interface DeclarationRecord {
+    specifier: string;
+    filePath: string;
+}
+interface TsconfigResolutionContext {
+    absoluteBaseUrl?: string;
+    matchPath?: MatchPath;
+}
+type CssWithMetaFn = typeof cssWithMeta;
+export interface GenerateTypesResult {
+    written: number;
+    removed: number;
+    declarations: DeclarationRecord[];
+    warnings: string[];
+    outDir: string;
+    typesIndexPath: string;
+}
+export interface GenerateTypesOptions {
+    rootDir?: string;
+    include?: string[];
+    outDir?: string;
+    typesRoot?: string;
+    stableNamespace?: string;
+}
+type ModuleTypeDetector = () => ReturnType<typeof moduleType>;
+declare function resolvePackageRoot(): string;
+export declare function generateTypes(options?: GenerateTypesOptions): Promise<GenerateTypesResult>;
+declare function normalizeIncludeOptions(include: string[] | undefined, rootDir: string): string[];
+declare function collectCandidateFiles(entries: string[]): Promise<string[]>;
+declare function findSpecifierImports(filePath: string): Promise<ImportMatch[]>;
+declare function stripInlineLoader(specifier: string): string;
+declare function splitResourceAndQuery(specifier: string): {
+    resource: string;
+    query: string;
+};
+declare function resolveImportPath(resourceSpecifier: string, importerPath: string, rootDir: string, tsconfig?: TsconfigResolutionContext): Promise<string | undefined>;
+declare function buildDeclarationFileName(specifier: string): string;
+declare function formatModuleDeclaration(specifier: string, variant: SelectorTypeVariant, selectors: Map<string, string>): string;
+declare function formatSelectorType(selectors: Map<string, string>): string;
+declare function writeTypesIndex(indexPath: string, manifest: Manifest, outDir: string): Promise<void>;
+declare function relativeToRoot(filePath: string, rootDir: string): string;
+declare function resolveWithTsconfigPaths(specifier: string, tsconfig?: TsconfigResolutionContext): Promise<string | undefined>;
+declare function loadTsconfigResolutionContext(rootDir: string, loader?: typeof getTsconfig): TsconfigResolutionContext | undefined;
+declare function normalizeTsconfigPaths(paths: Record<string, string[] | string> | undefined): Record<string, string[]> | undefined;
+declare function isNonRelativeSpecifier(specifier: string): boolean;
+declare function createProjectPeerResolver(rootDir: string): (name: string) => Promise<any>;
+declare function getProjectRequire(rootDir: string): ReturnType<typeof createRequire>;
+export declare function runGenerateTypesCli(argv?: string[]): Promise<void>;
+export interface ParsedCliArgs {
+    rootDir: string;
+    include?: string[];
+    outDir?: string;
+    typesRoot?: string;
+    stableNamespace?: string;
+    help?: boolean;
+}
+declare function parseCliArgs(argv: string[]): ParsedCliArgs;
+declare function printHelp(): void;
+declare function reportCliResult(result: GenerateTypesResult): void;
+declare function setCssWithMetaImplementation(impl?: CssWithMetaFn): void;
+declare function setModuleTypeDetector(detector?: ModuleTypeDetector): void;
+declare function setImportMetaUrlProvider(provider?: () => string | undefined): void;
+export declare const __generateTypesInternals: {
+    writeTypesIndex: typeof writeTypesIndex;
+    stripInlineLoader: typeof stripInlineLoader;
+    splitResourceAndQuery: typeof splitResourceAndQuery;
+    findSpecifierImports: typeof findSpecifierImports;
+    resolveImportPath: typeof resolveImportPath;
+    resolvePackageRoot: typeof resolvePackageRoot;
+    buildDeclarationFileName: typeof buildDeclarationFileName;
+    formatModuleDeclaration: typeof formatModuleDeclaration;
+    formatSelectorType: typeof formatSelectorType;
+    relativeToRoot: typeof relativeToRoot;
+    collectCandidateFiles: typeof collectCandidateFiles;
+    normalizeIncludeOptions: typeof normalizeIncludeOptions;
+    normalizeTsconfigPaths: typeof normalizeTsconfigPaths;
+    setCssWithMetaImplementation: typeof setCssWithMetaImplementation;
+    setModuleTypeDetector: typeof setModuleTypeDetector;
+    setImportMetaUrlProvider: typeof setImportMetaUrlProvider;
+    isNonRelativeSpecifier: typeof isNonRelativeSpecifier;
+    createProjectPeerResolver: typeof createProjectPeerResolver;
+    getProjectRequire: typeof getProjectRequire;
+    loadTsconfigResolutionContext: typeof loadTsconfigResolutionContext;
+    resolveWithTsconfigPaths: typeof resolveWithTsconfigPaths;
+    parseCliArgs: typeof parseCliArgs;
+    printHelp: typeof printHelp;
+    reportCliResult: typeof reportCliResult;
+};
+export {};