feat(meta-css): add support for hiccup-css declarations

packages/meta-css/src/api.ts

@@ -15,6 +15,7 @@ export interface AppCtx<T extends CommonOpts>
 
 export interface CompiledSpecs {
 	classes: IObjectOf<any>;
+	decls: any[];
 	media: IObjectOf<any>;
 	info: SpecInfo;
 }
@@ -24,6 +25,7 @@ export interface GeneratorConfig {
 	media?: IObjectOf<string>;
 	tables?: IObjectOf<IObjectOf<NumOrString> | string[] | number[]>;
 	vars?: IObjectOf<string[]>;
+	decls?: any[];
 	specs: Spec[];
 }
 
@@ -59,6 +61,10 @@ export const ARG_INCLUDE = {
 	}),
 };
 
+export const ARG_EXCLUDE_DECLS = {
+	noDecls: flag({ alias: "d", desc: "Don't emit framework decls" }),
+};
+
 export const ARG_PRETTY = {
 	pretty: flag({ alias: "p", desc: "Pretty print output" }),
 };

packages/meta-css/src/convert.ts

@@ -1,6 +1,6 @@
 // thing:no-export
 import type { IObjectOf } from "@thi.ng/api";
-import { strings, type Command, string } from "@thi.ng/args";
+import { string, strings, type Command } from "@thi.ng/args";
 import { peek } from "@thi.ng/arrays";
 import { delayed } from "@thi.ng/compose";
 import { assert, illegalArgs, illegalState } from "@thi.ng/errors";
@@ -19,6 +19,7 @@ import { assocObj, filter, map } from "@thi.ng/transducers";
 import { watch } from "fs";
 import { resolve } from "path";
 import {
+	ARG_EXCLUDE_DECLS,
 	ARG_INCLUDE,
 	ARG_NO_HEADER,
 	ARG_PRETTY,
@@ -38,6 +39,7 @@ interface ConvertOpts extends CommonOpts {
 	eval?: string;
 	force?: string[];
 	pretty: boolean;
+	noDecls: boolean;
 	noHeader: boolean;
 	watch: boolean;
 }
@@ -69,6 +71,7 @@ export const CONVERT: Command<ConvertOpts, CommonOpts, AppCtx<ConvertOpts>> = {
 	opts: {
 		...ARG_SPECS,
 		...ARG_INCLUDE,
+		...ARG_EXCLUDE_DECLS,
 		...ARG_PRETTY,
 		...ARG_NO_HEADER,
 		...ARG_WATCH,
@@ -173,7 +176,10 @@ const watchInputs = async (
 };
 
 const processInputs = (
-	{ logger, opts: { include, noHeader, out, pretty } }: AppCtx<ConvertOpts>,
+	{
+		logger,
+		opts: { include, noDecls, noHeader, out, pretty },
+	}: AppCtx<ConvertOpts>,
 	specs: CompiledSpecs,
 	forceRules: ReturnType<typeof processForceIncludes>,
 	inputs: string[]
@@ -190,6 +196,9 @@ const processInputs = (
 		? include.map((x) => readText(resolve(x), logger).trim())
 		: [];
 	if (!noHeader) bundle.push(generateHeader(specs));
+	if (!noDecls && specs.decls.length) {
+		bundle.push(css(specs.decls, { format: procOpts.format }));
+	}
 	inputs.forEach((input) => processSpec(input, procOpts));
 	processPlainRules(bundle, procOpts);
 	processMediaQueries(bundle, procOpts);
@@ -212,12 +221,12 @@ const processMediaQueries = (
 };
 
 const processPlainRules = (
-	result: string[],
+	bundle: string[],
 	{ logger, specs, format, plainRules }: ProcessOpts
 ) => {
 	const rules = buildDecls(plainRules, specs);
 	logger.debug("plain rules", rules);
-	result.push(css(rules, { format }));
+	bundle.push(css(rules, { format }));
 };
 
 const processForceIncludes = (

packages/meta-css/src/export.ts

@@ -6,6 +6,7 @@ import { COMPACT, PRETTY, at_media, css } from "@thi.ng/hiccup-css";
 import type { ILogger } from "@thi.ng/logger";
 import { resolve } from "path";
 import {
+	ARG_EXCLUDE_DECLS,
 	ARG_INCLUDE,
 	ARG_NO_HEADER,
 	ARG_PRETTY,
@@ -17,6 +18,7 @@ import { generateHeader, maybeWriteText } from "./utils.js";
 
 interface ExportOpts extends CommonOpts {
 	pretty: boolean;
+	noDecls: boolean;
 	noHeader: boolean;
 	include?: string[];
 	media?: string[];
@@ -26,6 +28,7 @@ export const EXPORT: Command<ExportOpts, CommonOpts, AppCtx<ExportOpts>> = {
 	desc: "Export entire generated framework as CSS",
 	opts: {
 		...ARG_INCLUDE,
+		...ARG_EXCLUDE_DECLS,
 		...ARG_PRETTY,
 		...ARG_NO_HEADER,
 		media: strings({
@@ -38,14 +41,19 @@ export const EXPORT: Command<ExportOpts, CommonOpts, AppCtx<ExportOpts>> = {
 	fn: async (ctx) => {
 		const {
 			logger,
-			opts: { include, media, noHeader, pretty, out },
+			opts: { include, media, noDecls, noHeader, pretty, out },
 			inputs,
 		} = ctx;
 		const specs = readJSON<CompiledSpecs>(resolve(inputs[0]), logger);
 		const bundle: string[] = include
 			? include.map((x) => readText(resolve(x), logger).trim())
 			: [];
 		if (!noHeader) bundle.push(generateHeader(specs));
+		if (!noDecls && specs.decls.length) {
+			bundle.push(
+				css(specs.decls, { format: pretty ? PRETTY : COMPACT })
+			);
+		}
 		bundle.push(serializeSpecs(specs, media, pretty, logger));
 		maybeWriteText(out, bundle, logger);
 	},

packages/meta-css/src/generate.ts

@@ -101,12 +101,14 @@ export const GENERATE: Command<
 			info: { name: "TODO", version: "0.0.0" },
 			media: {},
 			classes: {},
+			decls: [],
 		};
 		setPrecision(prec);
 		for (let input of files(root, ".json")) {
 			const config = readJSON<GeneratorConfig>(input, logger);
 			Object.assign(result.info, config.info);
 			Object.assign(result.media, config.media);
+			if (config.decls) result.decls.push(...config.decls);
 			for (let spec of config.specs) {
 				expandSpec(config, spec, result.classes, logger);
 			}