@cyberalien/svg-utils 1.1.4 → 1.2.0

package/lib/svg-css/states/selector/parse.js

@@ -0,0 +1,74 @@
+import { getStatesFromKey } from "../key.js";
+import { mergeSelectorsForStates } from "./merge.js";
+import { splitSelectorsForState } from "./split.js";
+import { stringifySelectorsForState } from "./stringify.js";
+
+/**
+* Create context object from config
+*/
+function createStatefulIconSelectorsContext(config, states) {
+	return {
+		config,
+		states,
+		data: Object.create(null),
+		parsed: Object.create(null)
+	};
+}
+/**
+* Get selectors to render state values
+*
+* Does not include shape class name
+*/
+function getSelectorsForStateValues(context, value) {
+	const dataToMerge = [];
+	let cacheKey = "";
+	const { config, states, data, parsed } = context;
+	const stateValues = typeof value === "string" ? getStatesFromKey(value, states) : value;
+	const add = (key, value) => {
+		cacheKey += `${key}:${value};`;
+		const baseStateItem = config[key];
+		const stateItem = typeof baseStateItem === "object" && !Array.isArray(baseStateItem) ? baseStateItem[value] : baseStateItem;
+		if (!stateItem) return false;
+		let selectorData;
+		if (typeof stateItem === "string") {
+			const selector = stateItem.replace("{state}", value);
+			if (data[selector]) selectorData = data[selector];
+			else if (data[selector] === null) return false;
+			else {
+				const split = splitSelectorsForState(selector);
+				data[selector] = split;
+				if (!split) return false;
+				selectorData = split;
+			}
+		} else selectorData = stateItem;
+		dataToMerge.push(selectorData);
+		return true;
+	};
+	for (const stateName in stateValues) {
+		const stateValue = stateValues[stateName];
+		const stateItem = states.find((s) => typeof s === "string" ? s === stateName : s[0] === stateName);
+		if (!stateItem) return null;
+		if (typeof stateItem === "string") {
+			if (stateValue && !add(stateName, stateName)) return null;
+		} else {
+			const allValues = stateItem[1];
+			if (typeof stateValue !== "string" || !allValues.includes(stateValue)) return null;
+			if (stateValue !== (stateItem[2] || allValues[0]) && !add(stateName, stateValue)) return null;
+		}
+	}
+	if (!dataToMerge.length) return [[]];
+	if (parsed[cacheKey] !== void 0) return parsed[cacheKey];
+	let merged = data[cacheKey];
+	if (!merged) {
+		if (merged !== null) {
+			merged = mergeSelectorsForStates(dataToMerge);
+			data[cacheKey] = merged;
+		}
+		if (!merged) return null;
+	}
+	const stringified = stringifySelectorsForState(merged);
+	parsed[cacheKey] = stringified;
+	return stringified;
+}
+
+export { createStatefulIconSelectorsContext, getSelectorsForStateValues };

package/lib/svg-css/states/selector/part/merge.d.ts

@@ -0,0 +1,10 @@
+import { StateSelectorParts } from "../types.js";
+/**
+ * Merge all selectors
+ *
+ * Returns null if merge is not possible
+ *
+ * If multiple results are returned, all have identical at-rules and svg selectors, but different parent selectors.
+ */
+declare function mergeSelectorParts(parts: StateSelectorParts[]): StateSelectorParts[] | null;
+export { mergeSelectorParts };

package/lib/svg-css/states/selector/part/merge.js

