starakaj

mgraphics.relative_coords = 1;

function cls_1() {
  mgraphics.set_source_rgba(0.08235294117647059, 1, 0.7019607843137254, 1);
}

function cls_2() {
  mgraphics.set_source_rgba(0.2901960784313726, 0.7294117647058823, 1, 1);
}

starakaj

parser.parseComplete(data);

const paintFunction = ([] as t.Statement[]).concat(
	makePaintFunction({
		statements: paintStatements,
		styleFunctions: styleFunctions
	})
);
const programAST = t.program(paintFunction);

starakaj

const makePaintFunction = template(`
	mgraphics.relative_coords = 1;

	%%styleFunctions%%

	function calcAspect() {
		var width = this.box.rect[2] - this.box.rect[0];
		var height = this.box.rect[3] - this.box.rect[1];
		return width/height;
	}

starakaj

onopentag(name: string, attribs: {[s: string]: string}) {
	if (name === "rect") {

		if (viewBox !== undefined) {
			let x = t.numericLiteral(
				2 * Number.parseFloat(attribs.x || "0") / viewBox[2] - 1
			);
			let y = t.numericLiteral(
				1 - 2 * Number.parseFloat(attribs.y || "0") / viewBox[3]
			);

starakaj

const makeRectDrawStatements = template(`
	mgraphics.rectangle(%%x%% * aspect, %%y%%, %%w%% * aspect, %%h%%);
	mgraphics.fill();
`);

const makeStyledRectDrawStatements = template(`
	mgraphics.save();
	%%styleFunctionName%%();
	mgraphics.rectangle(%%x%% * aspect, %%y%%, %%w%% * aspect, %%h%%);
	mgraphics.fill();

starakaj

const makeStyleFunction = template(`
	function %%styleFunctionName%%() {
		mgraphics.set_source_rgba(%%r%%, %%g%%, %%b%%, %%a%%);
	}
`);

starakaj

import * as csstree from "css-tree";

// ...

ontext(data: string) {
	if (inStyle) {

		let styleFunctionName;
		let inDeclaration = false;

starakaj

function translateSource(data: string, outPath: string) {

	let paintStatements: t.Statement[] = [];
	let viewBox: number[];
	let inStyle = false;

	const parser = new html2.Parser({
		onopentag(name: string, attribs: {[s: string]: string}) {
			// ...

starakaj

function style1() {
  mgraphics.set_source_rgba(1, 0, 0, 1);
}

function paint() {
  mgraphics.save();
  style1();
  mgraphics.rectangle(0, 0, 100, 100);
  mgraphics.fill();
  mgraphics.restore();

starakaj

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 353.03 321">
	<defs>
		<style>
			.cls-1 {
				fill: #15ffb3;
			}

			.cls-2 {
				fill: #4abaff;
			}