ripple 0.2.184 → 0.2.186

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.184",
+  "version": "0.2.186",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -86,6 +86,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.184"
+    "ripple": "0.2.186"
   }
 }

package/src/compiler/index.d.ts

@@ -24,6 +24,12 @@ export interface CompileResult {
 	css: string;
 }
 
+export interface DefinitionLocation {
+	embeddedId: string; // e.g., 'style_0', 'style_1'
+	start: number; // start offset
+	end: number; // end offset
+}
+
 export interface PluginActionOverrides {
 	/** Whether to enable word document highlighting for this mapping */
 	wordHighlight?: {
@@ -40,13 +46,17 @@ export interface PluginActionOverrides {
 	/** Custom definition info for this mapping, false to disable */
 	definition?:
 		| {
-				description: string;
+				description?: string; // just for reference
+				// Generic location for embedded content (CSS, etc.)
+				location?: DefinitionLocation;
 		  }
 		| false;
 }
 
 export interface CustomMappingData extends PluginActionOverrides {
 	generatedLengths: number[];
+	embeddedId?: string; // e.g. css regions: 'style_0', 'style_1', etc.
+	content?: string; // (e.g., css code)
 }
 
 export interface MappingData extends VolarCodeInformation {
@@ -61,7 +71,6 @@ export interface VolarMappingsResult {
 	code: string;
 	mappings: CodeMapping[];
 	cssMappings: CodeMapping[];
-	cssSources: string[];
 }
 
 /**

package/src/compiler/phases/1-parse/index.js

@@ -1,13 +1,10 @@
-/** @import * as AST from 'estree' */
-/** @import * as ESTreeJSX from 'estree-jsx' */
-/** @import { Parse } from '#parser' */
-
 /**
- * @import {
- *   RipplePluginConfig
- * } from '#compiler' */
-
-/** @import { ParseOptions } from 'ripple/compiler' */
+@import * as AST from 'estree'
+@import * as ESTreeJSX from 'estree-jsx'
+@import { Parse } from '#parser'
+@import { RipplePluginConfig } from '#compiler';
+@import { ParseOptions } from 'ripple/compiler'
+ */
 
 import * as acorn from 'acorn';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
@@ -1741,6 +1738,7 @@ function RipplePlugin(config) {
 								throw new Error('Components can only have one style tag');
 							}
 							component.css = parsed_css;
+							/** @type {AST.Element} */ (element).metadata.styleScopeHash = parsed_css.hash;
 						}
 
 						const newLines = content.match(regex_newline_characters)?.length;
@@ -2167,6 +2165,7 @@ function RipplePlugin(config) {
  * @param {string} source
  * @param {AST.CommentWithLocation[]} comments
  * @param {number} [index=0] - Starting index
+ * @returns {{onComment: Parse.Options['onComment'], add_comments: (ast: AST.Node) => void}}
  */
 function get_comment_handlers(source, comments, index = 0) {
 	/**
@@ -2230,11 +2229,7 @@ function get_comment_handlers(source, comments, index = 0) {
 					context,
 				}));
 
-			/**
-			 *  @param {AST.Node} ast
-			 */
 			walk(ast, null, {
-				/** @param {AST.Node} node */
 				_(node, { next, path }) {
 					const metadata = node?.metadata;
 

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

@@ -41,7 +41,7 @@ function is_global(relative_selector) {
 export function analyze_css(css) {
 	walk(
 		css,
-		{ rule: /** @type {AST.CSS.Rule | null} */ (null) },
+		/** @type {{ rule: AST.CSS.Rule | null }} */ ({ rule: null }),
 		{
 			Rule(node, context) {
 				node.metadata.parent_rule = context.state.rule;
@@ -90,7 +90,7 @@ export function analyze_css(css) {
 				// Set the rule metadata before analyzing children
 				node.metadata.rule = context.state.rule;
 
-				context.next(); // analyse relevant selectors first
+				context.next(); // analyze relevant selectors first
 
 				{
 					const global = node.children.find(is_global);

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

@@ -6,7 +6,6 @@
 	AnalysisContext,
 	ScopeInterface,
 	Visitors,
-	Visitor,
 } from '#compiler';
  */
 /** @import * as AST from 'estree' */
@@ -423,6 +422,11 @@ const visitors = {
 		context.visit(node.discriminant, context.state);
 
 		for (const switch_case of node.cases) {
+			// Fallthrough
+			if (switch_case.consequent.length === 0) {
+				continue;
+			}
+
 			// Validate that each cases ends in a break statement, except for the last case
 			const last = switch_case.consequent?.[switch_case.consequent.length - 1];
 

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

@@ -5,13 +5,17 @@
 import { walk } from 'zimmerframe';
 import { is_element_dom_element } from '../../utils.js';
 
-const seen = new Set();
 const regex_backslash_and_following_character = /\\(.)/g;
 /** @type {Direction} */
 const FORWARD = 0;
 /** @type {Direction} */
 const BACKWARD = 1;
 
+// this will be set for every prune_css call
+// since the code is synchronous, this is safe
+/** @type {string} */
+let css_hash;
+
 // CSS selector constants
 /**
  * @param {number} start
@@ -196,6 +200,47 @@ function apply_selector(relative_selectors, rule, element, direction) {
 	if (matched) {
 		if (!is_outer_global(relative_selector)) {
 			relative_selector.metadata.scoped = true;
+
+			// Store scoped class information on element for language server features
+			if (!relative_selector.metadata.is_global && !relative_selector.metadata.is_global_like) {
+				// Extract class selectors from the relative selector
+				for (const selector of relative_selector.selectors) {
+					if (selector.type === 'ClassSelector') {
+						const name = selector.name.replace(regex_backslash_and_following_character, '$1');
+
+						if (!element.metadata.css) {
+							element.metadata.css = {
+								scopedClasses: new Map(),
+								topScopedClasses: new Map(),
+								hash: css_hash,
+							};
+						}
+
+						// Store class name → CSS location in scopedClasses
+						if (!element.metadata.css.scopedClasses.has(name)) {
+							element.metadata.css.scopedClasses.set(name, {
+								start: selector.start,
+								end: selector.end,
+								selector: selector,
+							});
+						}
+
+						// Also store in topScopedClasses if standalone
+						// Standalone = only this ClassSelector in the RelativeSelector, no pseudo-classes/elements
+						const isStandalone =
+							relative_selector.selectors.length === 1 &&
+							relative_selector.selectors[0] === selector;
+
+						if (isStandalone && !element.metadata.css.topScopedClasses.has(name)) {
+							element.metadata.css.topScopedClasses.set(name, {
+								start: selector.start,
+								end: selector.end,
+								selector: selector,
+							});
+						}
+					}
+				}
+			}
 		}
 
 		element.metadata.scoped = true;
@@ -1005,6 +1050,8 @@ function rule_has_animation(rule) {
  * @return {void}
  */
 export function prune_css(css, element) {
+	css_hash = css.hash;
+
 	/** @type {Visitors<AST.CSS.Node, null>} */
 	const visitors = {
 		Rule(node, context) {
@@ -1017,8 +1064,6 @@ export function prune_css(css, element) {
 		ComplexSelector(node, context) {
 			const selectors = get_relative_selectors(node);
 
-			seen.clear();
-
 			const rule = /** @type {AST.CSS.Rule} */ (node.metadata.rule);
 
 			if (apply_selector(selectors, rule, element, BACKWARD) || rule_has_animation(rule)) {