@@ -0,0 +1,37 @@
+import { mergeMultipleArrays } from "../helpers/iterate.js";
+import { mergeMultipleSelectorSubParts } from "../sub/merge.js";
+
+/**
+* Merge all selectors
+*
+* Returns null if merge is not possible
+*
+* If multiple results are returned, all have identical at-rules and svg selectors, but different parent selectors.
+*/
+function mergeSelectorParts(parts) {
+	const atRules = [];
+	let svgSelector = null;
+	for (const item of parts) {
+		if (item.at) {
+			for (const atRule of item.at) if (!atRules.includes(atRule)) atRules.push(atRule);
+		}
+		if (item.svg) if (!svgSelector) svgSelector = item.svg;
+		else {
+			svgSelector = mergeMultipleSelectorSubParts([svgSelector, item.svg]);
+			if (!svgSelector) return null;
+		}
+	}
+	const baseResult = {
+		at: atRules.length > 0 ? atRules : void 0,
+		svg: svgSelector || void 0
+	};
+	const allParentSelectors = parts.filter((item) => item.parents).map((item) => item.parents);
+	const mergedParentSelectors = allParentSelectors.length > 1 ? mergeMultipleArrays(allParentSelectors, (a, b) => mergeMultipleSelectorSubParts([a, b])) : allParentSelectors;
+	if (mergedParentSelectors.length) return mergedParentSelectors.map((parents) => ({
+		...baseResult,
+		parents
+	}));
+	else return [baseResult];
+}
+
+export { mergeSelectorParts };

package/lib/svg-css/states/selector/part/split.d.ts

@@ -0,0 +1,13 @@
+import { StateSelectorParts } from "../types.js";
+/**
+ * Create selector parts from given parameters
+ *
+ * Should be used when selector is hard to parse from string, such as:
+ * - `@media (max-width: 600px) label:focus &` -> parser will not be able to tell if "label" is part of at-rule or parent selector
+ */
+declare function createSelectorParts(atRules: string[] | null, parentSelectors: string | string[] | null, svgSelector: string | null): StateSelectorParts;
+/**
+ * Split selector into parts
+ */
+declare function splitSelectorToParts(selector: string): StateSelectorParts | null;
+export { createSelectorParts, splitSelectorToParts };

package/lib/svg-css/states/selector/part/split.js

@@ -0,0 +1,60 @@
+import { splitSelectorToSubParts } from "../sub/split.js";
+
+const charAfterAtRule = [
+	".",
+	"&",
+	":",
+	"[",
+	"#",
+	"*"
+];
+/**
+* Create selector parts from given parameters
+*
+* Should be used when selector is hard to parse from string, such as:
+* - `@media (max-width: 600px) label:focus &` -> parser will not be able to tell if "label" is part of at-rule or parent selector
+*/
+function createSelectorParts(atRules, parentSelectors, svgSelector) {
+	return {
+		at: atRules ? atRules : void 0,
+		parents: parentSelectors ? Array.isArray(parentSelectors) ? parentSelectors.map(splitSelectorToSubParts) : [splitSelectorToSubParts(parentSelectors)] : void 0,
+		svg: svgSelector ? splitSelectorToSubParts(svgSelector) : void 0
+	};
+}
+/**
+* Split selector into parts
+*/
+function splitSelectorToParts(selector) {
+	selector = selector.replace(/[\s]+/g, " ").trim();
+	const result = {};
+	if (selector.startsWith("@")) {
+		const chunks = selector.split(" ");
+		const atRule = [chunks.shift()];
+		let isAtRuleComplete = false;
+		while (chunks.length > 0) {
+			const firstChar = chunks[0][0];
+			if (charAfterAtRule.includes(firstChar)) {
+				isAtRuleComplete = true;
+				break;
+			}
+			atRule.push(chunks.shift());
+		}
+		if (!isAtRuleComplete) return { at: [selector] };
+		result.at = [atRule.join(" ")];
+		selector = chunks.join(" ");
+	}
+	selector = selector.replace(/\s*([>+~])\s*/g, " $1").trim();
+	const parents = [];
+	const chunks = selector.split(" ");
+	while (chunks.length > 0) {
+		const nextChunk = chunks.shift();
+		if (nextChunk.includes("&")) {
+			if (chunks.length) return null;
+			result.svg = splitSelectorToSubParts(nextChunk.replace("&", ""));
+		} else parents.push(splitSelectorToSubParts(nextChunk));
+	}
+	if (parents.length) result.parents = parents;
+	return result;
+}
+
+export { createSelectorParts, splitSelectorToParts };

package/lib/svg-css/states/selector/part/stringify.d.ts

@@ -0,0 +1,9 @@
+import { StateSelectorParts } from "../types.js";
+/**
+ * Convert selector parts to array of strings
+ *
+ * Assumes that all parts have identical at-rules and svg selectors, but different parent selectors,
+ * same as returned by mergeSelectorParts()
+ */
+declare function stringifySelectorParts(parts: StateSelectorParts[]): string[] | null;
+export { stringifySelectorParts };

