imba/src/compiler/styler.mjs

Intuitive and powerful language for building webapps that fly

function iter$__(a){ let v; return a ? ((v=a.toIterable) ? v.call(a) : a) : a; };;
// @ts-ignore
function isa$(a,b){ return typeof b === "string" ? (typeof a === b) : b[Symbol.hasInstance]?.(a) };
// @ts-ignore
function is$(a,b){ return a === b || b?.[$matcher$]?.(a) || false};
function negIndex$__(value,index){ return value[value.length + index] };
import {register$} from 'imba/runtime';
var $1;
const $lcha$ = Symbol.for('#lcha'), $matcher$ = Symbol.for('#matcher'), $stack$ = Symbol.for('#stack'), $parts$ = Symbol.for('#parts'), $apply$ = Symbol.for('#apply'), $register$ = Symbol.for('#register'), $string$ = Symbol.for('#string'), $media$ = Symbol.for('#media'), $rules$ = Symbol.for('#rules');

/*body*/
// imba$stdlib=1
import * as selparser from './selparse.mjs';
import {conv} from '../../vendor/colors.mjs';
import {colord,toLchArray} from './colord.mjs';
import {fonts,colors,variants,named_colors} from './theme.mjs';
import * as theme from './theme.mjs';

const extensions = {};
let ThemeInstance = null;
const ThemeCache = new WeakMap;

// {string: "hsla(0,0,0,var(--alpha,1))",h:0,s:0,l:0}
// {string: "hsla(0,100%,100%,var(--alpha,1))",h:0,s:0,l:100}

// export const properties =

export const layouts = {
	
	vflex: function(o) {
		o.display = 'flex';
		return o.fld = 'column';
	},
	
	hflex: function(o) {
		o.display = 'flex';
		return o.fld = 'row';
	},
	
	box: function(o) {
		o.display = 'flex';
		o.ai = 'center';
		return o.jc = 'center';
	},
	
	vbox: function(o) {
		o.display = 'flex';
		o.fld = 'column';
		o.ai = 'center';
		return o.jc = 'center';
	},
	
	hbox: function(o) {
		o.display = 'flex';
		o.fld = 'row';
		o.ai = 'center';
		return o.jc = 'center';
	},
	
	lbox: function(o) {
		o.display = 'flex';
		o.fld = 'row';
		o.ai = 'center';
		return o.jc = 'flex-start';
	},
	
	rbox: function(o) {
		o.display = 'flex';
		o.fld = 'row';
		o.ai = 'center';
		return o.jc = 'flex-end';
	},
	
	tbox: function(o) {
		o.display = 'flex';
		o.fld = 'column';
		o.ai = 'center';
		return o.jc = 'flex-start';
	},
	
	bbox: function(o) {
		o.display = 'flex';
		o.fld = 'column';
		o.ai = 'center';
		return o.jc = 'flex-end';
	},
	
	hgrid: function(o) {
		o.display = 'grid';
		o.gaf = 'column';
		return o.gac = '1fr';
	},
	
	vgrid: function(o) {
		o.display = 'grid';
		return o.gaf = 'row';
	}
};

$1 = 0; for (let dir of iter$__('vh')){
	let row = $1++;
	for (let va of iter$__('tcbs')){
		for (let ha of iter$__('lcrs')){
			let vm = {
				t: 'flex-start',
				b: 'flex-end',
				c: 'center',
				s: row ? 'stretch' : 'space-between'
			};
			
			let hm = {
				l: 'flex-start',
				r: 'flex-end',
				c: 'center',
				s: row ? 'space-between' : 'stretch'
			};
			
			let name = ("" + dir + va + ha);
			let combo = {
				display: 'flex',
				fld: row ? 'row' : 'column',
				jc: row ? hm[ha] : vm[va],
				ai: row ? vm[va] : hm[ha],
				ac: row ? vm[va] : hm[ha]
			};
			
			layouts[name] = function(o) {
				Object.assign(o,combo);
				return o;
			};
			
			// if dir == 'v'
		};
	};
};

export const validTypes = {
	ease: 'linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|stepsƒ|cubic-bezierƒ'
};

for (let $2 = 0, $3 = Object.keys(validTypes), $7 = $3.length, k, v; $2 < $7; $2++){
	k = $3[$2];v = validTypes[k];let o = {};
	for (let $4 = 0, $5 = iter$__(v.split('|')), $6 = $5.length; $4 < $6; $4++) {
		let item = $5[$4];
		o[item] = 1;
	};
	validTypes[k] = o;
};

