aberdeen 1.7.0 → 1.7.2

package/skill/route.md

@@ -1,4 +1,4 @@
-[**Aberdeen v1.7.0**](README.md)
+[**Aberdeen v1.7.2**](README.md)
 
 ***
 
@@ -10,7 +10,7 @@
 
 ### Route
 
-Defined in: [route.ts:8](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L8)
+Defined in: [route.ts:8](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L8)
 
 The class for the global `route` object.
 
@@ -20,7 +20,7 @@ The class for the global `route` object.
 
 > **depth**: `number`
 
-Defined in: [route.ts:20](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L20)
+Defined in: [route.ts:20](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L20)
 
 The navigation depth of the current session. Starts at 1. Writing to this property has no effect.
 
@@ -28,7 +28,7 @@ The navigation depth of the current session. Starts at 1. Writing to this proper
 
 > **hash**: `string`
 
-Defined in: [route.ts:14](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L14)
+Defined in: [route.ts:14](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L14)
 
 The hash fragment including the leading `#`, or an empty string. For instance `"#my_section"` or `""`.
 
@@ -36,7 +36,7 @@ The hash fragment including the leading `#`, or an empty string. For instance `"
 
 > **nav**: `NavType`
 
-Defined in: [route.ts:28](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L28)
+Defined in: [route.ts:28](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L28)
 
 The navigation action that got us to this page. Writing to this property has no effect.
 - `"load"`: An initial page load.
@@ -49,7 +49,7 @@ Mostly useful for page transition animations. Writing to this property has no ef
 
 > **p**: `string`[]
 
-Defined in: [route.ts:12](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L12)
+Defined in: [route.ts:12](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L12)
 
 An convenience array containing path segments, mapping to `path`. For instance `[]` (for `"/"`) or `['users', '123', 'feed']` (for `"/users/123/feed"`).
 
@@ -57,7 +57,7 @@ An convenience array containing path segments, mapping to `path`. For instance `
 
 > **path**: `string`
 