package/lib/svg-css/states/selector/part/stringify.js

@@ -0,0 +1,32 @@
+import { stringifySelectorSubParts } from "../sub/stringify.js";
+
+/**
+* Join sub-parts of selector into one string
+*/
+function joinSubParts(parts) {
+	return parts.map((item, index) => {
+		const chunk = stringifySelectorSubParts(item);
+		return index > 0 && chunk.startsWith("&") ? chunk.replace("&", "").trim() : chunk;
+	}).join(" ");
+}
+/**
+* Convert selector parts to array of strings
+*
+* Assumes that all parts have identical at-rules and svg selectors, but different parent selectors,
+* same as returned by mergeSelectorParts()
+*/
+function stringifySelectorParts(parts) {
+	const firstItem = parts[0];
+	if (!firstItem) return null;
+	const results = [];
+	if (firstItem.at) results.push(...firstItem.at);
+	if (parts.length > 1) {
+		const parentSelectors = /* @__PURE__ */ new Set();
+		for (const item of parts) if (item.parents) parentSelectors.add(joinSubParts(item.parents));
+		if (parentSelectors.size) results.push(Array.from(parentSelectors).sort((a, b) => a.localeCompare(b)).join(", "));
+	} else if (firstItem.parents) results.push(...firstItem.parents.map((item) => stringifySelectorSubParts(item)));
+	if (firstItem.svg) results.push(stringifySelectorSubParts(firstItem.svg, true));
+	return results;
+}
+
+export { stringifySelectorParts };

package/lib/svg-css/states/selector/split.d.ts

@@ -0,0 +1,6 @@
+import { StateSelectorData } from "./types.js";
+/**
+ * Split comma separated selectors into parts, group by compatibility so later can be merged
+ */
+declare function splitSelectorsForState(selectors: string): StateSelectorData | null;
+export { splitSelectorsForState };

package/lib/svg-css/states/selector/split.js

@@ -0,0 +1,29 @@
+import { splitSelectorToParts } from "./part/split.js";
+import { stringifySelectorSubParts } from "./sub/stringify.js";
+
+/**
+* Split comma separated selectors into parts, group by compatibility so later can be merged
+*/
+function splitSelectorsForState(selectors) {
+	const groups = [];
+	const hashMap = /* @__PURE__ */ new Map();
+	const list = selectors.split(",").map((s) => s.trim());
+	for (const selector of list) {
+		const split = splitSelectorToParts(selector);
+		if (!split) return null;
+		const hash = JSON.stringify({
+			at: split.at,
+			svg: split.svg ? stringifySelectorSubParts(split.svg, true) : void 0
+		});
+		const group = hashMap.get(hash);
+		if (group) group.push(split);
+		else {
+			const newGroup = [split];
+			hashMap.set(hash, newGroup);
+			groups.push(newGroup);
+		}
+	}
+	return groups;
+}
+
+export { splitSelectorsForState };

package/lib/svg-css/states/selector/stringify.d.ts

@@ -0,0 +1,8 @@
+import { StateSelectorData } from "./types.js";
+/**
+ * Convert selector data to strings
+ *
+ * Returns sets of selector sequences
+ */
+declare function stringifySelectorsForState(data: StateSelectorData): string[][] | null;
+export { stringifySelectorsForState };

package/lib/svg-css/states/selector/stringify.js

