ripple 0.2.166 → 0.2.168

package/src/compiler/phases/2-analyze/validation.js

@@ -0,0 +1,156 @@
+import { error } from '../../errors.js';
+
+const invalid_nestings = {
+	// <p> cannot contain block-level elements
+	p: new Set([
+		'address',
+		'article',
+		'aside',
+		'blockquote',
+		'details',
+		'div',
+		'dl',
+		'fieldset',
+		'figcaption',
+		'figure',
+		'footer',
+		'form',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'header',
+		'hgroup',
+		'hr',
+		'main',
+		'menu',
+		'nav',
+		'ol',
+		'p',
+		'pre',
+		'section',
+		'table',
+		'ul',
+	]),
+	// <span> cannot contain block-level elements
+	span: new Set([
+		'address',
+		'article',
+		'aside',
+		'blockquote',
+		'details',
+		'div',
+		'dl',
+		'fieldset',
+		'figcaption',
+		'figure',
+		'footer',
+		'form',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'header',
+		'hgroup',
+		'hr',
+		'main',
+		'menu',
+		'nav',
+		'ol',
+		'p',
+		'pre',
+		'section',
+		'table',
+		'ul',
+	]),
+	// Interactive elements cannot be nested
+	a: new Set(['a', 'button']),
+	button: new Set(['a', 'button']),
+	// Form elements
+	label: new Set(['label']),
+	form: new Set(['form']),
+	// Headings cannot be nested within each other
+	h1: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h2: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h3: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h4: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h5: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h6: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	// Table structure
+	table: new Set(['table', 'tr', 'td', 'th']), // Can only contain caption, colgroup, thead, tbody, tfoot
+	thead: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'td', 'th']), // Can only contain tr
+	tbody: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'td', 'th']), // Can only contain tr
+	tfoot: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'td', 'th']), // Can only contain tr
+	tr: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'tr']), // Can only contain td and th
+	td: new Set(['td', 'th']), // Cannot nest td/th elements
+	th: new Set(['td', 'th']), // Cannot nest td/th elements
+	// Media elements
+	picture: new Set(['picture']),
+	// Main landmark - only one per document, cannot be nested
+	main: new Set(['main']),
+	// Other semantic restrictions
+	figcaption: new Set(['figcaption']),
+	dt: new Set([
+		'header',
+		'footer',
+		'article',
+		'aside',
+		'nav',
+		'section',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+	]),
+	// No interactive content inside summary
+	summary: new Set(['summary']),
+};
+
+/**
+ * @param {any} element
+ * @returns {string | null}
+ */
+function get_element_tag(element) {
+	return element.id.type === 'Identifier' ? element.id.name : null;
+}
+
+/**
+ * @param {any} element
+ * @param {any} state
+ * @param {any} context
+ */
+export function validate_nesting(element, state, context) {
+	const tag = get_element_tag(element);
+
+	if (tag === null) {
+		return;
+	}
+
+	for (let i = context.path.length - 1; i >= 0; i--) {
+		const parent = context.path[i];
+		if (parent.type === 'Element') {
+			const parent_tag = get_element_tag(parent);
+			if (parent_tag === null) {
+				continue;
+			}
+
+			if (parent_tag in invalid_nestings) {
+				const validation_set =
+					invalid_nestings[/** @type {keyof typeof invalid_nestings} */ (parent_tag)];
+				if (validation_set.has(tag)) {
+					error(
+						`Invalid HTML nesting: <${tag}> cannot be a descendant of <${parent_tag}>.`,
+						state.analysis.module.filename,
+						context,
+					);
+				}
+			}
+		}
+	}
+}

package/src/compiler/phases/3-transform/stylesheet.js

@@ -24,6 +24,65 @@ function is_in_global_block(path) {
 	return path.some((node) => node.type === 'Rule' && node.metadata.is_global_block);
 }
 