-Defined in: [route.ts:10](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L10)
+Defined in: [route.ts:10](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L10)
 
 The current path of the URL as a string. For instance `"/"` or `"/users/123/feed"`. Paths are normalized to always start with a `/` and never end with a `/` (unless it's the root path).
 
@@ -65,7 +65,7 @@ The current path of the URL as a string. For instance `"/"` or `"/users/123/feed
 
 > **search**: `Record`\<`string`, `string`\>
 
-Defined in: [route.ts:16](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L16)
+Defined in: [route.ts:16](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L16)
 
 The query string interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y"}`.
 
@@ -73,7 +73,7 @@ The query string interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "
 
 > **state**: `Record`\<`string`, `any`\>
 
-Defined in: [route.ts:18](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L18)
+Defined in: [route.ts:18](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L18)
 
 An object to be used for any additional data you want to associate with the current page. Data should be JSON-compatible.
 
@@ -83,7 +83,7 @@ An object to be used for any additional data you want to associate with the curr
 
 > `const` **current**: [`Route`](#route)
 
-Defined in: [route.ts:332](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L332)
+Defined in: [route.ts:332](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L332)
 
 The global [Route](#route) object reflecting the current URL and browser history state. Changes you make to this affect the current browser history item (modifying the URL if needed).
 
@@ -93,7 +93,7 @@ The global [Route](#route) object reflecting the current URL and browser history
 
 > **back**(`target`): `void`
 
-Defined in: [route.ts:190](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L190)
+Defined in: [route.ts:190](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L190)
 
 Try to go back in history to the first entry that matches the given target. If none is found, the given state will replace the current page. This is useful for "cancel" or "close" actions that should return to the previous page if possible, but create a new page if not (for instance when arriving at the current page through a direct link).
 
@@ -117,7 +117,7 @@ The target route to go back to. May be a subset of [Route](#route), or a string
 
 > **go**(`target`, `nav`): `void`
 
-Defined in: [route.ts:156](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L156)
+Defined in: [route.ts:156](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L156)
 
 Navigate to a new URL by pushing a new history entry.
 
@@ -158,7 +158,7 @@ route.go({p: ["users", 123], search: {tab: "feed"}, hash: "top"});
 
 > **interceptLinks**(): `void`
 
-Defined in: [route.ts:277](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L277)
+Defined in: [route.ts:277](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L277)
 
 Intercept clicks and Enter key presses on links (`<a>` tags) and use Aberdeen routing
 instead of browser navigation for local paths (paths without a protocol or host).
@@ -186,7 +186,7 @@ $('a text=About href=/corporate/about');
 
 > **persistScroll**(`name`): `void`
 
-Defined in: [route.ts:242](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L242)
+Defined in: [route.ts:242](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L242)
 
 Restore and store the vertical and horizontal scroll position for
 the parent element to the page state.
@@ -212,7 +212,7 @@ The scroll position will be persisted in `route.aux.scroll.<name>`.
 
 > **push**(`target`): `void`
 
-Defined in: [route.ts:177](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L177)
+Defined in: [route.ts:177](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L177)
 
 Modify the current route by merging `target` into it (using [merge](aberdeen.md#merge)), pushing a new history entry.
 
@@ -236,7 +236,7 @@ Same as for [go](#go), but merged into the current route instead deleting all st
 
 > **setLog**(`value`): `void`
 
-Defined in: [route.ts:37](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L37)
+Defined in: [route.ts:37](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L37)
 
 Configure logging on route changes.
 
@@ -258,7 +258,7 @@ Configure logging on route changes.
 
 > **up**(`stripCount`): `void`
 
-Defined in: [route.ts:215](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/route.ts#L215)
+Defined in: [route.ts:215](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/route.ts#L215)
 
 Navigate up in the path hierarchy, by going back to the first history entry
 that has a shorter path than the current one. If there's none, we just shorten

package/skill/transitions.md

@@ -1,4 +1,4 @@
-[**Aberdeen v1.7.0**](README.md)
+[**Aberdeen v1.7.2**](README.md)
 
 ***
 
@@ -12,7 +12,7 @@
 
 > **grow**(`el`): `Promise`\<`void`\>
 
-Defined in: [transitions.ts:33](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/transitions.ts#L33)
+Defined in: [transitions.ts:33](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/transitions.ts#L33)
 
 Do a grow transition for the given element. This is meant to be used as a
 handler for the `create` property.
@@ -38,7 +38,7 @@ for other specific cases as well.
 
 > **shrink**(`el`): `Promise`\<`void`\>
 
-Defined in: [transitions.ts:56](https://github.com/vanviegen/aberdeen/blob/876d65e85fa77c9453fc72e223d2239e9c745656/src/transitions.ts#L56)
+Defined in: [transitions.ts:56](https://github.com/vanviegen/aberdeen/blob/5343a0b73d29371c35d98f54f8a70608d83576dd/src/transitions.ts#L56)
 
 Do a shrink transition for the given element, and remove it from the DOM
 afterwards. This is meant to be used as a handler for the `destroy` property.

package/src/aberdeen.ts

@@ -1803,8 +1803,8 @@ export function setSpacingCssVars(base = 1, unit = 'rem'): void {
 	}
 }
 
-// Matches: (1) parenthesized content, (2) quoted content, (3) $varName at start or after space
-const CSS_VAR_PATTERN = /(\([^)]*\))|("[^"]*")|(^| )\$(\w+)/g;
+// Matches: (1) url() content, (2) quoted content, (3) $varName at start or after space
+const CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^| )\$(\w+)/g;
 const DIGIT_FIRST = /^\d/;
 
 /**
@@ -1822,28 +1822,6 @@ function cssVarRef(value: string): string {
 	});
 }
 
-// Automatically mount cssVars style tag to document.head when cssVars is not empty
-if (typeof document !== "undefined") {
-	leakScope(() => {
-		$(() => {
-			if (!isEmpty(cssVars)) {
-				mount(document.head, () => {
-					$('style', () => {
-						let css = ":root {\n";
-						for(const [key, value] of Object.entries(cssVars)) {
-							const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
-							css += `  --${varName}: ${value};\n`;
-						}
-						css += "}";
-						$(`#${css}`);
-					});
-				});
-			}
-		});
-	});
-}
-
-
 let darkModeState: {value: boolean} | undefined;
 
 /**
@@ -2349,9 +2327,25 @@ let cssCount = 0;
 export function insertCss(style: string | object): string {
 	const prefix = `.AbdStl${++cssCount}`;
 	const css = typeof style === 'string' ? styleStringToCss(style, prefix) : objectToCss(style, prefix);
-	if (css) $(`style#${css}`);
+	if (css) {
+		let cnt = cssSnippetCount++;
+		cssSnippets[cnt] = css;
+		clean(() => delete cssSnippets[cnt]);
+	}
 	return prefix;
 }
+let cssSnippets = proxy({} as Record<number, string>);
+let cssSnippetCount = 0;
+
+function combinePrefixSelector(prefix: string, key: string): string {
+	const sel = [];
+	for(const p of prefix.split(',')) {
+		for(const k of key.split(',')) {
+			sel.push(k.includes("&") ? k.trim().replace(/&/g, p) : `${p} ${k.trim()}`.trim());
+		}
+	}
+	return sel.join(',');
+}
 
 function objectToCss(style: object, prefix: string): string {
 	let css = "";
@@ -2364,10 +2358,7 @@ function objectToCss(style: object, prefix: string): string {
 				css += `${key}{\n${objectToCss(val, prefix)}}\n`;
 			} else {
 				// Regular nested selector
-				const sel = key === '&' ? prefix : 
-				            key.includes("&") ? key.replace(/&/g, prefix) : 
-				            `${prefix} ${key}`.trim();
-				css += objectToCss(val, sel);
+				css += objectToCss(val, combinePrefixSelector(prefix, key));
 			}
 		} else if (typeof val === 'string') {			
 			if (key.startsWith("@")) {
@@ -2375,8 +2366,7 @@ function objectToCss(style: object, prefix: string): string {
 				css += `${key}{\n${styleStringToCss(val, prefix)}}\n`;
 			} else {
 				// String value - parse as style string
-				const sel = key.includes("&") ? key.replace(/&/g, prefix) : `${prefix} ${key}`.trim();
-				css += styleStringToCss(val, sel);
+				css += styleStringToCss(val, combinePrefixSelector(prefix, key));
 			}
 		}
 	}
@@ -2472,7 +2462,11 @@ function styleStringToCss(styleStr: string, selector: string): string {
  */
 export function insertGlobalCss(style: object) {
 	const css = objectToCss(style, "");
-	if (css) $(`style#${css}`);
+	if (css) {
+		let cnt = cssSnippetCount++;
+		cssSnippets[cnt] = css;
+		clean(() => delete cssSnippets[cnt]);
+	}
 }
 
 const CSS_SHORT: Record<string, string | string[]> = {
@@ -3177,3 +3171,28 @@ export function withEmitHandler(
 }
 
 
+// Automatically add cssVars and cssSnippets (from insertCss) into a <head> style tag
+if (typeof document !== "undefined") {
+	leakScope(() => {
+		$(() => {
+			if (isEmpty(cssSnippets) && isEmpty(cssVars)) return;
+			mount(document.head, () => {
+				$('style.abd', () => {
+					onEach(cssSnippets, (value) => {
+						$('#', value);
+					});
+					$(() => {
+						if (isEmpty(cssVars)) return;
+						let css = ":root{";
+						for(const [key, value] of Object.entries(cssVars)) {
+							const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
+							css += `--${varName}:${value};`;
+						}
+						css += "}\n";
+						$('#', css);
+					})
+				});
+			});
+		});
+	});
+}