single-file-core 1.6.7 → 1.6.9

package/core/index.js

@@ -435,6 +435,7 @@ const SCRIPT_OPTIONS = "data-single-file-options";
 const JAVASCRIPT_URI_PROTOCOL = "javascript:";
 const DISABLED_SCRIPT_URI = "javascript:void(0)";
 const SCRIPT_URI_ATTRIBUTE_NAMES = ["href", "src", "action", "formaction", "data"];
+const SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
 const UTF8_CHARSET = "utf-8";
 const TAINTED_CANVAS_WARNING_MESSAGE = "SingleFile: canvas elements tainted by a cross-origin resource, dropped from the page:";
 const EMPTY_RESOURCE = "data:,";
@@ -1762,13 +1763,15 @@ function isScriptURI(value) {
 }
 
 function getOnEventAttributeNames(doc) {
-	const element = doc.body || doc.createElement("div");
+	const elements = [doc.body || doc.createElement("div"), doc.createElementNS(SVG_NAMESPACE_URI, "animate")];
 	const attributeNames = [];
-	for (const propertyName in element) {
-		if (propertyName.startsWith("on")) {
-			attributeNames.push(propertyName);
+	elements.forEach(element => {
+		for (const propertyName in element) {
+			if (propertyName.startsWith("on")) {
+				attributeNames.push(propertyName);
+			}
 		}
-	}
+	});
 	return attributeNames;
 }
 

package/core/infobar.js

@@ -157,7 +157,7 @@ const INFOBAR_ANIMATIONS_STYLES = `
   animation-iteration-count: 2;
 }
 
-.infobar:not(:focus-within):not(.infobar-focus)::after {
+.infobar::after {
   content: "";
   position: absolute;
   inset: -2px;
@@ -170,6 +170,12 @@ const INFOBAR_ANIMATIONS_STYLES = `
   animation-timing-function: ease-out;
   animation-delay: 2s;
   animation-iteration-count: 3;
+  transition: visibility 0s 999999s;
+}
+
+.infobar:focus-within::after, .infobar.infobar-focus::after {
+  visibility: hidden;
+  transition-delay: 0s;
 }
 
 @keyframes flash {
@@ -194,7 +200,7 @@ const INFOBAR_ANIMATIONS_STYLES = `
 
 @media (prefers-reduced-motion: reduce) {
   .infobar,
-  .infobar:not(:focus-within):not(.infobar-focus)::after {
+  .infobar::after {
     animation-name: none;
   }
 }

package/modules/css-rules-minifier.js

@@ -48,6 +48,7 @@ const IMPORT_NAME = "import";
 const FONT_FACE_NAME = "font-face";
 const KEYFRAMES_NAME = "keyframes";
 const COMBINATOR_NAME = "Combinator";
+const TYPE_SELECTOR_TYPE = "TypeSelector";
 const STYLE_ATTRIBUTE_NAME = "style";
 const SELECTOR_LIST_CONTEXT = "selectorList";
 const STYLESHEET_CONTEXT = "stylesheet";
@@ -58,6 +59,10 @@ const PARSE_CSS_ERROR_MESSAGE = "Failed to parse CSS";
 const QSA_ERROR_MESSAGE = "Failed to match selector";
 const PRELUDE_SEPARATOR = ",";
 const NESTING_SELECTOR = "&";
+const SCOPE_PSEUDO_CLASS = ":scope";
+const NAMESPACE_SEPARATOR = "|";
+const SELECTOR_SUPPORTS_PREFIX = "selector(";
+const SELECTOR_SUPPORTS_SUFFIX = ")";
 const VENDOR_PREFIX = "-";
 const CUSTOM_PROPERTY_PREFIX = "--";
 const LAYER_NAME_SEPARATOR = ".";
@@ -118,6 +123,7 @@ function process(doc, stylesheets) {
 		layerOrder: new Map(),
 		selectorData: new Map(),
 		selectorTexts: new Map(),
+		supportedSelectors: new Map(),
 		preludeTexts: new Map(),
 		rulesCounter: 0,
 		scopeIdCounter: 0
@@ -379,6 +385,9 @@ function minifyAtRule(ruleData, cssRule, stylesheets, processingContext, removed
 
 function minifyStylesheetRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext) {
 	ruleData.order = docContext.rulesCounter++;
+	if (!isPreludeSupported(ruleData.prelude, docContext)) {
+		return;
+	}
 	const removedSelectors = processSelectors(ruleData, processingContext, docContext);
 	const wasDiscarded = removeUnmatchedSelectors(ruleData, removedSelectors, removedRules, cssRule, docContext);
 	if (!wasDiscarded && hasChildNodes(ruleData.block)) {
@@ -388,7 +397,7 @@ function minifyStylesheetRule(ruleData, cssRule, stylesheets, processingContext,
 
 function processSelectors(ruleData, processingContext, docContext) {
 	const removedSelectors = [];
-	const { ancestorsSelectors } = processingContext;
+	const { ancestorsSelectors, scopeStack } = processingContext;
 	for (let selector = ruleData.prelude.children.head, selectorIndex = 0; selector; selector = selector.next, selectorIndex++) {
 		const {
 			startsWithCombinator,
@@ -400,7 +409,8 @@ function processSelectors(ruleData, processingContext, docContext) {
 		}
 		registerSelector(selector, ruleData, processingContext, docContext);
 		if (!startsWithCombinator || !ancestorsSelectors || !ancestorsSelectors.length) {
-			const matchedElements = matchElements(selector, ancestorsSelectors, processingContext.scopeStack, docContext);
+			const relativeToScope = startsWithCombinator && Boolean(scopeStack && scopeStack.length);
+			const matchedElements = matchElements(selector, ancestorsSelectors, scopeStack, docContext, relativeToScope);
 			if (matchedElements.length) {
 				if (!hasUnqueryableSelector) {
 					updateMatchingSelectors(matchedElements, selector, docContext);
@@ -453,6 +463,45 @@ function analyzeSelector(selector) {
 	return { hasUnqueryableSelector, hasNestedUnqueryablePseudoClass, startsWithCombinator };
 }
 
+function isPreludeSupported(prelude, docContext) {
+	if (!globalThis.CSS || !globalThis.CSS.supports) {
+		return true;
+	}
+	for (let selector = prelude.children.head; selector; selector = selector.next) {
+		if (!isSelectorSupported(selector.data, docContext)) {
+			return false;
+		}
+	}
+	return true;
+}
+
+function isSelectorSupported(selector, docContext) {
+	const selectorNode = cssTree.clone(selector);
+	cssTree.walk(selectorNode, {
+		visit: TYPE_SELECTOR_TYPE,
+		enter(node) {
+			if (typeof node.name === "string" && node.name.includes(NAMESPACE_SEPARATOR)) {
+				node.name = node.name.substring(node.name.lastIndexOf(NAMESPACE_SEPARATOR) + 1);
+			}
+		}
+	});
+	let selectorText = cssTree.generate(selectorNode);
+	const firstChild = selectorNode.children && selectorNode.children.head && selectorNode.children.head.data;
+	if (firstChild && firstChild.type === COMBINATOR_NAME) {
+		selectorText = SCOPE_PSEUDO_CLASS + selectorText;
+	}
+	if (!docContext.supportedSelectors.has(selectorText)) {
+		let supported;
+		try {
+			supported = globalThis.CSS.supports(SELECTOR_SUPPORTS_PREFIX + selectorText + SELECTOR_SUPPORTS_SUFFIX);
+		} catch {
+			supported = true;
+		}
+		docContext.supportedSelectors.set(selectorText, supported);
+	}
+	return docContext.supportedSelectors.get(selectorText);
+}
+
 function updateMatchingSelectors(matchedElements, selector, docContext) {
 	matchedElements.forEach(element => {
 		docContext.matchedElements.add(element);
@@ -580,8 +629,11 @@ function getConditionalStackForSelector(selector, docContext) {
 	return conditionalStack;
 }
 
-function matchElements(selector, ancestorsSelectors, scopeStack, docContext) {
-	const selectorText = createSelectorText(selector, ancestorsSelectors, docContext);
+function matchElements(selector, ancestorsSelectors, scopeStack, docContext, relativeToScope) {
+	let selectorText = createSelectorText(selector, ancestorsSelectors, docContext);
+	if (relativeToScope) {
+		selectorText = SCOPE_PSEUDO_CLASS + selectorText;
+	}
 	const cacheKey = createScopeCacheKey(selectorText, scopeStack);
 	const cachedNodes = docContext.matchedSelectors.get(cacheKey);
 	if (cachedNodes) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "single-file-core",
-	"version": "1.6.7",
+	"version": "1.6.9",
 	"description": "SingleFile Core",
 	"author": "Gildas Lormeau",
 	"license": "AGPL-3.0-or-later",