@@ -0,0 +1,143 @@
+import { stringifySelectorParts } from "./part/stringify.js";
+
+function joinSequence(parts) {
+	let selectors = [];
+	for (const part of parts) {
+		const chunks = part.split(",").map((s) => s.trim());
+		if (!selectors.length) {
+			selectors.push(...chunks);
+			continue;
+		}
+		const newSelectors = [];
+		for (const chunk of chunks) for (const selector of selectors) newSelectors.push(`${selector} ${chunk}`);
+		selectors = newSelectors;
+	}
+	const uniqueSelectors = new Set(selectors);
+	return Array.from(uniqueSelectors).sort((a, b) => a.localeCompare(b)).join(", ");
+}
+function mergeRules(rules) {
+	const results = /* @__PURE__ */ new Set();
+	for (const rule of rules) {
+		const chunks = rule.split(",").map((s) => s.trim());
+		for (const chunk of chunks) results.add(chunk);
+	}
+	return Array.from(results).sort((a, b) => a.localeCompare(b)).join(", ");
+}
+function mergeSequences(list1, list2) {
+	const max1 = list1.length - 1;
+	const max2 = list2.length - 1;
+	let match1 = -1;
+	let match2 = -1;
+	for (let i = 0; i <= max1; i++) {
+		const part1 = list1[i];
+		for (let j = 0; j <= max2; j++) if (part1 === list2[j]) {
+			if ((i === 0 || j === 0) && i !== j) continue;
+			if ((i === max1 || j === max2) && (i !== max1 || j !== max2)) continue;
+			match1 = i;
+			match2 = j;
+			break;
+		}
+		if (match1 !== -1) break;
+	}
+	if (match1 === -1) return [mergeRules([joinSequence(list1), joinSequence(list2)])];
+	const merged = [];
+	if (match1 > 0) merged.push(mergeRules([joinSequence(list1.slice(0, match1)), joinSequence(list2.slice(0, match2))]));
+	merged.push(mergeRules([list1[match1], list2[match2]]));
+	if (match1 < max1) merged.push(...mergeSequences(list1.slice(match1 + 1), list2.slice(match2 + 1)));
+	return merged;
+}
+function optimiseMerge(data) {
+	const result = [];
+	const atRules = /* @__PURE__ */ new Map();
+	const add = (sequence) => {
+		const atData = [];
+		let skipped = false;
+		for (let i = 0; i < sequence.length; i++) {
+			const part = sequence[i];
+			if (part.includes("@")) {
+				if (skipped) return false;
+				atData.push(`${i}:${part}`);
+			} else skipped = true;
+		}
+		const atKey = atData.join("|");
+		if (!skipped) {
+			result.push(sequence);
+			return true;
+		}
+		if (atRules.has(atKey)) {
+			const index = atRules.get(atKey);
+			const existing = result[index];
+			const merged = [];
+			const minLength = Math.min(existing.length, sequence.length);
+			for (let i = 0; i < minLength; i++) {
+				const part1 = existing[i];
+				const part2 = sequence[i];
+				if (part1 === part2) {
+					merged.push(part1);
+					continue;
+				}
+				if (part1.includes("@") || part2.includes("@")) return false;
+				merged.push(...mergeSequences(existing.slice(i), sequence.slice(i)));
+				break;
+			}
+			result[index] = merged;
+			return true;
+		}
+		atRules.set(atKey, result.length);
+		result.push(sequence);
+		return true;
+	};
+	for (const sequence of data) if (!add(sequence)) return data;
+	return result;
+}
+function optimise(data) {
+	let changed = false;
+	const result = [];
+	const add = (sequence) => {
+		if (!result.length) {
+			result.push([...sequence]);
+			return;
+		}
+		const length = sequence.length;
+		for (let i = 0; i < result.length; i++) {
+			const existing = result[i];
+			if (existing.length === length) {
+				let matches = 0;
+				let differentIndex = -1;
+				for (let j = 0; j < length; j++) if (existing[j] === sequence[j]) matches++;
+				else differentIndex = j;
+				if (matches === length) return;
+				if (matches === length - 1) {
+					const part1 = sequence[differentIndex];
+					const part2 = existing[differentIndex];
+					if (!part1.includes("@") && !part2.includes("@")) {
+						existing[differentIndex] = mergeRules([part1, part2]);
+						changed = true;
+						return;
+					}
+				}
+			}
+		}
+		result.push([...sequence]);
+	};
+	for (const sequence of data) add(sequence);
+	if (!changed && result.length > 1) return optimiseMerge(result);
+	return changed ? optimise(result) : result;
+}
+/**
+* Convert selector data to strings
+*
+* Returns sets of selector sequences
+*/
+function stringifySelectorsForState(data) {
+	const sequences = [];
+	for (const group of data) {
+		const sequence = stringifySelectorParts(group);
+		if (!sequence) return null;
+		sequences.push(sequence);
+	}
+	sequences.sort((a, b) => a.length - b.length);
+	return optimise(sequences);
+}
+
+export { stringifySelectorsForState };