export const aliases = {
	
	c: 'color',
	d: 'display',
	pos: 'position',
	
	// padding
	p: 'padding',
	pl: 'padding-left',
	pr: 'padding-right',
	pt: 'padding-top',
	pb: 'padding-bottom',
	px: 'padding-x',
	py: 'padding-y',
	
	// margins
	m: 'margin',
	ml: 'margin-left',
	mr: 'margin-right',
	mt: 'margin-top',
	mb: 'margin-bottom',
	mx: 'margin-x',
	my: 'margin-y',
	
	// add scroll snap shorthands?
	
	w: 'width',
	h: 'height',
	t: 'top',
	b: 'bottom',
	l: 'left',
	r: 'right',
	s: 'size',
	mih: 'min-height',
	mah: 'max-height',
	miw: 'min-width',
	maw: 'max-width',
	// size: ['width','height']
	
	// justify
	ji: 'justify-items',
	jc: 'justify-content',
	js: 'justify-self',
	j: ['justify-content','justify-items'],// Deprecate?
	
	// align
	ai: 'align-items',
	ac: 'align-content',
	as: 'align-self',
	a: ['align-content','align-items'],// Deprecate?
	
	// justify & align
	// To fit better with the spec - this ought to be
	jai: 'place-items',
	jac: 'place-content',
	jas: 'place-self',
	// ja: ['place-items','place-content']
	ja: 'justify-align',
	
	// consider using these instead
	// pi: 'place-items'
	// pc: 'place-content'
	// ps: 'place-self'
	// pa: 'place-all'
	
	// flex
	fl: 'flex',
	flf: 'flex-flow',
	fld: 'flex-direction',
	flb: 'flex-basis',
	flg: 'flex-grow',
	fls: 'flex-shrink',
	flw: 'flex-wrap',
	
	// fonts
	ff: 'font-family',
	fs: 'font-size',
	fw: 'font-weight',
	ts: 'text-shadow',// DEPCRATED - use for font-style instead?
	txs: 'text-shadow',
	
	// text-decoration
	td: 'text-decoration',
	tdl: 'text-decoration-line',
	tdc: 'text-decoration-color',
	tds: 'text-decoration-style',
	tdt: 'text-decoration-thickness',
	tdsi: 'text-decoration-skip-ink',
	tuo: 'text-underline-offset',
	
	// text-emphasis
	te: 'text-emphasis',
	tec: 'text-emphasis-color',
	tes: 'text-emphasis-style',
	tep: 'text-emphasis-position',
	tet: 'text-emphasis-thickness',
	
	// text
	tt: 'text-transform',
	ta: 'text-align',
	va: 'vertical-align',
	ls: 'letter-spacing',
	lh: 'line-height',
	
	// border
	bd: 'border',
	bdr: 'border-right',
	bdl: 'border-left',
	bdt: 'border-top',
	bdb: 'border-bottom',
	bdx: 'border-x',
	bdy: 'border-y',
	
	// border-style
	bs: 'border-style',
	bsr: 'border-right-style',
	bsl: 'border-left-style',
	bst: 'border-top-style',
	bsb: 'border-bottom-style',
	bsx: 'border-x-style',
	bsy: 'border-y-style',
	
	// border-width
	bw: 'border-width',
	bwr: 'border-right-width',
	bwl: 'border-left-width',
	bwt: 'border-top-width',
	bwb: 'border-bottom-width',
	bwx: 'border-x-width',
	bwy: 'border-y-width',
	
	// border-color
	bc: 'border-color',
	bcr: 'border-right-color',
	bcl: 'border-left-color',
	bct: 'border-top-color',
	bcb: 'border-bottom-color',
	bcx: 'border-x-color',
	bcy: 'border-y-color',
	
	// border-radius
	rd: 'border-radius',
	rdtl: 'border-top-left-radius',
	rdtr: 'border-top-right-radius',
	rdbl: 'border-bottom-left-radius',
	rdbr: 'border-bottom-right-radius',
	
	// TODO change these into a shared main one
	rdt: 'border-top-radius',
	rdb: 'border-bottom-radius',
	rdl: 'border-left-radius',
	rdr: 'border-right-radius',
	
	// background
	bg: 'background',
	bgp: 'background-position',
	bgc: 'background-color',
	bgr: 'background-repeat',
	bgi: 'background-image',
	bga: 'background-attachment',
	bgs: 'background-size',
	bgo: 'background-origin',
	bgclip: 'background-clip',
	
	// grid
	g: 'gap',
	rg: 'row-gap',
	cg: 'column-gap',
	gtr: 'grid-template-rows',
	gtc: 'grid-template-columns',
	gta: 'grid-template-areas',
	gar: 'grid-auto-rows',
	gac: 'grid-auto-columns',
	gaf: 'grid-auto-flow',
	gcg: 'grid-column-gap',
	grg: 'grid-row-gap',
	ga: 'grid-area',
	gr: 'grid-row',
	gc: 'grid-column',
	gt: 'grid-template',
	grs: 'grid-row-start',
	gcs: 'grid-column-start',
	gre: 'grid-row-end',
	gce: 'grid-column-end',
	
	// shadow
	shadow: 'box-shadow',// DEPRECATED
	bxs: 'box-shadow',
	
	// overflow
	of: 'overflow',
	ofx: 'overflow-x',
	ofy: 'overflow-y',
	ofa: 'overflow-anchor',
	tof: 'text-overflow',
	
	// content
	prefix: 'content@before',
	suffix: 'content@after',
	
	// transforms
	x: 'x',
	y: 'y',
	z: 'z',
	rotate: 'rotate',
	scale: 'scale',
	'scale-x': 'scale-x',
	'scale-y': 'scale-y',
	'skew-x': 'skew-x',
	'skew-y': 'skew-y',
	origin: 'transform-origin',
	
	// others
	ws: 'white-space',
	zi: 'z-index',
	pe: 'pointer-events',
	us: 'user-select',
	o: 'opacity',
	tween: 'transition',
	
	// easing
	e: 'ease-styles',// Deprecate
	ea: 'ease-all',
	ead: 'ease-all-duration',
	eaf: 'ease-all-function',
	eaw: 'ease-all-delay',
	
	es: 'ease-styles',
	esd: 'ease-styles-duration',
	esf: 'ease-styles-function',
	esw: 'ease-styles-delay',
	
	eo: 'ease-opacity',
	eod: 'ease-opacity-duration',
	eof: 'ease-opacity-function',
	eow: 'ease-opacity-delay',
	
	ec: 'ease-colors',
	ecd: 'ease-colors-duration',
	ecf: 'ease-colors-function',
	ecw: 'ease-colors-delay',
	
	eb: 'ease-box',
	ebd: 'ease-box-duration',
	ebf: 'ease-box-function',
	ebw: 'ease-box-delay',
	
	et: 'ease-transform',
	etd: 'ease-transform-duration',
	etf: 'ease-transform-function',
	etw: 'ease-transform-delay',
	
	// outline
	ol: 'outline',
	olo: 'outline-offset',
	olc: 'outline-color',
	ols: 'outline-style',
	olw: 'outline-width'
};

export const abbreviations = {};
for (let $8 = 0, $9 = Object.keys(aliases), $10 = $9.length, k, v; $8 < $10; $8++){
	k = $9[$8];v = aliases[k];if (typeof v == 'string') {
		abbreviations[v] = k;
	};
};

function isNumber(val){
	if (val._value && val._value._type == "NUMBER" && !val._unit) {
		return true;
	};
	return false;
};

function parseColorPart(part){
	let num = parseFloat(part);
	if (typeof part == 'string' && part.indexOf('%') > 0) {
		num = num / 100;
	};
	return num;
};

export function parseColorString(str,to = 'hsl'){
	let m;
	if (named_colors[str]) {
		str = named_colors[str];
	};
	
	if (to == 'lch') {
		return toLchArray(str);
	};
	
	if (str[0] == '#') {
		let hex = conv.hex.rgb(str);
		return conv.rgb.hsl(hex);
	};
	
	if (m = str.match(/^(hsla?|rgba?)\((.+)\)$/)) {
		let [a,b,c,d = ''] = m[2].replace(/[\,\/]/g,' ').split(/\s+/g);
		
		let out;
		a = parseColorPart(a);
		b = parseColorPart(b);
		c = parseColorPart(c);
		
		if (to == 'lch') {
			return conv.rgb.lch([a,b,c]);
		};
		
		if (m[1] == 'rgb' || m[1] == 'rgba') {
			out = conv.rgb.hsl([parseFloat(a),parseFloat(b),parseFloat(c)]);
		};
		
		if (m[1] == 'hsl' || m[1] == 'hsla') {
			out = [parseFloat(a),parseFloat(b),parseFloat(c)];
		};
		
		return out;
	};
	
	return null;
};

