{"version":3,"sources":["css-template-strings.ts"],"sourcesContent":["import { Datex } from \"datex-core-legacy\";\nimport type { primitive } from \"datex-core-legacy/datex_all.ts\";\nimport { domContext, domUtils } from \"../app/dom-context.ts\";\nimport { logger } from \"./global-values.ts\";\nimport { always } from \"datex-core-legacy\";\n\n\nconst LOCAL_VAR_PREFIX = '--uix-local-value-'\nconst GLOBAL_VAR_PREFIX = '--uix-global-value-'\n\ntype cssGeneratorFunction = (it:HTMLElement)=>string|number;\ntype cssParam = Datex.RefOrValue<primitive> | cssGeneratorFunction;\n\nexport interface DynamicCSSStyleSheet extends CSSStyleSheet {\n\tactivate(document: Document|ShadowRoot): void\n}\n\n/**\n * Define reactive css style sheets with JS template strings\n * @param template css template string\n * @returns \n */\nexport function css(template:TemplateStringsArray|string, ...params:cssParam[]): DynamicCSSStyleSheet {\n\tconst isTemplate = (template as TemplateStringsArray)?.raw instanceof Array && template instanceof Array;\n\t// non template value - convert to HTML node\n\tif (!isTemplate) {\n\t\tconst styleSheet = new domContext.CSSStyleSheet() as DynamicCSSStyleSheet;\n\t\tstyleSheet.replaceSync(template as string)\n\t\tstyleSheet.activate = () => {} // no activation needed for static style sheet\n\t\treturn styleSheet;\n\t}\n\t// template\n\telse {\n\n\t\tconst globalCSSVars = new Map<string, [any, string?]>();\n\t\tconst localCSSVars = new Map<string, [cssGeneratorFunction, string?]>();\n\t\tconst cssVarsBySelector = new Map<string, Set<string>>();\n\n\t\tconst templateRaw = [...(template as unknown as TemplateStringsArray).raw];\n\n\t\t// combine css\n\t\tlet css = \"\";\n\t\tlet c = 0;\n\t\tconst time = performance.now().toString().replace(\".\",\"\");\n\t\tfor (const raw of templateRaw) {\n\t\t\tcss += raw;\n\t\t\tif (c<templateRaw.length-1) {\n\n\t\t\t\t// is dynamic value\n\t\t\t\tif (params[c] instanceof Datex.ReactiveValue) {\n\t\t\t\t\t// is (arrow) function - if no parameters passed (()=>...), it can be used as a global var, because there is no difference between elements\n\t\t\t\t\tif (typeof params[c] == \"function\" && !(params[c].toString().startsWith('()'))) {\n\t\t\t\t\t\tconst name = `${LOCAL_VAR_PREFIX}${time}-${c}`;\n\t\t\t\t\t\tconst unit = templateRaw[c+1].match(/(.*)[;(){}, ]/)?.[1];\n\t\t\t\t\t\t// remove unit from template\n\t\t\t\t\t\tif (unit) {\n\t\t\t\t\t\t\ttemplateRaw[c+1] = templateRaw[c+1].replace(unit, \"\");\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlocalCSSVars.set(name, [params[c], unit]);\n\t\t\t\t\t\tcss += `var(${name})`;\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tconst name = `${GLOBAL_VAR_PREFIX}${time}-${c}`;\n\t\t\t\t\t\tconst unit = templateRaw[c+1].match(/(.*)[;(){}, ]/)?.[1];\n\t\t\t\t\t\t// remove unit from template\n\t\t\t\t\t\tif (unit) {\n\t\t\t\t\t\t\ttemplateRaw[c+1] = templateRaw[c+1].replace(unit, \"\");\n\t\t\t\t\t\t}\n\t\t\t\t\t\tglobalCSSVars.set(name, [params[c], unit])\n\t\t\t\t\t\tcss += `var(${name})`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// is static value\n\t\t\t\telse {\n\t\t\t\t\tcss += domUtils.escapeCSSValue(params[c]);\n\t\t\t\t}\t\t\n\t\t\t}\n\t\t\tc++;\n\t\t}\n\t\t// console.log(\"css\",css)\n\n\t\tconst styleSheet = new domContext.CSSStyleSheet() as DynamicCSSStyleSheet;\n\t\tstyleSheet.replaceSync(css)\n\t\n\t\t// find injected values\n\t\tfor (const styleRule of styleSheet.cssRules as unknown as ReadonlyArray<CSSStyleRule>) {\n\t\t\tcssVarsBySelector.set(styleRule.selectorText, getLocalVars(styleRule.style))\n\t\t}\n\n\t\tconst activatedFor = new Set<Document|ShadowRoot>();\n\n\t\tstyleSheet.activate = (document: Document|ShadowRoot) => {\n\t\t\tif (activatedFor.has(document)) return;\n\t\t\tactivatedFor.add(document);\n\t\t\tlogger.debug(\"activating stylesheet\")\n\t\t\t\n\t\t\t// enable stylesheet for document\n\t\t\tdocument.adoptedStyleSheets = [...(document.adoptedStyleSheets??[]), styleSheet];\n\n\t\t\t// set all global css vars for document\n\t\t\tfor (const [prop, [val, unit]] of globalCSSVars) {\n\t\t\t\tconst evaluatedVal = typeof val == \"function\" ? always(val) : val;\n\t\t\t\tdomUtils.setCSSProperty((document as Document).documentElement ?? document, prop, evaluatedVal, undefined, unit);\n\t\t\t}\n\t\t\t\n\t\t\t// set required local css vars for existing elements in document\n\t\t\tfor (const [element, varName] of elementsDynamicProperties(iterateDOMTree(document), cssVarsBySelector)) {\n\t\t\t\tconst [generator, unit] = localCSSVars.get(varName)!;\n\t\t\t\tdomUtils.setCSSProperty(element, varName, always(()=>generator(element)), undefined, unit);\n\t\t\t}\n\n\t\t\t// observe when new child elements added\n\t\t\tconst observer = new domContext.MutationObserver(mutations => {\n\t\t\t\tfor (const [element, varName] of elementsDynamicProperties(iterateAddedNodes(mutations), cssVarsBySelector)) {\n\t\t\t\t\tconst [generator, unit] = localCSSVars.get(varName)!;\n\t\t\t\t\tdomUtils.setCSSProperty(element, varName, always(()=>generator(element)), unit);\n\t\t\t\t}\n\t\t\t\t// TODO: on remove\n\t\t\t});\n\t\t\tobserver.observe(document, {childList: true, subtree: true})\n\t\t\t// TODO: unobserve function\n\t\t}\n\n\n\t\treturn styleSheet\n\t}\n\t\n}\n\nexport const SCSS = css;\n\n\nfunction* elementsDynamicProperties(elements: Iterable<Element>, cssVarsBySelector: Map<string, Set<string>>) {\n\t// find all nodes that where added in mutation\n\tfor (const element of elements) {\n\t\t// iterate over all possible selectors\n\t\tfor (const selector of cssVarsBySelector.keys()) {\n\t\t\t// matching selector for a given element -> return element, prop, value\n\t\t\tif (element.matches(selector)) {\n\t\t\t\tconst varNames = cssVarsBySelector.get(selector)!;\n\t\t\t\tfor (const name of varNames) {\n\t\t\t\t\tyield [element, name] as const\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction* iterateAddedNodes(mutations: MutationRecord[]) {\n\tfor (const mut of mutations) {\n\t\tfor (const parentNode of mut.addedNodes as unknown as ReadonlyArray<Node>) {\n\t\t\tfor (const node of iterateDOMTree(parentNode)) {\n\t\t\t\tyield node;\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction* iterateDOMTree(node: Node): Generator<Element> {\n\tif (!(node instanceof domContext.Element || node instanceof domContext.DocumentFragment || node instanceof domContext.Document)) return;\n\tif (node instanceof domContext.Element) yield node;\n\tif (node.childNodes) {\n\t\tfor (const childNode of node.childNodes as unknown as ReadonlyArray<ChildNode>) {\n\t\t\tfor (const child of iterateDOMTree(childNode)) {\n\t\t\t\tyield child;\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction getLocalVars(styleDeclaration: CSSStyleDeclaration) {\n\tconst varNames = new Set<string>()\n\tconst inferredProperties = new Set<string>();\n\n\tfor (let i=0; i<styleDeclaration.length; i++) {\n\t\tconst property = styleDeclaration.item(i);\n\n\t\tif (property.startsWith(\"background-\")) inferredProperties.add(\"background\")\n\t\tif (property.startsWith(\"border-\")) inferredProperties.add(\"border\")\n\t\tif (property.startsWith(\"border-radius-\")) inferredProperties.add(\"border-radius\")\n\n\t\tconst varName = extractVar(property, styleDeclaration);\n\t\tif (varName) varNames.add(varName);\n\t}\n\n\tfor (const property of inferredProperties) {\n\t\tconst varName = extractVar(property, styleDeclaration);\n\t\tif (varName) varNames.add(varName);\n\t}\n\n\treturn varNames\n}\n\nfunction extractVar(property: string, styleDeclaration: CSSStyleDeclaration) {\n\tconst value = styleDeclaration.getPropertyValue(property)\n\tif (value.includes('var('+LOCAL_VAR_PREFIX)) {\n\t\tconst name = value.match(/var\\((--uix-local-value-(?:[\\d-]+))\\)/)![1];\n\t\treturn name;\n\t}\n}"],"names":["Datex","domContext","domUtils","logger","always","LOCAL_VAR_PREFIX","css","template","params","raw","Array","globalCSSVars","Map","localCSSVars","cssVarsBySelector","templateRaw","c","time","performance","now","toString","replace","length","ReactiveValue","startsWith","name","unit","match","set","escapeCSSValue","styleSheet","CSSStyleSheet","styleRule","replaceSync","cssRules","selectorText","getLocalVars","style","activatedFor","Set","activate","document","has","prop","val","add","debug","adoptedStyleSheets","evaluatedVal","setCSSProperty","documentElement","undefined","element","varName","elementsDynamicProperties","iterateDOMTree","generator","get","MutationObserver","mutations","iterateAddedNodes","observe","childList","subtree","SCSS","elements","selector","keys","matches","mut","parentNode","addedNodes","node","Element","DocumentFragment","Document","childNodes","childNode","child","styleDeclaration","varNames","inferredProperties","i","property","item","extractVar","value","getPropertyValue","includes"],"mappings":"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","sourceRoot":"/lib/uix-0.4.39/src/utils/","file":"css-template-strings.ts"}