package/lib/svg-css/states/selector/sub/merge.d.ts

@@ -0,0 +1,6 @@
+import { StateSelectorSubParts } from "../types.js";
+/**
+ * Merge multiple selector parts into one
+ */
+declare function mergeMultipleSelectorSubParts(parts: StateSelectorSubParts[]): StateSelectorSubParts | null;
+export { mergeMultipleSelectorSubParts };

package/lib/svg-css/states/selector/sub/merge.js

@@ -0,0 +1,36 @@
+const uniqueKeys = ["tag", "id"];
+const mergeKeys = [
+	"name",
+	"attr",
+	"pseudo"
+];
+/**
+* Merge multiple selector parts into one
+*/
+function mergeMultipleSelectorSubParts(parts) {
+	const result = {};
+	for (const part of parts) {
+		if (part.combinator) {
+			if (!result.combinator) result.combinator = part.combinator;
+			else if (result.combinator !== part.combinator) return null;
+		}
+		for (const key of uniqueKeys) {
+			const value = part[key];
+			if (value) {
+				if (result[key] && result[key] !== value) return null;
+				result[key] = value;
+			}
+		}
+		for (const key of mergeKeys) {
+			const values = part[key];
+			if (values) {
+				const list = result[key] || /* @__PURE__ */ new Set();
+				if (!result[key]) result[key] = list;
+				for (const value of values) list.add(value);
+			}
+		}
+	}
+	return result;
+}
+
+export { mergeMultipleSelectorSubParts };

package/lib/svg-css/states/selector/sub/split.d.ts

@@ -0,0 +1,10 @@
+import { StateSelectorSubParts } from "../types.js";
+declare const combinators: Set<string>;
+/**
+ * Split selector into smaller parts
+ *
+ * Assuming selector is in format: '.foo[bar="baz"]:hover:active'
+ * Class name should be before attribute selector, pseudo-classes should be last
+ */
+declare function splitSelectorToSubParts(selector: string): StateSelectorSubParts;
+export { combinators, splitSelectorToSubParts };

package/lib/svg-css/states/selector/sub/split.js

