import type { Loader, LoaderFile } from "../../contracts/index.ts";
import { compileCss, type CompileOptions } from "./compiler.ts";

/**
 * Structured css.
 *
 * The stylesheets are written like pug: rules are nested, `&` refers to the
 * parent selector, `#{$var}` interpolates an expression and `@each` repeats
 * a block. The compiler flattens everything into plain css.
 */

export { compileCss, type CompileOptions } from "./compiler.ts";
export { evaluate, darken, lighten, rgba } from "./evaluate.ts";
export { parseCss } from "./parser.ts";
export { sassLoader, type SassLoaderOptions } from "./sass.ts";
export {
	compileStcssModule,
	resolveStyle,
	type StcssModule,
	type StcssModuleOptions,
} from "./modules.ts";

export interface StcssLoaderOptions extends CompileOptions {
	/** Directory the loader scans, relative to the project root. */
	dir?: string;
}

/** Loader for structured css files. */
export function stcssLoader(options: StcssLoaderOptions = {}): Loader {
	return {
		name: "stcss",
		extensions: [".stcss", ".css"],
		load(file: LoaderFile) {
			return {
				data: {},
				content: compileCss(file.source, options),
			};
		},
	};
}

/** Wraps compiled css into a style tag. */
export function styleTag(css: string): string {
	return `<style>${css}</style>`;
}

export function viewTransition(name: string): string {
	return `view-transition-name: ${name};`;
}