+/**
+ * Check if we're inside a pseudo-class selector that's INSIDE a :global() wrapper
+ * or adjacent to a :global modifier
+ * @param {any[]} path
+ */
+function is_in_global_pseudo(path) {
+	// Walk up the path to find if we're inside a :global() pseudo-class selector with args
+	// or if we're in a pseudo-class that's in the same RelativeSelector as a :global modifier
+	for (let i = path.length - 1; i >= 0; i--) {
+		const node = path[i];
+
+		// Case 1: :global(...) with args - we're inside it
+		if (node.type === 'PseudoClassSelector' && node.name === 'global' && node.args !== null) {
+			return true;
+		}
+
+		// Case 2: We're in a PseudoClassSelector (like :is, :where, :has, :not)
+		// Check if there's a :global modifier in the same RelativeSelector
+		if (
+			node.type === 'PseudoClassSelector' &&
+			(node.name === 'is' || node.name === 'where' || node.name === 'has' || node.name === 'not')
+		) {
+			// Look for the parent RelativeSelector
+			for (let j = i - 1; j >= 0; j--) {
+				const ancestor = path[j];
+				if (ancestor.type === 'RelativeSelector') {
+					// Check if this RelativeSelector has a :global modifier (no args)
+					const hasGlobalModifier = ancestor.selectors.some(
+						(s) => s.type === 'PseudoClassSelector' && s.name === 'global' && s.args === null,
+					);
+					if (hasGlobalModifier) {
+						return true;
+					}
+					break;
+				}
+			}
+		}
+	}
+	return false;
+}
+
+/**
+ * Check if a rule has :global in the middle (like `div :global p`)
+ * These rules should treat nested selectors as global
+ * @param {AST.CSS.Rule} rule
+ */
+function has_global_in_middle(rule) {
+	for (const complex_selector of rule.prelude.children) {
+		for (let i = 0; i < complex_selector.children.length; i++) {
+			const child = complex_selector.children[i];
+			// Check if this is a :global selector that's not at the start
+			if (i > 0 && child.metadata.is_global) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
 function remove_global_pseudo_class(selector, combinator, state) {
 	if (selector.args === null) {
 		let start = selector.start;
@@ -75,13 +134,19 @@ function is_empty(rule, is_in_global_block) {
 		return rule.block.children.length === 0;
 	}
 
+	// Rules with :global in the middle (like `div :global p`) should treat nested rules as global
+	const has_mid_global = has_global_in_middle(rule);
+
 	for (const child of rule.block.children) {
 		if (child.type === 'Declaration') {
 			return false;
 		}
 
 		if (child.type === 'Rule') {
-			if ((is_used(child) || is_in_global_block) && !is_empty(child, is_in_global_block)) {
+			if (
+				(is_used(child) || is_in_global_block || has_mid_global) &&
+				!is_empty(child, is_in_global_block || has_mid_global)
+			) {
 				return false;
 			}
 		}
@@ -196,8 +261,10 @@ const visitors = {
 	},
 	SelectorList(node, { state, next, path }) {
 		// Only add comments if we're not inside a complex selector that itself is unused or a global block
+		// or inside a pseudo-class that's part of a global selector
 		if (
 			!is_in_global_block(path) &&
+			!is_in_global_pseudo(path) &&
 			!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)
 		) {
 			const children = node.children;
@@ -280,8 +347,39 @@ const visitors = {
 	ComplexSelector(node, context) {
 		const before_bumped = context.state.specificity.bumped;
 
+		// Check if we're inside a :has/:is/:where/:not pseudo-class that's part of a global selector
+		// In that case, we should still scope the contents even though the parent is global
+		const parentPath = context.path;
+		let insideScopingPseudo = false;
+
+		// Walk up the path to find if we're inside args of :has/:is/:where/:not
+		for (let i = parentPath.length - 1; i >= 0; i--) {
+			const pathNode = parentPath[i];
+
+			// Check if we're inside a SelectorList that belongs to a scoping pseudo-class
+			if (pathNode.type === 'SelectorList' && i > 0) {
+				const parent = parentPath[i - 1];
+				if (
+					parent.type === 'PseudoClassSelector' &&
+					(parent.name === 'has' ||
+						parent.name === 'is' ||
+						parent.name === 'where' ||
+						parent.name === 'not')
+				) {
+					// Now check if this pseudo-class is part of a global RelativeSelector
+					for (let j = i - 2; j >= 0; j--) {
+						if (parentPath[j].type === 'RelativeSelector' && parentPath[j].metadata?.is_global) {
+							insideScopingPseudo = true;
+							break;
+						}
+					}
+					break;
+				}
+			}
+		}
+
 		for (const relative_selector of node.children) {
-			if (relative_selector.metadata.is_global) {
+			if (relative_selector.metadata.is_global && !insideScopingPseudo) {
 				const global = /** @type {AST.CSS.PseudoClassSelector} */ (relative_selector.selectors[0]);
 				remove_global_pseudo_class(global, relative_selector.combinator, context.state);
 
@@ -303,7 +401,8 @@ const visitors = {
 				}
 			}
 
-			if (relative_selector.metadata.scoped) {
+			// Skip scoping if we're inside a global block
+			if (relative_selector.metadata.scoped && !is_in_global_block(context.path)) {
 				if (relative_selector.selectors.length === 1) {
 					// skip standalone :is/:where/& selectors
 					const selector = relative_selector.selectors[0];

package/src/runtime/internal/client/blocks.js

@@ -1,4 +1,4 @@
-/** @import { Block, Derived, CompatOptions } from '#client' */
+/** @import { Block, Derived, CompatOptions, Component } from '#client' */
 
 import {
 	BLOCK_HAS_RUN,
@@ -19,6 +19,7 @@ import {
 	active_block,
 	active_component,
 	active_reaction,
+	create_component_ctx,
 	is_block_dirty,
 	run_block,
 	run_teardown,
@@ -151,7 +152,7 @@ export function root(fn, compat) {
 		};
 	}
 
-	return block(ROOT_BLOCK, fn, { compat });
+	return block(ROOT_BLOCK, target_fn, { compat }, create_component_ctx());
 }
 
 /**
@@ -181,13 +182,14 @@ function push_block(block, parent_block) {
 /**
  * @param {number} flags
  * @param {Function} fn
- * @param {any} state
+ * @param {any} [state]
+ * @param {Component} [co]
  * @returns {Block}
  */
-export function block(flags, fn, state = null) {
+export function block(flags, fn, state = null, co) {
 	/** @type {Block} */
 	var block = {
-		co: active_component,
+		co: co || active_component,
 		d: null,
 		first: null,
 		f: flags,

package/src/runtime/internal/client/index.js

@@ -4,6 +4,7 @@ export {
 	next_sibling as sibling,
 	document,
 	create_text,
+	init_operations,
 } from './operations.js';
 
 export {
@@ -16,7 +17,7 @@ export {
 	set_selected,
 } from './render.js';
 
-export { render, render_spread, async, ref, branch, destroy_block } from './blocks.js';
+export { render, render_spread, async, ref, branch, destroy_block, root } from './blocks.js';
 
 export { event, delegate } from './events.js';
 

package/src/runtime/internal/client/runtime.js

@@ -1197,16 +1197,20 @@ export function safe_scope(err = 'Cannot access outside of a component context')
 	return /** @type {Block} */ (active_scope);
 }
 
-/**
- * @returns {void}
- */
-export function push_component() {
-	var component = {
+export function create_component_ctx() {
+	return {
 		c: null,
 		e: null,
 		m: false,
 		p: active_component,
 	};
+}
+
+/**
+ * @returns {void}
+ */
+export function push_component() {
+	var component = create_component_ctx();
 	active_component = component;
 }