let c$0 = Symbol();
export class Color {
	static from(raw){
		if (typeof raw == 'string') {
			if (raw[0] == '#' && !(raw.match(/^\#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/))) {
				return new NamedColor(raw.slice(1));
			};
			
			raw = parseColorString(raw);
		};
		
		if (isa$(raw,Array)) {
			return new this('',raw[0],raw[1],raw[2]);
		};
		
		return null;
	}
	
	constructor(name,h,s,l,a = 1){
		this.name = name;
		this.h = h;
		this.s = s;
		this.l = l;
		this.a = a;
	}
	
	lcha(){
		return this[$lcha$] ||= toLchArray(("hsla(" + this.h + " " + this.s + "% " + this.l + "% / " + this.a + ")"));
	}
	
	alpha(a = 1){
		return new Color(this.name,this.h,this.s,this.l,a);
	}
	
	clone(){
		return new Color(this.name,this.h,this.s,this.l,this.a);
	}
	
	mix(other,hw = 0.5,sw = 0.5,lw = 0.5){
		let h1 = this.h + (other.h - this.h) * hw;
		let s1 = this.s + (other.s - this.s) * sw;
		let l1 = this.l + (other.l - this.l) * lw;
		return new Color(this.name + other.name,h1,s1,l1);
	}
	
	toString(a = this.a){
		// if typeof a == 'string' and a.match(/%$/)
				// a = parseFloat(a.slice(0,-1)) / 100
		if (typeof a == 'string' && a[0] == '$') {
			a = ("var(--" + a.slice(1) + ",100%)");
		};
		return ("hsla(" + this.h.toFixed(2) + "," + this.s.toFixed(2) + "%," + this.l.toFixed(2) + "%," + a + ")");
	}
	
	toVar(round = 2){
		return ("" + Math.round(this.h) + "," + Math.round(this.s) + "%," + Math.round(this.l) + "%");
		// "{h.toFixed(2)},{s.toFixed(2)}%,{l.toFixed(2)}%"
	}
	
	toLchString(){
		let [l,c,h,a] = this.lcha();
		return (`lcha(` + l.toFixed(2) + ` ` + c.toFixed(2) + ` ` + h.toFixed(2) + `% / ` + a + `)`);
	}
	
	c(){
		return this.toString();
	}
	static { register$(this,c$0,'Color',16) }
};

let c$1 = Symbol();
export class NamedColor extends Color {
	toVar(){
		return ("var(--c_" + this.name + ")");
	}
	static { register$(this,c$1,'NamedColor',0) }
};

let c$2 = Symbol();
export class Tint extends Color {
	alpha(a = 1){
		return new Tint(this.name,this.h,this.s,this.l,a);
	}
	
	clone(){
		return new Tint(this.name,this.h,this.s,this.l,this.a);
	}
	
	toString(a = this.a){
		if (typeof a == 'string' && a[0] == '$') {
			a = ("var(--" + a.slice(1) + ",100%)");
		};
		
		return ("hsla(var(--" + this.name + ")," + a + ")");
	}
	
	toVar(round = 2){
		return ("var(--" + this.name + ")");
	}
	static { register$(this,c$2,'Tint',0) }
};

let c$3 = Symbol();
export class Length {
	static parse(value){
		let m = String(value).match(/^(\-?[\d\.]+)(\w+|%)?$/);
		if (!m) { return null };
		return new this(parseFloat(m[1]),m[2]);
	}
	
	constructor(number,unit){
		this.number = number;
		this.unit = unit;
	}
	
	valueOf(){
		return this.number;
	}
	
	toString(){
		return this.number + (this.unit || '');
	}
	
	clone(num = this.number,u = this.unit){
		return new Length(num,u);
	}
	
	rounded(){
		return this.clone(Math.round(this.number));
	}
	
	c(){
		return this.toString();
	}
	
	get _unit(){
		return this.unit;
	}
	
	get _number(){
		return this.number;
	}
	static { register$(this,c$3,'Length',16) }
};

let c$4 = Symbol();
export class Var {
	constructor(name,fallback){
		this.name = name;
		this.fallback = fallback;
	}
	
	c(){
		return this.fallback ? (("var(--" + this.name + "," + (this.fallback.c ? this.fallback.c() : String(this.fallback)) + ")")) : (("var(--" + this.name + ")"));
	}
	static { register$(this,c$4,'Var',16) }
};

let c$5 = Symbol();
export class Calc {
	constructor(expr){
		this.expr = expr;
	}
	
	cpart(parts){
		let out = '(';
		for (let $11 = 0, $12 = iter$__(parts), $13 = $12.length; $11 < $13; $11++) {
			let part = $12[$11];
			if (typeof part == 'string') {
				out += ' ' + part + ' ';
			} else if (typeof part == 'number') {
				out += part;
			} else if (isa$(part.c,Function)) {
				out += part.c();
			} else if (isa$(part,Array)) {
				out += this.cpart(part);
			};
		};
		
		out += ')';
		return out;
	}
	
	c(){
		return 'calc' + this.cpart(this.expr);
	}
	static { register$(this,c$5,'Calc',16) }
};

// This has to move into StyleTheme class
let defaultPalette = {
	// should deprecate
		current: {string: "currentColor",c: function() { return 'currentColor'; }},
	transparent: new Color('transparent',0,0,100,'0%'),
	clear: new Color('transparent',100,100,100,'0%'),
	black: new Color('black',0,0,0,'100%'),
	white: new Color('white',0,0,100,'100%')
};

function parseColors(palette,colors){
	for (let $14 = 0, $15 = Object.keys(colors), $19 = $15.length, name, variations; $14 < $19; $14++){
		name = $15[$14];variations = colors[name];if (typeof variations == 'string') {
			palette[name] = variations;
			continue;
		};
		
		for (let $16 = 0, $17 = Object.keys(variations), $18 = $17.length, subname, raw; $16 < $18; $16++){
			subname = $17[$16];raw = variations[subname];let path = name + subname;
			
			if (palette[raw]) {
				palette[path] = palette[raw];
			} else {
				let [h,s,l] = parseColorString(raw);
				let color = palette[path] = new Color(path,h,s,l,'100%');
			};
		};
	};
	return palette;
};

parseColors(defaultPalette,colors);

const VALID_CSS_UNITS = 'cm mm Q in pc pt px em ex ch rem vw vh vmin vmax % s ms fr deg rad grad turn Hz kHz'.split(' ');

let c$6 = Symbol();
export class StyleTheme {
	static instance(){
		return ThemeInstance ||= new this;
	}
	
	static propAbbr(name){
		return abbreviations[name] || name;
	}
	
	static wrap(config){
		if (!config) { return this.instance() };
		
		let theme = ThemeCache.get(config);
		if (!theme) { ThemeCache.set(config,theme = new this(config)) };
		return theme;
	}
	
	constructor(ext = {}){
		this.options = theme;
		this.palette = Object.assign({},defaultPalette);
		
		if (ext.theme) { ext = ext.theme };
		
		if (ext && ext.colors) {
			parseColors(this.palette,ext.colors);
		};
	}
	
	expandProperty(name){
		return aliases[name] || undefined;
	}
	
	expandValue(value,config){
		if (value == undefined) {
			value = config.default;
		};
		
		if (config.hasOwnProperty(value)) {
			value = config[value];
		};
		
		if (typeof value == 'number' && config.NUMBER) {
			let [step,num,unit] = config.NUMBER.match(/^(\-?[\d\.]+)(\w+|%)?$/);
			return value * parseFloat(num) + unit;
		};
		
		return value;
	}
	
	padding_x([l,r = l]){
		return {'padding-left': l,'padding-right': r};
	}
	
	padding_y([t,b = t]){
		return {'padding-top': t,'padding-bottom': b};
	}
	
	margin_x([l,r = l]){
		return {'margin-left': l,'margin-right': r};
	}
	
	margin_y([t,b = t]){
		return {'margin-top': t,'margin-bottom': b};
	}
	
	ease(pars){
		return this.$ease(pars,'s');
	}
	
	ease_all(pars){
		return this.$ease(pars,'a');
	}
	
	ease_opacity(pars){
		return this.$ease(pars,'o');
	}
	
	ease_styles(pars){
		return this.$ease(pars,'s');
	}
	
	ease_box(pars){
		return this.$ease(pars,'b');
	}
	
	ease_transform(pars){
		return this.$ease(pars,'t');
	}
	
	ease_colors(pars){
		return this.$ease(pars,'c');
	}
	
	$ease(pars,k = '',slot = null){
		pars = pars.slice(0);
		
		let o = {__ease__: k};
		
		if (pars[0]?.unit) {
			o[("--e_" + k + "d")] = pars[0];
			pars.shift();
		};
		
		if (pars[0] && !(pars[0].unit)) {
			let ev = this.$varFallback('ease',[pars[0]]);
			o[("--e_" + k + "f")] = ev;
			pars.shift();
		};
		
		if (pars[0] && pars[0].unit) {
			o[("--e_" + k + "w")] = pars[0];
			pars.shift();
		};
		
		return o;
	}
	
	inset([t,r = t,b = t,l = r]){
		return {position: 'absolute',top: t,right: r,bottom: b,left: l};
	}
	
	grid(params){
		let m;
		if (m = this.$varFallback('grid',params)) {
			return m;
		};
		return;
	}
	
	animation(...params){
		let valids = {
			normal: 1,reverse: 1,alternate: 1,'alternate-reverse': 1,
			infinite: 2,
			none: 3,forwards: 3,backwards: 3,both: 3,
			running: 4,paused: 4
		};
		let used = {};
		for (let k = 0, $20 = iter$__(params), $23 = $20.length; k < $23; k++) {
			let anim = $20[k];
			let name = null;
			let ease = null;
			for (let i = 0, $21 = iter$__(anim), $22 = $21.length; i < $22; i++) {
				let part = $21[i];
				let str = String(part);
				let typ = valids[str];
				
				if (validTypes.ease[str] && !ease) {
					ease = true;
				} else if (typ) {
					if (used[typ]) {
						name = [i,str];
					};
					used[typ] = true;
				} else if (str.match(/^[^\d\.]/) && str.indexOf('(') == -1) {
					if (name) {
						ease = [i,str];
					} else {
						name = [i,str];
					};
				};
			};
			if (name) {
				anim[name[0]] = new Var(("animation-" + (name[1])),name[1]);
			};
			if (isa$(ease,Array)) {
				let fallback = this.options.variants.easings[ease[1]];
				anim[ease[0]] = new Var(("ease-" + (ease[1])),fallback);
			};
		};
		
		return {animation: params};
	}
	
	animation_timing_function(...params){
		for (let i = 0, $24 = iter$__(params), $25 = $24.length; i < $25; i++) {
			let param = $24[i];
			let fb = this.$varFallback('ease',param);
			if (fb) { params[i] = fb };
		};
		return params;
	}
	
	animation_name(...params){
		let m;
		for (let i = 0, $26 = iter$__(params), $27 = $26.length; i < $27; i++) {
			let param = $26[i];
			let fb = this.$varFallback('animation',param);
			if (fb) {
				// param[0] = fb[0]
				params[i] = fb;
			};
			// params[i] = $varFallback('animation',param)
		};
		return params;
		
		if (m = this.$varFallback('animation',params)) {
			return m;
		};
		return;
	}
	
	display(params){
		let out = {display: params};
		for (let $28 = 0, $29 = iter$__(params), $30 = $29.length, layout; $28 < $30; $28++) {
			let par = $29[$28];
			if (layout = layouts[String(par)]) {
				layout.call(this,out,par,params);
			};
		};
		return out;
	}
	
	text_transform(params){
		let out = {'text-transform': params};
		let str = String(params[0]);
		if ((is$(str,'cap'))) {
			out['text-transform'] = 'capitalize';
		} else if ((is$(str,'up'))) {
			out['text-transform'] = 'uppercase';
		};
		return out;
	}
	
	position(params){
		let out = {position: params};
		let str = String(params[0]);
		if (str == 'abs') {
			out.position = 'absolute';
		} else if (str == 'rel') {
			out.position = 'relative';
		};
		return out;
	}
	
	width([...params]){
		let o = {};
		for (let $31 = 0, $32 = iter$__(params), $33 = $32.length; $31 < $33; $31++) {
			let param = $32[$31];
			let opts = param._options || {};
			let u = param._unit;
			if (u == 'c' || u == 'col' || u == 'cols') {
				o['grid-column-end'] = ("span " + (param._number));
			} else if (opts.op && String(opts.op) == '>') {
				o['min-width'] = param;
			} else if (opts.op && String(opts.op) == '<') {
				o['max-width'] = param;
			} else {
				o.width = param;
			};
		};
		return o;
	}
	
	height([...params]){
		let o = {};
		for (let $34 = 0, $35 = iter$__(params), $36 = $35.length; $34 < $36; $34++) {
			let param = $35[$34];
			let opts = param._options || {};
			let u = param._unit;
			if (u == 'r' || u == 'row' || u == 'rows') {
				o['grid-row-end'] = ("span " + (param._number));
			} else if (opts.op && String(opts.op) == '>') {
				o['min-height'] = param;
			} else if (opts.op && String(opts.op) == '<') {
				o['max-height'] = param;
			} else {
				o.height = param;
			};
		};
		return o;
	}
	
	transition(...parts){
		let out = {};
		let add = {};
		
		let signatures = [
			'name | duration',
			'name | duration | delay',
			'name | duration | ease',
			'name | duration | ease | delay'
		];
		
		let groups = {
			styles: ['background-color','border-color','color','fill','stroke','opacity','box-shadow','transform'],
			sizes: ['width','height','left','top','right','bottom','margin','padding'],
			colors: ['background-color','border-color','color','fill','stroke']
		};
		
		let i = 0;
		while (i < parts.length){
			let part = parts[i];
			let name = String(part[0]);
			if (name.match(/^[\-\+]?\d?(\.?\d+)(s|ms)?$/)) {
				part.unshift(name = 'styles');
			};
			
			let ease = part[2];
			let group = groups[name];
			
			if (group && parts.length == 0) {
				part[0] = 'none';
				Object.assign(add,{'transition-property': group.join(',')});
			} else if (group && parts.length > 1) {
				// TODO we could do a more advanced version where we
								// create repeating transition-property and duration etc and seam
								// the pairs together
				let subparts = group.map(function(_0) { return [_0].concat(part.slice(1)); });
				parts.splice(i,1,...subparts);
				continue;
			};
			i++;
		};
		
		// this is a hack
		Object.assign(out,{'--e_rest': parts},add);
		return out;
	}
	
	font(params,...rest){
		for (let i = 0, $37 = iter$__(params), $38 = $37.length; i < $38; i++) {
			let param = $37[i];
			true;
		};
		return;
	}
	
	font_family(params){
		let m;
		if (m = this.$varFallback('font',params)) {
			return m;
		};
		return;
	}
	
	text_shadow(...params){
		for (let i = 0, $39 = iter$__(params), $40 = $39.length, m; i < $40; i++) {
			let par = $39[i];
			if (m = this.$varFallback('text-shadow',par)) {
				params[i] = m;
			};
		};
		return params;
	}
	
	box_shadow(...params){
		let o = {'box-shadow': params};
		for (let i = 0, $41 = iter$__(params), $44 = $41.length; i < $44; i++) {
			let pair = $41[i];
			let tpl = false;
			for (let pi = 0, $42 = iter$__(pair), $43 = $42.length; pi < $43; pi++) {
				let par = $42[pi];
				if (pi == 0 && pair.length < 3) {
					let str = String(par);
					if (str.match(/^[\w\-]+$/)) {
						tpl = str;
						pair[pi] = new Var(("box-shadow-" + str),par);
					};
				};
				
				if (pi == 1 && tpl) {
					o[("--bxs-" + tpl + "-color")] = ("/*##*/" + par);
					
					if (par.param) {
						o[("--bxs-" + tpl + "-alpha")] = par.param.toAlpha();
					};
					
					par.set({parameterize: true});
					pair[pi] = '';
					// pair.pop!
					true;
					// need to add another property
					// if let m = $varFallback('box-shadow',par)
					// params[i] = m
				};
			};
		};
		return o;
		return params;
	}
	
	grid_template(params){
		for (let i = 0, $45 = iter$__(params), $46 = $45.length; i < $46; i++) {
			let param = $45[i];
			if (isNumber(param)) {
				param._resolvedValue = ("repeat(" + (param._value) + ",1fr)");
			};
		};
		return;
	}
	
	grid_template_columns(params){
		return this.grid_template(params);
	}
	
	grid_template_rows(params){
		return this.grid_template(params);
	}
	
	size([w,h = w]){
		return {width: w,height: h};
	}
	
	font_size([v]){
		let sizes = this.options.variants['font-size'];
		let raw = String(v);
		let size = v;
		let lh;
		let out = {};
		
		if (sizes[raw]) {
			[size,lh] = sizes[raw];
			size = Length.parse(size);
			lh = Length.parse(lh || '');
		};
		
		if (v.param && v.param) {
			lh = v.param;
		};
		
		out['font-size'] = size;
		
		if (lh) {
			let lhu = lh._unit;
			let lhn = lh._number;
			out.lh = lh;
			// supprt base unit as well?
			if (lhu == 'fs') {
				out.lh = new Length(lhn);
			} else if (lhu) {
				out.lh = lh;
			} else if (lhn == 0) {
				out.lh = 'inherit';
			} else if (lhn && size._unit == 'px') {
				let rounded = Math.round(size._number * lhn);
				if (rounded % 2 == 1) {
					rounded++;
				};
				out.lh = new Length(rounded,'px');
			};
		};
		
		return out;
	}
	
	line_height([v]){
		let uvar = v;
		// TODO what if it has u unit?
		if (v._number && !v._unit) {
			uvar = v.clone(v._number,'em');
		};
		
		return {
			'line-height': v,
			'--u_lh': uvar
		};
	}
	
	text_decoration(params){
		for (let i = 0, $47 = iter$__(params), $48 = $47.length; i < $48; i++) {
			let param = $47[i];
			let str = String(param);
			if (str == 'u') {
				param._resolvedValue = 'underline';
			} else if (str == 's') {
				param._resolvedValue = 'line-through';
			};
		};
		
		return [params];
	}
	
	// TODO allow setting border style and color w/o width?
	// TODO allow size hidden etc?
	border([...params]){
		return this.$border(params,'');
	}
	
	$border(params,side = ''){
		let o = {__border__: true};
		let len = params.length;
		
		if (len == 3) {
			o[("border" + side)] = [params];
			return o;
		};
		
		if (this.isNumeric(params[0])) {
			if (len == 2 && this.isColorish(params[1])) {
				params.splice(1,0,'solid');
				o[("border" + side)] = [params];
				return o;
			};
			
			o[("border" + side + "-style")] = 'solid';
			o[("border" + side + "-width")] = params.shift();
		};
		
		if (this.isColorish(params[0])) {
			if (len == 1) {
				o[("border" + side)] = [['1px','solid',params.shift()]];
			} else {
				// add weak border styles
				o[("border" + side + "-width")] ||= '1px';
				o[("border" + side + "-style")] = 'solid';
				o[("border" + side + "-color")] = params.shift();
			};
		};
		
		// TODO if it is not a variable?
		if (params[0]) {
			o[("border" + side + "-style")] = params[0];
		};
		
		return o;
	}
	
	border_left(params){
		return this.$border(params,'-left');
	}
	
	border_right(params){
		return this.$border(params,'-right');
	}
	
	border_top(params){
		return this.$border(params,'-top');
	}
	
	border_bottom(params){
		return this.$border(params,'-bottom');
	}
	
	border_x(params){
		return this.$border(params,'-inline');
	}
	
	border_y(params){
		return this.$border(params,'-block');
	}
	
	border_x_width([l,r = l]){
		return {bwl: l,bwr: r};
	}
	
	border_y_width([t,b = t]){
		return {bwt: t,bwb: b};
	}
	
	border_x_style([l,r = l]){
		return {bsl: l,bsr: r};
	}
	
	border_y_style([t,b = t]){
		return {bst: t,bsb: b};
	}
	
	border_x_color([l,r = l]){
		return {bcl: l,bcr: r};
	}
	
	border_y_color([t,b = t]){
		return {bct: t,bcb: b};
	}
	
	// it should rather send the same to both
	border_top_radius(pars){
		return {'border-top-left-radius': [pars],'border-top-right-radius': [pars]};
	}
	
	border_left_radius(pars){
		return {'border-top-left-radius': [pars],'border-bottom-left-radius': [pars]};
	}
	
	border_bottom_radius(pars){
		return {'border-bottom-left-radius': [pars],'border-bottom-right-radius': [pars]};
	}
	
	border_right_radius(pars){
		return {'border-top-right-radius': [pars],'border-bottom-right-radius': [pars]};
	}
	
	justify_align([justify,align = justify]){
		let o = {};
		if (justify == align) {
			o['place-items'] = o['place-content'] = justify;
		} else {
			o['justify-content'] = o['justify-items'] = justify;
			o['align-content'] = o['align-items'] = align;
		};
		return o;
	}
	
	outline(params){
		// TODO use :where() selector for 0 specificity outline defaults
		if (params.length == 3 || (params.length == 1 && String(params[0]) == 'none')) {
			return {outline: [params]};
		};
		let o = {__outline__: true};
		if (this.isNumeric(params[0])) {
			o.olw = params.shift();
		};
		if (this.isColorish(params[0])) {
			o.olc = params.shift();
		};
		
		if (!o.olw) {
			o['--ol_w'] = '1px';
		};
		return o;
	}
	
	gap([rg,cg = rg]){
		let o = {};
		if (cg != rg) {
			o = {'row-gap': rg,'column-gap': cg};
		} else {
			o = {gap: rg};
			if (rg._unit != 'rg') { o['--u_rg'] = rg };
			if (rg._unit != 'cg') { o['--u_cg'] = rg };
		};
		return o;
	}
	
	row_gap([v]){
		let o = {'row-gap': v};
		if (v._unit != 'rg') { o['--u_rg'] = v };
		return o;
	}
	
	column_gap([v]){
		let o = {'column-gap': v};
		if (v._unit != 'cg') { o['--u_cg'] = v };
		return o;
	}
	
	tint([v]){
		let o = {'--hue': v};
		for (let i = 0; i < 10; i++) {
			o[("--hue" + i)] = ("/*##*/" + v + i);
			// new Tint("v{i}")
		};
		return o;
	}
	
	hue([v]){
		let o = {'--hue': v};
		
		for (let i = 0; i < 10; i++) {
			o[("--hue" + i)] = ("/*##*/" + v + i);
			// new Tint("v{i}")
		};
		return o;
	}
	
	// def shadow ...params
	// {}
	
	colormix(name,expr){
		let o = {};
		let pre = ("--c_" + name);
		
		let val = expr[0][0];
		let [l,c,h,a] = [null,null,null,1];
		
		if (val?.lcha) {
			[l,c,h,a] = val.lcha();
		} else if (isa$(val?._resolvedValue,Color)) {
			[l,c,h,a] = val._resolvedValue.lcha();
			if (val.param && val.param.toAlpha) {
				a = val.param.toAlpha();
			};
		};
		
		if (typeof l == 'number') {
			l = Math.round(l * 10) / 10;
		};
		if (typeof c == 'number') {
			c = Math.round(c * 10) / 10;
		};
		if (typeof h == 'number') {
			h = Math.round(h * 10) / 10;
		};
		
		
		if (l != null) {
			o[(`--u_` + name + `L`)] = l;
			o[(`--u_` + name + `C`)] = c;
			o[(`--u_` + name + `H`)] = (h?._resolvedValue ?? h);// no?
			// o[`--u_{name}N`] = l > 50 ? 0 : 100
			o[(`--u_` + name + `A`)] = (a ?? 1);
			// o[pre] = color.toLchString()
		};
		
		return o;
	}
	
	$color(name){
		let parsed;
		let m = name.match(/^([A-Za-z\-]+)(\d)(\d*)$/);
		let ns = m && m[1];
		
		// aliased colors
		if (ns && typeof this.palette[ns] == 'string') {
			return this.$color(this.palette[ns] + name.slice(ns.length));
		};
		
		if (ns == 'hue') {
			return new Tint(name);
		};
		
		if (this.palette[name]) {
			return this.palette[name];
		};
		
		if (m) {
			let nr = parseInt(m[2]);
			let fraction = m[3] ? parseFloat(("0." + (m[3]))) : 0;
			let from = null;
			let to = null;
			
			// what if it is fractional?
			
			// if nr > 9
			// fraction = (nr % 100) / 10
			// nr = Math.floor(nr / 100)
			
			let n0 = nr + 1;
			let n1 = nr;
			
			if (typeof this.palette[ns] == 'string') {
				// proxy to a different color
				return this.$color(this.palette[ns] + name.slice(ns.length));
			};
			
			while (n0 > 1 && !from){
				from = this.palette[ns + (--n0)];
			};
			
			while (n1 < 9 && !to){
				to = this.palette[ns + (++n1)];
			};
			
			// only when we could not find colors?
			let weight = ((nr - n0) + (fraction)) / (n1 - n0);
			let hw = weight;
			let sw = weight;
			let lw = weight;
			
			if (!to) {
				to = this.palette.black;
				hw = 0;
				sw = lw = fraction;
			};
			
			if (!from) {
				from = this.palette.blue1;
				hw = 1;
				sw = lw = 1 - fraction;
			};
			
			if (from && to) {
				return this.palette[name] = from.mix(to,hw,sw,lw);
			};
		};
		
		if (parsed = parseColorString(name)) {
			return new Color('',...parsed);
		};
		return null;
	}
	
	isNumeric(val){
		if (isNumber(val)) { return true };
		if (typeof val == 'number') { return true };
		if (String(val).match(/^[\-\+]?\d?(\.?\d+)(\w+|%)?$/)) { return true };
		return false;
	}
	
	isColorish(val){
		if (this.$parseColor(val)) { return true };
		return false;
	}
	
	// too many methods doing the same thing
	$parseColor(identifier){
		let color;
		let key = String(identifier);
		if (color = this.$color(key)) {
			return color;
		};
		
		if (key.match(/^#[a-fA-F0-9]{3,8}/)) {
			return identifier;
		} else if (key.match(/^(rgb|hsl)/)) {
			return identifier;
		} else if (key == 'currentColor') {
			return identifier;
		};
		
		return null;
	}
	
	$varFallback(name,params,exclude = []){
		if (params.length == 1) {
			let str = String(params[0]);
			let fallback = params[0];
			exclude.push('none','initial','unset','inherit');
			if (exclude.indexOf(str) == -1 && str.match(/^[\w\-]+$/)) {
				if (name == 'font' && fonts[str]) {
					fallback = fonts[str];
				};
				if (name == 'ease' && this.options.variants.easings[str]) {
					fallback = this.options.variants.easings[str];
				};
				// elif name == 'box-shadow' and
				return [new Var(("" + name + "-" + str),fallback)];
			};
		};
		return;
	}
	
	$value(value,index,config){
		let color;
		let key = config;
		let orig = value;
		let raw = (value && value.toRaw) ? value.toRaw() : String(value);
		let str = String(value);
		let fallback = false;
		let result = null;
		let unit = orig._unit;
		if (typeof config == 'string') {
			if (aliases[config]) {
				config = aliases[config];
				
				if (isa$(config,Array)) {
					config = config[0];
				};
			};
			
			if (config.match(/^((min-|max-)?(width|height)|top|left|bottom|right|padding|margin|sizing|inset|spacing|sy$|s$|\-\-s[xy])/)) {
				config = 'sizing';
			} else if (config.match(/^\-\-[gs][xy]_/)) {
				config = 'sizing';
			} else if (config.match(/^(row-|column-)?gap/)) {
				config = 'sizing';
			} else if (config.match(/^[mps][trblxy]?$/)) {
				config = 'sizing';
			} else if (config.match(/^[trblwh]$/)) {
				config = 'sizing';
			} else if (config.match(/^e[otbca]?f$/) || config.match(/^ease(-\w+)?-function$/)) {
				config = 'easings';
				fallback = 'ease';
			} else if (config.match(/^border-.*radius/) || config.match(/^rd[tlbr]{0,2}$/)) {
				config = 'radius';
				fallback = 'border-radius';
			} else if (config.match(/^tween|transition/) && this.options.variants.easings[raw]) {
				return this.options.variants.easings[raw];
			};
			
			config = this.options.variants[config] || {};
		};
		
		if (value == undefined) {
			value = config.default;
		};
		
		if (config.hasOwnProperty(raw)) {
			// should we convert it or rather just link it up?
			value = config[value];
		};
		
		if (typeof raw == 'number' && config.NUMBER) {
			let [step,num,unit] = config.NUMBER.match(/^(\-?[\d\.]+)(\w+|%)?$/);
			return value * parseFloat(num) + unit;
		} else if (typeof raw == 'string') {
			if (color = this.$parseColor(raw)) {
				return color;
			};
		};
		
		if (fallback && !unit) {
			let okstr = str.match(/^[a-zA-Z\-][\w\-]*$/) && !(str.match(/^(none|inherit|unset|initial)$/));
			let oknum = unit && VALID_CSS_UNITS.indexOf(unit) == -1;
			if ((okstr || oknum) && value.alone) {
				return new Var(("" + fallback + "-" + str),(orig != value) ? value : raw);
			};
		};
		
		return value;
	}
	
	transformColors(text){
		var self = this;
		text = text.replace(/\/\*(#+)\*\/(\#?\w+)(?:\/(\d+%?|\$[\w\-]+))?/g,function(m,typ,c,a) {
			let color;
			if (color = self.$color(c)) {
				if (typ == '#') {
					return color.toString(a,typ);
				} else if (typ == '##') {
					return color.toVar(a);
				};
			};
			return m;
		});
		return text;
	}
	static { register$(this,c$6,'StyleTheme',16) }
};

// should not happen at root - but create a theme instance

export const StyleExtenders = {
	transform: {
		specificity: 0,
		body: '--t_x:0;--t_y:0;--t_rotate:0;\n--t_scale:1;--t_scale-x:1;--t_scale-y:1;\ntransform: translate(var(--t_x),var(--t_y)) rotate(var(--t_rotate))\n	scaleX(var(--t_scale-x)) scaleY(var(--t_scale-y)) scale(var(--t_scale));'
	},
	
	transform_complex: {
		specificity: 0,
		body: '--t_z:0;--t_skew-x:0;--t_skew-y:0;\ntransform: translate3d(var(--t_x),var(--t_y),var(--t_z))\n					rotate(var(--t_rotate))\n					skewX(var(--t_skew-x)) skewY(var(--t_skew-y))\n					scaleX(var(--t_scale-x)) scaleY(var(--t_scale-y)) scale(var(--t_scale)) !important;'
	},
	
	outline: {body: '--ol_s:solid;--ol_w:1px;--ol_o:0px; --ol_c:transparent;\noutline:var(--ol_w) var(--ol_s) var(--ol_c); outline-offset:var(--ol_o);\noutline:1px solid transparent; outline-offset:var(--ol_o);'},
	
	ease: {body: '--e_ad:0ms;--e_af:cubic-bezier(0.23, 1, 0.32, 1);--e_aw:0ms;\n--e_sd:var(--e_ad);--e_sf:var(--e_af);--e_sw:var(--e_aw);\n--e_od:var(--e_sd);--e_of:var(--e_sf);--e_ow:var(--e_sw);\n--e_cd:var(--e_sd);--e_cf:var(--e_sf);--e_cw:var(--e_sw);\n--e_bd:var(--e_sd);--e_bf:var(--e_sf);--e_bw:var(--e_sw);\n--e_td:var(--e_bd);--e_tf:var(--e_bf);--e_tw:var(--e_bw);\n--e_b:var(--e_bd) var(--e_bf) var(--e_bw);\n--e_c:var(--e_cd) var(--e_cf) var(--e_cw);\n--e_rest:any;\ntransition:\n	all var(--e_ad) var(--e_af) var(--e_aw),\n	opacity var(--e_od) var(--e_of) var(--e_ow),\n	transform var(--e_td) var(--e_tf) var(--e_tw),\n	color var(--e_c),background-color var(--e_c),border-color var(--e_c),fill var(--e_c),stroke var(--e_c), outline-color var(--e_c), box-shadow var(--e_c), filter var(--e_c),\n	inset var(--e_b), width var(--e_b),height var(--e_b),max-width var(--e_b),max-height var(--e_b),min-width var(--e_b),min-height var(--e_b),border-width var(--e_b),outline-width var(--e_b),stroke-width var(--e_b),margin var(--e_b),padding var(--e_b),\n	var(--e_rest);'}
};

export const AutoPrefixes = {
	'user-select': ['-webkit-user-select'],
	appearance: ['-webkit-appearance'],
	'backdrop-filter': ['-webkit-backdrop-filter'],
	'mask-image': ['-webkit-mask-image']
};

let c$7 = Symbol();
export class StyleSheet {
	constructor(stack){
		this[$stack$] = stack;
		this[$parts$] = [];
		this[$apply$] = {transform_complex: [],transform: []};
		this[$register$] = {};
		this.transforms = null;
	}
	
	get transitions(){
		return this[$register$].transition;
	}
	
	add(part,meta = {}){
		this[$parts$].push(part);
		
		if (meta.apply) {
			for (let $51 = meta.apply, $49 = 0, $50 = Object.keys($51), $55 = $50.length, k, v; $49 < $55; $49++){
				k = $50[$49];v = $51[k];let arr = this[$apply$][k] ||= [];
				for (let $52 = 0, $53 = iter$__(v), $54 = $53.length; $52 < $54; $52++) {
					let item = $53[$52];
					if (arr.indexOf(item) < 0) { arr.push(item) };
				};
			};
		};
		return;
	}
	
	js(root,stack){
		let js = [];
		
		for (let $58 = this[$register$], $56 = 0, $57 = Object.keys($58), $59 = $57.length, k, v; $56 < $59; $56++){
			k = $57[$56];v = $58[k];js.push(root.runtime().transitions + (".addSelectors(" + JSON.stringify(v) + ",'" + k + "')"));
		};
		return js.join('\n');
	}
	
	parse(){
		if (this[$string$] !== undefined) { return this[$string$] };
		if (this[$parts$].length == 0 && this[$apply$].transform_complex.length == 0 && this[$apply$].transform.length == 0) {
			return this[$string$] = "";
		};
		
		let js = [];
		let parts = this[$parts$].slice(0);
		
		let prepend = function(val) {
			if (parts.indexOf(val) < 0) {
				return parts.unshift(val);
			};
		};
		
		for (let $62 = this[$apply$], $60 = 0, $61 = Object.keys($62), $74 = $61.length, k, v; $60 < $74; $60++){
			k = $61[$60];v = $62[k];if (!v || v.length == 0) { continue; };
			
			let helper = StyleExtenders[k];
			
			let base = {};
			let all = {};
			let groups = {"": base};
			let easing = k == 'transition' || k.match(/^_(off|out|in)_sized/);
			
			for (let $63 = 0, $64 = iter$__(v), $68 = $64.length; $63 < $68; $63++) {
				let item = $64[$63];
				for (let $65 = 0, $66 = iter$__((item[$rules$] || [])), $67 = $66.length; $65 < $67; $65++) {
					let rule = $66[$65];
					let ns = rule[$media$] || '';
					let sel = rule[$string$].replace(/:not\((#_|\._0?)+\)/g,'');
					
					if (easing || k == 'ease') {
						sel = sel.replace(/\.\\@(off|out|in|on)\b/g,'');
					};
					sel = sel.replace(/((\:+)[\w\-]+)(?!\()/g,function(m,k) { return (k.length > 1) ? m : ''; });
					sel = sel.replace(/^\:root /g,'');
					
					// simplify the selectors as much as possible
					
					let group = groups[ns] ||= {};
					group[sel] = rule;
					all[sel] = true;
				};
			};
			
			if (helper) {
				for (let $69 = 0, $70 = Object.keys(groups), $73 = $70.length, ns, group; $69 < $73; $69++){
					ns = $70[$69];group = groups[ns];let sel = Object.keys(group);
					if (ns != '') {
						sel = sel.filter(function(_0) { return !(base[_0]); });
					};
					
					if (sel.length == 0) { continue; };
					// sel.unshift('._ease_') if k == 'transition' or k == 'ease'
					
					let sels = sel.sort(function(a,b) { return a.length - b.length; });
					let corr = [];
					
					for (let i = 0, $71 = iter$__(sels), $72 = $71.length; i < $72; i++) {
						let s = $71[i];
						let pre = sels.slice(0,i);
						let some = pre.find(function(_0) {
							return s.indexOf(_0) >= 0;
						});
						if (!some || s.match(/[\s\>\,]|:(not|before|after|marker)|::/)) {
							corr.push(s);
						};
					};
					sel = corr;
					let selstr = sel.join(', ');
					
					// if helper.specificity === 0
					// selstr = `:where({selstr})`
					
					let str = selstr + ' {\n' + helper.body + '\n}';
					
					if (ns) {
						str = ns + ' {\n' + str + '\n}';
					};
					
					parts.unshift(str);
				};
			};
			
			let selectors = Object.keys(all);
			if (k == 'transition' && selectors.length) {
				prepend('.\\@enter:not(#_),.\\@leave:not(#_) {--e_ad:300ms;}');
				prepend('._instant_:not(#_):not(#_):not(#_):not(#_) { transition-duration:0ms !important; }');// 
			};
			if (easing) {
				this[$register$][k] = selectors;
			};
		};
		
		this[$string$] = parts.join('\n\n');
		
		if (this[$stack$].resolveColors()) {
			this[$string$] = this[$stack$].theme().transformColors(this[$string$],{prefix: false});
		};
		
		return this[$string$];
	}
	
	toString(){
		try {
			return this.parse();
		} catch (e) {
			console.warn("failed to parse stylesheet",this[$parts$],e);
			return "";
		};
	}
	static { register$(this,c$7,'StyleSheet',16) }
};

let c$8 = Symbol();
export class StyleRule {
	constructor(parent,selector,content,options = {}){
		this.parent = parent;
		this.selector = selector;
		this.content = content;
		this.options = options;
		this.isKeyFrames = !(!(selector.match(/\@keyframes \w/)));
		this.isKeyFrame = parent && parent.isKeyFrames;
		this.meta = {};
	}
	
	root(){
		return this.parent ? this.parent.root : this;
	}
	
	apply(kind,sel){
		let arr = this.options.apply[kind] ||= [];
		return arr.push(sel);
	}
	
	register(kind,sel){
		let arr = this.options.register[kind] ||= [];
		return arr.push(sel);
	}
	
	toString(o = {}){
		if (!(this.parent) && this.selector) {
			// parse the nested groups here
			let selast;
			let layers;
			
			try {
				selast = selparser.parse(this.selector,this.options);
				layers = selparser.layerize(selast,this.options);
				
				if (layers[1] && layers[1][0]) {
					[this.ownsel,...this.ownrules] = layers[1];
				};
			} catch (e) {
				console.log('error',e,selast,this.selector);
			};
		};
		
		let parts = [];
		let subrules = [];
		let subrule;
		
		let out = "";
		
		let suffix = [];
		let indent = o.indent || '';
		
		if (this.isKeyFrames) {
			let [context,name] = this.selector.split(/\s*\@keyframes\s*/);
			
			context = context.trim();
			name = name.trim();
			
			let path = [name,context,this.options.ns].filter(function(_0) { return _0; }).join('-');
			// what if it is global?
			this.meta.name = name;
			this.meta.uniqueName = path.replace(/[\s\.\,]+/g,'').replace(/[^\w\-]/g,'_');
			
			if (this.options.global && !context) {
				this.meta.uniqueName = this.meta.name;
			};
			
			let subprops = {};
			subprops[("--animation-" + name)] = ("" + (this.meta.uniqueName));
			
			if (context) {
				subrules.push(new StyleRule(null,context,subprops,this.options));
			} else if (this.options.ns && !(this.options.global)) {
				subrules.push(new StyleRule(null,("." + (this.options.ns)),subprops,{}));
			};
		};
		
		let selpri = (typeof this.selector == 'string' && this.selector.indexOf('@important') >= 0) ? 1 : 0;
		
		for (let $77 = this.content, $75 = 0, $76 = Object.keys($77), $81 = $76.length, key, value; $75 < $81; $75++){
			key = $76[$75];value = $77[key];if (value == undefined) { continue; };
			
			let subsel = null;
			let important = selpri ? ' !important' : '';
			let rawkey = key;
			
			// let [m,imp,name,mods] = (key.match(/^(\?*\!*)?([\w\-]+)(\§.+)?/) or [])
			
			// if imp
			// important = imp[0] == '!' ? ' !important' : ''
			// key = key.slice(imp.length)
			
			if (key.indexOf('&') >= 0) {
				if (this.isKeyFrames) {
					let keyframe = key.replace(/&/g,'');
					let rule = new StyleRule(this,keyframe,value,this.options);
					parts.push(rule.toString({indent: indent + '\t'}));
					continue;
				};
				
				// Rename to @mount?
				if (key.match(/@start\b/)) {
					let [pre,post] = key.split(/\s*\@start\s*/);
					
					let rule = new StyleRule(null,'@starting-style',value,{});
					parts.push(rule.toString({indent: indent + '\t'}));
					continue;
				};
				
				let subsel = selparser.unwrap(this.selector,key);
				if (this.ownsel) {
					// subsel = selparser.unwrap('&',key)
										// only replace the first one?
					subsel = key.replace(/&/g,':scope');
				};
				
				subrules.push(new StyleRule(this,subsel,value,this.options));
				continue;
			} else if (key.indexOf('§') >= 0) {
				// let keys = key.replace(/[\.\~\@\+]/g,'\\$&').split('§')
				let keys = rawkey.split('§');
				// keys.slice(1).join(' ')
				// using :is it should be much, much easier with the nested selectors?
				// can even just take the whole outer selector as a simple :is on this element
				let substr = keys.slice(1).join('');
				// do we unwrap, or can we just use :where etc and trust it?
				let subsel = selparser.unwrap(this.selector,substr);
				let obj = {};
				
				
				obj[keys[0]] = value;
				if (subrule = subrules[subsel]) {
					subrule.content[keys[0]] = value;
				} else {
					subrule = new StyleRule(this,subsel,obj,this.options);
					subrules.push(subrules[subsel] = subrule);
				};
				continue;
			} else if (key.match(/^__(\w+)__$/)) {
				this.meta[key.slice(2,-2)] = true;
			} else if (key[0] == '[') {
				// better to just check if key contains '.'
								// this is only for a single property
				let o = JSON.parse(key);
				subrules.push(new StyleRule(this,this.selector,value,this.options));
				continue;
			} else if (key.match(/^(x|y|z|scale|scale-x|scale-y|skew-x|skew-y|rotate)$/)) {
				if (!(this.meta.transform)) {
					this.meta.transform = true;
				};
				if (key.match(/^(z|skew-x|skew-y)$/)) {
					this.meta.transform_complex = true;
				};
				
				parts.push(("--t_" + key + ": " + value + " !important;"));
			} else if (key.match(/^(ease-.*)$/)) {
				this.meta.ease = true;
				let ref = key.replace('delay','wait').split('-').map(function(_0) { return _0[0]; }).join('');
				parts.push(("--e_" + ref.slice(1) + ": " + value + " !important;"));
				
				if (!abbreviations[key]) {
					console.warn(("" + key + " is not a valid style property"));
				};
			} else if (key.match(/^(--e_\w+)$/)) {
				this.meta.ease = true;
				if (this.selector.match(/@in\b/)) {
					true;
					// TODO warn about easings not making sense inside here
				};
				parts.push(("" + key + ": " + value + " !important;"));
			} else if (key.match(/^__ease__$/)) {
				true;
			} else if (key.match(/^raw-/)) {
				parts.push(("" + key.slice(4) + ": " + value + important + ";"));
				true;
			} else if (key.match(/^__outline__$/)) {
				this.meta.outline = true;
			} else {
				if (key.match(/^(width|height)$/)) {
					// what about min/max sizes?
					this.meta.size = true;
				};
				
				parts.push(("" + key + ": " + value + important + ";"));
				
				if (AutoPrefixes[key]) {
					for (let $78 = 0, $79 = iter$__(AutoPrefixes[key]), $80 = $79.length; $78 < $80; $78++) {
						let prefixed = $79[$78];
						parts.push(("" + prefixed + ": " + value + important + ";"));
					};
				};
			};
		};
		
		
		let content = parts.map(function(_0) { return indent + '\t' + _0; }).join('\n');
		// let content = parts.join('\n')
		if (o.indent || this.isKeyFrames) {
			content = '\n' + content + '\n';
		};
		
		if (this.isKeyFrame) {
			out = ("" + this.selector + " \{" + content + "\}");
		} else if (this.isKeyFrames) {
			out = ("@keyframes " + (this.meta.uniqueName) + " \{" + content + "\}");
		} else {
			let sel = this.isKeyFrame ? this.selector : selparser.parse(this.selector,this.options);
			if (this.meta.transform) {
				this.apply('transform',sel);
			};
			
			if (this.meta.transform_complex) {
				this.apply('transform_complex',sel);
			};
			
			if (this.meta.ease) {
				this.apply('ease',sel);
			};
			
			if (this.meta.outline) {
				this.apply('outline',sel);
			};
			
			if (sel && sel.hasTransitionStyles) {
				this.apply('transition',sel);
				if (!(this.meta.ease)) { this.apply('ease',sel) };
			};
			
			if (this.meta.size) {
				for (let $82 = 0, $83 = ['_off_','_out_','_in_'], $84 = $83.length; $82 < $84; $82++) {
					let typ = $83[$82];
					if (sel[typ]) {
						this.apply(("" + typ + "sized"),sel);
					};
				};
			};
			
			// should definitely be able to merge these back together
			// content += indent
			out = (content.match(/[^\n\s]/)) ? selparser.render(sel,content,this.options,o) : "";
			out = indent + out;
		};
		
		o.indent = indent;
		
		if (!(this.parent) && this.ownsel) {
			out = '';
			let ind = indent;// + '\t'
			
			for (let $85 = 0, $86 = iter$__(this.ownsel), $87 = $86.length; $85 < $87; $85++) {
				let layer = $86[$85];
				out += ind + layer + '{\n';
				suffix.push('\n' + ind + '}');
				ind += '\t';
			};
			
			for (let $88 = 0, $89 = iter$__(this.ownrules), $90 = $89.length; $88 < $90; $88++) {
				let ownrule = $89[$88];
				out += ind + ownrule + ' {\n';
				suffix.push('\n' + ind + '}');
				ind += '\t';
				// suffix += '}'
			};
			
			if (content) {
				out += parts.map(function(_0) { return ind + _0; }).join('\n');
			};
			
			if (negIndex$__(this.ownrules,-1) == ':scope') {
				ind = ind.slice(0,-1);
				out += negIndex$__(suffix,-1);
				suffix.pop();
			};
			
			o.indent = in