@@ -0,0 +1,61 @@
+const combinators = new Set([
+	">",
+	"+",
+	"~"
+]);
+/**
+* Split selector into smaller parts
+*
+* Assuming selector is in format: '.foo[bar="baz"]:hover:active'
+* Class name should be before attribute selector, pseudo-classes should be last
+*/
+function splitSelectorToSubParts(selector) {
+	const result = {};
+	const firstChar = selector[0];
+	if (combinators.has(firstChar)) {
+		result.combinator = firstChar;
+		selector = selector.slice(1).trim();
+	}
+	const pseudoSelectors = selector.split(":");
+	while (pseudoSelectors.length > 1) {
+		const list = result.pseudo || /* @__PURE__ */ new Set();
+		if (!result.pseudo) result.pseudo = list;
+		list.add(":" + pseudoSelectors.pop());
+	}
+	selector = pseudoSelectors[0];
+	let attrStart = selector.indexOf("[");
+	while (attrStart !== -1) {
+		const attrEnd = selector.indexOf("]", attrStart);
+		let attrValue;
+		if (attrEnd === -1) {
+			attrValue = selector.slice(attrStart);
+			selector = selector.slice(0, attrStart);
+		} else {
+			attrValue = selector.slice(attrStart, attrEnd + 1);
+			selector = selector.slice(0, attrStart) + selector.slice(attrEnd + 1);
+		}
+		const list = result.attr || /* @__PURE__ */ new Set();
+		if (!result.attr) result.attr = list;
+		list.add(attrValue);
+		attrStart = selector.indexOf("[");
+	}
+	const tagMatch = selector.match(/^[a-zA-Z][a-zA-Z0-9-]*/);
+	if (tagMatch) {
+		result.tag = tagMatch[0];
+		selector = selector.slice(result.tag.length);
+	}
+	const idMatch = selector.match(/^#[a-zA-Z0-9_-]+/);
+	if (idMatch) {
+		result.id = idMatch[0];
+		selector = selector.slice(result.id.length);
+	}
+	if (selector) {
+		const chunks = selector.split(".");
+		const list = /* @__PURE__ */ new Set();
+		for (let i = 1; i < chunks.length; i++) list.add((i === 1 ? `${chunks[0]}.` : ".") + chunks[i]);
+		result.name = list;
+	}
+	return result;
+}
+
+export { combinators, splitSelectorToSubParts };

package/lib/svg-css/states/selector/sub/stringify.d.ts

@@ -0,0 +1,6 @@
+import { StateSelectorSubParts } from "../types.js";
+/**
+ * Convert selector parts to string
+ */
+declare function stringifySelectorSubParts(selector: StateSelectorSubParts, isSVG?: boolean): string;
+export { stringifySelectorSubParts };

package/lib/svg-css/states/selector/sub/stringify.js

@@ -0,0 +1,17 @@
+function mergeSet(set) {
+	return set ? Array.from(set).sort((a, b) => a.localeCompare(b)).join("") : "";
+}
+/**
+* Convert selector parts to string
+*/
+function stringifySelectorSubParts(selector, isSVG = false) {
+	const combinator = selector.combinator ? `& ${selector.combinator} ` : "";
+	const tag = isSVG ? "" : `${selector.tag || ""}${selector.id || ""}`;
+	const attr = `${mergeSet(selector.name)}${mergeSet(selector.attr)}`;
+	const pseudo = mergeSet(selector.pseudo);
+	const full = `${tag}${attr}${pseudo}`;
+	if (isSVG) return full ? `${combinator}svg${full}` : combinator.trim();
+	return `${combinator}${pseudo && full === pseudo ? "*" : ""}${full}`;
+}
+
+export { stringifySelectorSubParts };

package/lib/svg-css/states/selector/types.d.ts

@@ -0,0 +1,37 @@
+import { IconStatesList } from "../types.js";
+/**
+ * Sub-parts of selector
+ */
+interface StateSelectorSubParts {
+  tag?: string;
+  id?: string;
+  combinator?: string;
+  name?: Set<string>;
+  attr?: Set<string>;
+  pseudo?: Set<string>;
+}
+/**
+ * Parts of selector
+ */
+interface StateSelectorParts {
+  at?: string[];
+  parents?: StateSelectorSubParts[];
+  svg?: StateSelectorSubParts;
+}
+type StateSelectorData = StateSelectorParts[][];
+/**
+ * Class names config
+ */
+type StatefulIconSelectorsConfig = Record<string, string | StateSelectorData | Record<string, string | StateSelectorData>>;
+/**
+ * Data for generating selectors for states
+ *
+ * Includes config and cache
+ */
+interface StatefulIconSelectorsContext {
+  config: StatefulIconSelectorsConfig;
+  states: IconStatesList;
+  data: Record<string, StateSelectorData | null>;
+  parsed: Record<string, string[][] | null>;
+}
+export { StateSelectorData, StateSelectorParts, StateSelectorSubParts, StatefulIconSelectorsConfig, StatefulIconSelectorsContext };

package/lib/svg-css/states/selector/types.js

@@ -0,0 +1 @@
+export {  };

package/lib/svg-css/states/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * States for stateful icons
+ */
+type IconStatesSimpleState = Readonly<string>;
+type IconStatesAdvancedStateValues = string[] | Readonly<string[]>;
+type IconStatesAdvancedState = Readonly<[string, IconStatesAdvancedStateValues] | [string, IconStatesAdvancedStateValues, string]>;
+type IconStatesState = IconStatesSimpleState | IconStatesAdvancedState;
+type IconStatesList = IconStatesState[];
+export { IconStatesAdvancedState, IconStatesAdvancedStateValues, IconStatesList, IconStatesSimpleState, IconStatesState };

package/lib/svg-css/states/types.js

@@ -0,0 +1 @@
+export {  };

package/lib/svg-css/states/validate.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Validates states list to avoid issues when generating icons
+ */
+declare function assertValidStatesList(list: IconStatesList): void;
+export { assertValidStatesList };