ripple 0.2.185 → 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.185",
+  "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.185"
+    "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' */

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)) {

package/src/compiler/phases/3-transform/client/index.js

@@ -1,8 +1,7 @@
-/** @import * as AST from 'estree' */
-/** @import * as ESTreeJSX from 'estree-jsx' */
-/** @import { SourceMapMappings } from '@jridgewell/sourcemap-codec' */
-/** @import * as ESRap from 'esrap' */
 /**
+@import * as AST from 'estree';
+@import * as ESTreeJSX from 'estree-jsx';
+@import { SourceMapMappings } from '@jridgewell/sourcemap-codec';
 @import {
 	AnalysisResult,
 	TransformClientContext,
@@ -14,8 +13,10 @@
 }	from '#compiler';
  */
 
-/** @typedef {Map<number, {offset: number, delta: number}>} PostProcessingChanges */
-/** @typedef {number[]} LineOffsets */
+/**
+@typedef {Map<number, {offset: number, delta: number}>} PostProcessingChanges;
+@typedef {number[]} LineOffsets;
+*/
 
 import { walk } from 'zimmerframe';
 import path from 'node:path';
@@ -2996,7 +2997,7 @@ function create_tsx_with_typescript_support() {
 					context.write(node.computed ? ']: ' : ': ');
 					context.visit(node.value);
 				} else {
-					base_tsx.Property?.(node, /** @type {ESRap.} */ (context));
+					base_tsx.Property?.(node, context);
 				}
 			} else {
 				// Use default handler for non-component properties

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

@@ -1,22 +1,51 @@
 /**
-@import { CustomMappingData, PluginActionOverrides } from 'ripple/compiler';
-@import { DocumentHighlightKind } from 'vscode-languageserver-types';
 @import * as AST from 'estree';
 @import * as ESTreeJSX from 'estree-jsx';
-@import {MappingData, CodeMapping, VolarMappingsResult} from 'ripple/compiler';
-@import {CodeMapping as VolarCodeMapping} from '@volar/language-core';
-*/
+@import { DocumentHighlightKind } from 'vscode-languageserver-types';
+@import { CodeMapping as VolarCodeMapping } from '@volar/language-core';
+@import { SourceMapMappings } from '@jridgewell/sourcemap-codec';
+@import {
+	CustomMappingData,
+	PluginActionOverrides,
+	MappingData,
+	CodeMapping,
+	VolarMappingsResult,
+} from 'ripple/compiler';
+@import { PostProcessingChanges } from './client/index.js';
+ */
 
 /**
- * @typedef {{
- *	start: number,
- *	end: number,
- *	content: string
- * }} CssSourceRegion
+@typedef {{
+	start: number,
+	end: number,
+	content: string,
+	id: string,
+}} CssSourceRegion;
+@typedef {{
+	source: string | null | undefined;
+	generated: string;
+	is_full_import_statement?: boolean;
+	loc: AST.SourceLocation;
+	end_loc?: AST.SourceLocation;
+	metadata?: PluginActionOverrides;
+}} Token;
+@typedef {{
+	name: string,
+	line: number,
+	column: number,
+	offset: number,
+	length: number,
+	sourceOffset: number,
+}} TokenClass
+@typedef {Map<string, AST.Element['metadata']['css']>} CssElementInfo
  */
 
 import { walk } from 'zimmerframe';
-import { build_source_to_generated_map, get_generated_position } from '../../source-map-utils.js';
+import {
+	build_src_to_gen_map,
+	get_generated_position,
+	offset_to_line_col,
+} from '../../source-map-utils.js';
 
 /** @type {VolarCodeMapping['data']} */
 export const mapping_data = {
@@ -28,6 +57,15 @@ export const mapping_data = {
 	format: false,
 };
 
+/**
+ * @param {string} [hash]
+ * @param {string} [fallback]
+ * @returns `style-${hash | fallback}`
+ */
+function get_style_region_id(hash, fallback) {
+	return `style-${hash || fallback}`;
+}
+
 /**
  * Converts line/column positions to byte offsets
  * @param {string} text
@@ -62,47 +100,205 @@ function loc_to_offset(line, column, line_offsets) {
 /**
  * Extract CSS source regions from style elements in the AST
  * @param {AST.Node} ast - The parsed AST
- * @param {string} source - Original source code
- * @param {number[]} source_line_offsets
- * @returns {CssSourceRegion[]}
+ * @param {number[]} src_line_offsets
+ * @param {{
+ * 	regions: CssSourceRegion[],
+ * 	css_element_info: CssElementInfo,
+ * }} param2
+ * @returns {void}
  */
-function extractCssSourceRegions(ast, source, source_line_offsets) {
-	/** @type {CssSourceRegion[]} */
-	const regions = [];
-
+function visit_source_ast(ast, src_line_offsets, { regions, css_element_info }) {
+	let region_id = 0;
 	walk(ast, null, {
-		Element(node) {
+		Element(node, context) {
 			// Check if this is a style element with CSS content
 			if (node.id?.name === 'style' && node.css) {
 				const openLoc = /** @type {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} */ (
 					node.openingElement
 				).loc;
-				const cssStart = loc_to_offset(openLoc.end.line, openLoc.end.column, source_line_offsets);
+				const cssStart = loc_to_offset(openLoc.end.line, openLoc.end.column, src_line_offsets);
 
 				const closeLoc = /** @type {ESTreeJSX.JSXClosingElement & AST.NodeWithLocation} */ (
 					node.closingElement
 				).loc;
-				const cssEnd = loc_to_offset(
-					closeLoc.start.line,
-					closeLoc.start.column,
-					source_line_offsets,
-				);
+				const cssEnd = loc_to_offset(closeLoc.start.line, closeLoc.start.column, src_line_offsets);
 
 				regions.push({
 					start: cssStart,
 					end: cssEnd,
 					content: node.css,
+					id: get_style_region_id(node.metadata.styleScopeHash, `head-${region_id}`),
 				});
 			}
+
+			context.next();
 		},
-	});
+		Attribute(node, context) {
+			const element = context.path?.find((n) => n.type === 'Element');
+			if (element?.metadata?.css?.scopedClasses) {
+				// we don't need to check is_element_dom_element(node)
+				// since scopedClasses are added during pruning only to DOM elements
+				const css = element.metadata.css;
+				const { line, column } = node.value?.loc?.start ?? {};
 
-	return regions;
+				if (line === undefined || column === undefined) {
+					return;
+				}
+
+				css_element_info.set(`${line}:${column}`, css);
+			}
+		},
+	});
 }
 
 /**
- * @import { PostProcessingChanges } from './client/index.js';
+ * Extract individual class names and their offsets from class attribute values
+ * Handles: "foo bar", { foo: true }, ['foo', { bar: true }], etc.
+ *
+ * @param {AST.Node} node - The attribute value node
+ * @param {ReturnType<typeof build_src_to_gen_map>[0]} src_to_gen_map
+ * @param {number[]} gen_line_offsets
+ * @param {number[]} src_line_offsets
+ * @returns {TokenClass[]}
  */
+function extract_classes(node, src_to_gen_map, gen_line_offsets, src_line_offsets) {
+	/** @type {TokenClass[]} */
+	const classes = [];
+
+	switch (node.type) {
+		case 'Literal': {
+			// Static: class="foo bar baz"
+
+			const content = node.raw ?? '';
+			let text = content;
+			let textOffset = 0;
+
+			// Remove quotes
+			if (
+				(content.startsWith(`'`) && content.endsWith(`'`)) ||
+				(content.startsWith(`"`) && content.endsWith(`"`)) ||
+				(content.startsWith('`') && content.endsWith('`'))
+			) {
+				text = content.slice(1, -1);
+				textOffset = 1;
+			}
+
+			// Split by whitespace
+			const classNames = text.split(/\s+/).filter((c) => c.length > 0);
+			const nodeSrcStart = /** @type {AST.Position} */ (node.loc?.start);
+
+			let currentPos = 0;
+			const nodeGenStart = get_generated_position(
+				nodeSrcStart.line,
+				nodeSrcStart.column,
+				src_to_gen_map,
+			);
+			const offset = loc_to_offset(nodeGenStart.line, nodeGenStart.column, gen_line_offsets);
+			const sourceOffset = loc_to_offset(nodeSrcStart.line, nodeSrcStart.column, src_line_offsets);
+
+			for (const name of classNames) {
+				const classStart = text.indexOf(name, currentPos);
+				const classOffset = offset + textOffset + classStart;
+				const classSourceOffset = sourceOffset + textOffset + classStart;
+				const { line, column } = offset_to_line_col(classOffset, gen_line_offsets);
+
+				classes.push({
+					name,
+					line,
+					column,
+					offset: classOffset,
+					length: name.length,
+					sourceOffset: classSourceOffset,
+				});
+
+				currentPos = classStart + name.length;
+			}
+			break;
+		}
+
+		case 'ObjectExpression': {
+			// Dynamic: class={{ foo: true, bar: @show }}
+			for (const prop of node.properties) {
+				if (prop.type === 'Property' && prop.key) {
+					const key = prop.key;
+					if (key.type === 'Identifier' && key.name && key.loc) {
+						const nodeSrcStart = /** @type {AST.Position} */ (key.loc?.start);
+						const nodeGenStart = get_generated_position(
+							nodeSrcStart.line,
+							nodeSrcStart.column,
+							src_to_gen_map,
+						);
+						const offset = loc_to_offset(nodeGenStart.line, nodeGenStart.column, gen_line_offsets);
+						const sourceOffset = loc_to_offset(
+							nodeSrcStart.line,
+							nodeSrcStart.column,
+							src_line_offsets,
+						);
+						const { line, column } = offset_to_line_col(offset, gen_line_offsets);
+
+						classes.push({
+							name: key.name,
+							line,
+							column,
+							offset,
+							length: key.name.length,
+							sourceOffset,
+						});
+					}
+				}
+			}
+			break;
+		}
+
+		case 'ArrayExpression': {
+			// Dynamic: class={['foo', { bar: true }]}
+			for (const el of node.elements) {
+				if (el) {
+					classes.push(...extract_classes(el, src_to_gen_map, gen_line_offsets, src_line_offsets));
+				}
+			}
+			break;
+		}
+
+		case 'ConditionalExpression': {
+			// Conditional: class={@show ? 'active' : 'inactive'}
+			if (node.consequent) {
+				classes.push(
+					...extract_classes(node.consequent, src_to_gen_map, gen_line_offsets, src_line_offsets),
+				);
+			}
+			if (node.alternate) {
+				classes.push(
+					...extract_classes(node.alternate, src_to_gen_map, gen_line_offsets, src_line_offsets),
+				);
+			}
+			break;
+		}
+
+		case 'LogicalExpression': {
+			// Logical: class={[@show && 'active']}
+			if (node.operator === '&&' && node.right) {
+				classes.push(
+					...extract_classes(node.right, src_to_gen_map, gen_line_offsets, src_line_offsets),
+				);
+			} else if (node.operator === '||') {
+				if (node.left) {
+					classes.push(
+						...extract_classes(node.left, src_to_gen_map, gen_line_offsets, src_line_offsets),
+					);
+				}
+				if (node.right) {
+					classes.push(
+						...extract_classes(node.right, src_to_gen_map, gen_line_offsets, src_line_offsets),
+					);
+				}
+			}
+			break;
+		}
+	}
+
+	return classes;
+}
 
 /**
  * Create Volar mappings by walking the transformed AST
@@ -110,7 +306,7 @@ function extractCssSourceRegions(ast, source, source_line_offsets) {
  * @param {AST.Node} ast_from_source - The original AST from source
  * @param {string} source - Original source code
  * @param {string} generated_code - Generated code (returned in output, not used for searching)
- * @param {object} esrap_source_map - Esrap source map for accurate position lookup
+ * @param {SourceMapMappings} source_map - Esrap source map for accurate position lookup
  * @param {PostProcessingChanges } post_processing_changes - Optional post-processing changes
  * @param {number[]} line_offsets - Pre-computed line offsets array for generated code
  * @returns {VolarMappingsResult}
@@ -120,7 +316,7 @@ export function convert_source_map_to_mappings(
 	ast_from_source,
 	source,
 	generated_code,
-	esrap_source_map,
+	source_map,
 	post_processing_changes,
 	line_offsets,
 ) {
@@ -128,7 +324,8 @@ export function convert_source_map_to_mappings(
 	const mappings = [];
 	let isImportDeclarationPresent = false;
 
-	const source_line_offsets = build_line_offsets(source);
+	const src_line_offsets = build_line_offsets(source);
+	const gen_line_offsets = build_line_offsets(generated_code);
 
 	/**
 	 * Convert generated line/column to byte offset using pre-computed line_offsets
@@ -141,25 +338,24 @@ export function convert_source_map_to_mappings(
 		return line_offsets[line - 1] + column;
 	};
 
-	const adjusted_source_map = build_source_to_generated_map(
-		esrap_source_map,
+	const [src_to_gen_map] = build_src_to_gen_map(
+		source_map,
 		post_processing_changes,
 		line_offsets,
+		generated_code,
 	);
 
-	// Collect text tokens from AST nodes
-	// All tokens must have source/generated text and loc property for accurate positioning
-	/**
-	 * @type {Array<{
-	 *		source: string | null | undefined,
-	 *		generated: string,
-	 *		is_full_import_statement?: boolean,
-	 *		loc: AST.SourceLocation,
-	 *		end_loc?: AST.SourceLocation,
-	 *		metadata?: PluginActionOverrides
-	 * }>}
-	 */
+	/** @type {Token[]} */
 	const tokens = [];
+	/** @type {CssSourceRegion[]} */
+	const css_regions = [];
+	/** @type {CssElementInfo} */
+	const css_element_info = new Map();
+
+	visit_source_ast(ast_from_source, src_line_offsets, {
+		regions: css_regions,
+		css_element_info,
+	});
 
 	// We have to visit everything in generated order to maintain correct indices
 
@@ -310,11 +506,65 @@ export function convert_source_map_to_mappings(
 						visit(node.value);
 					}
 				} else {
-					if (node.name) {
-						visit(node.name);
-					}
-					if (node.value) {
-						visit(node.value);
+					const attr =
+						node.name.name === 'class' && node.value?.type === 'JSXExpressionContainer'
+							? node.value.expression
+							: node.value;
+
+					const css = attr
+						? css_element_info.get(`${attr.loc?.start.line}:${attr.loc?.start.column}`)
+						: null;
+
+					if (attr && css) {
+						// Extract class names from the attribute value
+						const classes = extract_classes(
+							attr,
+							src_to_gen_map,
+							gen_line_offsets,
+							src_line_offsets,
+						);
+
+						// For each class name, look up CSS location and create token
+						for (const { name, line, column, offset, sourceOffset, length } of classes) {
+							const cssLocation = css.scopedClasses.get(name);
+
+							if (!cssLocation) {
+								continue;
+							}
+
+							mappings.push({
+								sourceOffsets: [sourceOffset],
+								generatedOffsets: [offset],
+								lengths: [length],
+								data: {
+									...mapping_data,
+									customData: {
+										generatedLengths: [length],
+										hover: {
+											contents:
+												'```css\n.' +
+												name +
+												'\n```\n\nCSS class selector.\n\nUse **Cmd+Click** (macOS) or **Ctrl+Click** (Windows/Linux) to navigate to its definition.',
+										},
+										definition: {
+											description: `CSS class selector for '.${name}'`,
+											location: {
+												embeddedId: get_style_region_id(css.hash),
+												start: cssLocation.start,
+												end: cssLocation.end,
+											},
+										},
+									},
+								},
+							});
+						}
+					} else {
+						if (node.name) {
+							visit(node.name);
+						}
+						if (node.value) {
+							visit(node.value);
+						}
 					}
 				}
 				return;
@@ -1377,7 +1627,7 @@ export function convert_source_map_to_mappings(
 		const source_start = loc_to_offset(
 			token.loc.start.line,
 			token.loc.start.column,
-			source_line_offsets,
+			src_line_offsets,
 		);
 
 		let source_length = source_text.length;
@@ -1389,15 +1639,15 @@ export function convert_source_map_to_mappings(
 
 		if (token.is_full_import_statement) {
 			const end_loc = /** @type {AST.SourceLocation} */ (token.end_loc).end;
-			const source_end = loc_to_offset(end_loc.line, end_loc.column, source_line_offsets);
+			const source_end = loc_to_offset(end_loc.line, end_loc.column, src_line_offsets);
 
 			// Look up where import keyword and source literal map to in generated code
 			const gen_start_pos = get_generated_position(
 				token.loc.start.line,
 				token.loc.start.column,
-				adjusted_source_map,
+				src_to_gen_map,
 			);
-			const gen_end_pos = get_generated_position(end_loc.line, end_loc.column, adjusted_source_map);
+			const gen_end_pos = get_generated_position(end_loc.line, end_loc.column, src_to_gen_map);
 
 			gen_start = gen_loc_to_offset(gen_start_pos.line, gen_start_pos.column);
 			const gen_end = gen_loc_to_offset(gen_end_pos.line, gen_end_pos.column);
@@ -1418,7 +1668,7 @@ export function convert_source_map_to_mappings(
 			const gen_line_col = get_generated_position(
 				token.loc.start.line,
 				token.loc.start.column,
-				adjusted_source_map,
+				src_to_gen_map,
 			);
 			gen_start = gen_loc_to_offset(gen_line_col.line, gen_line_col.column);
 
@@ -1479,10 +1729,11 @@ export function convert_source_map_to_mappings(
 		});
 	}
 
-	/** @type {{ cssMappings: CodeMapping[], cssSources: string[] }} */
-	const cssResult = { cssMappings: [], cssSources: [] };
-	for (const region of extractCssSourceRegions(ast_from_source, source, source_line_offsets)) {
-		cssResult.cssMappings.push({
+	/** @type {CodeMapping[]} */
+	const cssMappings = [];
+	for (let i = 0; i < css_regions.length; i++) {
+		const region = css_regions[i];
+		cssMappings.push({
 			sourceOffsets: [region.start],
 			generatedOffsets: [0],
 			lengths: [region.content.length],
@@ -1490,16 +1741,16 @@ export function convert_source_map_to_mappings(
 				...mapping_data,
 				customData: {
 					generatedLengths: [region.content.length],
+					embeddedId: region.id,
+					content: region.content,
 				},
 			},
 		});
-
-		cssResult.cssSources.push(region.content);
 	}
 
 	return {
 		code: generated_code,
 		mappings,
-		...cssResult,
+		cssMappings,
 	};
 }

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

@@ -1,20 +1,22 @@
-/** @import * as AST from 'estree' */
-/** @import { Visitors } from 'zimmerframe' */
+/**
+@import * as AST from 'estree';
+@import { Visitors } from '#compiler';
+ */
 
 /**
- * @typedef {{
- *   code: MagicString;
- *   hash: string;
- *   minify: boolean;
- *   selector: string;
- *   keyframes: Record<string, {
- *     indexes: number[];
- *     local: boolean | undefined;
- *   }>;
- *   specificity: {
- *     bumped: boolean
- *   }
- * }} State
+@typedef {{
+  code: MagicString;
+  hash: string;
+  minify: boolean;
+  selector: string;
+  keyframes: Record<string, {
+    indexes: number[];
+    local: boolean | undefined;
+  }>;
+  specificity: {
+    bumped: boolean
+  }
+}} State
  */
 
 import MagicString from 'magic-string';

package/src/compiler/source-map-utils.js

@@ -1,9 +1,56 @@
 import { decode } from '@jridgewell/sourcemap-codec';
 
-/** @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js' */
+/**
+@import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js';
+@import * as AST from 'estree';
+*/
+
+/**
+@typedef {{
+	line: number,
+	column: number,
+	end_line: number,
+	end_column: number,
+	code: string,
+	metadata: {
+		css?: AST.Element['metadata']['css']
+	},
+}} CodePosition
+
+@typedef {Map<string, CodePosition[]>} CodeToGeneratedMap
+@typedef {Map<string, {line: number, column: number}[]>} GeneratedToSourceMap
+*/
+
+/**
+ * Convert byte offset to line/column
+ * @param {number} offset
+ * @param {LineOffsets} line_offsets
+ * @returns {{ line: number, column: number }}
+ */
+export const offset_to_line_col = (offset, line_offsets) => {
+	// Binary search
+	let left = 0;
+	let right = line_offsets.length - 1;
+	let line = 1;
+
+	while (left <= right) {
+		const mid = Math.floor((left + right) / 2);
+		if (
+			offset >= line_offsets[mid] &&
+			(mid === line_offsets.length - 1 || offset < line_offsets[mid + 1])
+		) {
+			line = mid + 1;
+			break;
+		} else if (offset < line_offsets[mid]) {
+			right = mid - 1;
+		} else {
+			left = mid + 1;
+		}
+	}
 
-/** @typedef {{line: number, column: number}} GeneratedPosition */
-/** @typedef {Map<string, GeneratedPosition[]>} SourceToGeneratedMap */
+	const column = offset - line_offsets[line - 1];
+	return { line, column };
+};
 
 /**
  * Build a source-to-generated position lookup map from an esrap source map
@@ -11,11 +58,19 @@ import { decode } from '@jridgewell/sourcemap-codec';
  * @param {object} source_map - The source map object from esrap (v3 format)
  * @param {PostProcessingChanges} post_processing_changes - Optional post-processing changes to apply
  * @param {LineOffsets} line_offsets - Pre-computed line offsets array
- * @returns {SourceToGeneratedMap} Map from "sourceLine:sourceColumn" to array of generated positions
+ * @param {string} generated_code - The final generated code (after post-processing)
+ * @returns {[CodeToGeneratedMap, GeneratedToSourceMap]} Tuple of [source-to-generated map, generated-to-source map]
  */
-export function build_source_to_generated_map(source_map, post_processing_changes, line_offsets) {
-	/** @type {SourceToGeneratedMap} */
+export function build_src_to_gen_map(
+	source_map,
+	post_processing_changes,
+	line_offsets,
+	generated_code,
+) {
+	/** @type {CodeToGeneratedMap} */
 	const map = new Map();
+	/** @type {GeneratedToSourceMap} */
+	const reverse_map = new Map();
 
 	// Decode the VLQ-encoded mappings string
 	// @ts-ignore
@@ -31,101 +86,120 @@ export function build_source_to_generated_map(source_map, post_processing_change
 		return line_offsets[line - 1] + column;
 	};
 
-	/**
-	 * Convert byte offset to line/column
-	 * @param {number} offset
-	 * @returns {{ line: number, column: number }}
-	 */
-	const offset_to_line_col = (offset) => {
-		// Binary search
-		let left = 0;
-		let right = line_offsets.length - 1;
-		let line = 1;
-
-		while (left <= right) {
-			const mid = Math.floor((left + right) / 2);
-			if (
-				offset >= line_offsets[mid] &&
-				(mid === line_offsets.length - 1 || offset < line_offsets[mid + 1])
-			) {
-				line = mid + 1;
-				break;
-			} else if (offset < line_offsets[mid]) {
-				right = mid - 1;
-			} else {
-				left = mid + 1;
-			}
-		}
-
-		const column = offset - line_offsets[line - 1];
-		return { line, column };
-	};
+	// Apply post-processing adjustments to all segments first
+	/** @type {Array<Array<{line: number, column: number, sourceLine: number, sourceColumn: number}>>} */
+	const adjusted_segments = [];
 
-	// decoded is an array of lines, each line is an array of segments
-	// Each segment is [generatedColumn, sourceIndex, sourceLine, sourceColumn, nameIndex?]
 	for (let generated_line = 0; generated_line < decoded.length; generated_line++) {
 		const line = decoded[generated_line];
+		adjusted_segments[generated_line] = [];
 
 		for (const segment of line) {
 			if (segment.length >= 4) {
-				let generated_column = segment[0];
-				// just keeping this unused for context
-				// const source_index = segment[1]; // which source file (we only have one)
-				const source_line = /** @type {number} */ (segment[2]);
-				const source_column = /** @type {number} */ (segment[3]);
-
-				// Apply post-processing adjustments if needed
 				let adjusted_line = generated_line + 1;
-				let adjusted_column = generated_column;
+				let adjusted_column = segment[0];
 
 				if (post_processing_changes) {
 					const line_change = post_processing_changes.get(adjusted_line);
 
 					if (line_change) {
-						// Check if this position is affected by the change
 						const pos_offset = line_col_to_byte_offset(adjusted_line, adjusted_column);
 
 						if (pos_offset >= line_change.offset) {
-							// Position is on or after the change - apply delta
 							const adjusted_offset = pos_offset + line_change.delta;
-							const adjusted_pos = offset_to_line_col(adjusted_offset);
+							const adjusted_pos = offset_to_line_col(adjusted_offset, line_offsets);
 							adjusted_line = adjusted_pos.line;
 							adjusted_column = adjusted_pos.column;
 						}
 					}
 				}
 
-				// Create key from source position (1-indexed line, 0-indexed column)
-				const key = `${source_line + 1}:${source_column}`;
+				adjusted_segments[generated_line].push({
+					line: adjusted_line,
+					column: adjusted_column,
+					sourceLine: /** @type {number} */ (segment[2]),
+					sourceColumn: /** @type {number} */ (segment[3]),
+				});
+			}
+		}
+	}
+
+	// Now build the map using adjusted positions
+	for (let line_idx = 0; line_idx < adjusted_segments.length; line_idx++) {
+		const line_segments = adjusted_segments[line_idx];
+
+		for (let seg_idx = 0; seg_idx < line_segments.length; seg_idx++) {
+			const segment = line_segments[seg_idx];
+			const line = segment.line;
+			const column = segment.column;
+
+			// Determine end position using next segment
+			let end_line = line;
+			let end_column = column;
+
+			// Look for next segment to determine end position
+			if (seg_idx + 1 < line_segments.length) {
+				// Next segment on same line
+				const next_segment = line_segments[seg_idx + 1];
+				end_line = next_segment.line;
+				end_column = next_segment.column;
+			} else if (
+				line_idx + 1 < adjusted_segments.length &&
+				adjusted_segments[line_idx + 1].length > 0
+			) {
+				// Look at first segment of next line
+				const next_segment = adjusted_segments[line_idx + 1][0];
+				end_line = next_segment.line;
+				end_column = next_segment.column;
+			}
+
+			// Extract code snippet
+			const start_offset = line_col_to_byte_offset(line, column);
+			const end_offset = line_col_to_byte_offset(end_line, end_column);
+			const code_snippet = generated_code.slice(start_offset, end_offset);
 
-				// Store adjusted generated position
-				const gen_pos = { line: adjusted_line, column: adjusted_column };
+			// Create key from source position (1-indexed line, 0-indexed column)
+			segment.sourceLine += 1;
+			const key = `${segment.sourceLine}:${segment.sourceColumn}`;
 
-				if (!map.has(key)) {
-					map.set(key, []);
-				}
-				/** @type {GeneratedPosition[]} */ (map.get(key)).push(gen_pos);
+			// Store adjusted generated position with code snippet
+			const gen_pos = { line, column, end_line, end_column, code: code_snippet, metadata: {} };
+
+			if (!map.has(key)) {
+				map.set(key, []);
+			}
+			/** @type {CodePosition[]} */ (map.get(key)).push(gen_pos);
+
+			// Store reverse mapping (generated to source)
+			const gen_key = `${gen_pos.line}:${gen_pos.column}`;
+
+			if (!reverse_map.has(gen_key)) {
+				reverse_map.set(gen_key, []);
 			}
+			reverse_map.get(gen_key)?.push({
+				line: segment.sourceLine,
+				column: segment.sourceColumn,
+			});
 		}
 	}
 
-	return map;
+	return [map, reverse_map];
 }
 
 /**
  * Look up generated position for a given source position
- * @param {number} source_line - 1-based line number in source
- * @param {number} source_column - 0-based column number in source
- * @param {SourceToGeneratedMap} source_to_gen_map - Lookup map
- * @returns {{line: number, column: number}} Generated position
+ * @param {number} src_line - 1-based line number in source
+ * @param {number} src_column - 0-based column number in source
+ * @param {CodeToGeneratedMap} src_to_gen_map - Lookup map
+ * @returns {CodePosition} Generated position
  */
-export function get_generated_position(source_line, source_column, source_to_gen_map) {
-	const key = `${source_line}:${source_column}`;
-	const positions = source_to_gen_map.get(key);
+export function get_generated_position(src_line, src_column, src_to_gen_map) {
+	const key = `${src_line}:${src_column}`;
+	const positions = src_to_gen_map.get(key);
 
 	if (!positions || positions.length === 0) {
 		// No mapping found in source map - this shouldn't happen since all tokens should have mappings
-		throw new Error(`No source map entry for position "${source_line}:${source_column}"`);
+		throw new Error(`No source map entry for position "${src_line}:${src_column}"`);
 	}
 
 	// If multiple generated positions map to same source, return the first

package/src/compiler/types/index.d.ts

@@ -226,6 +226,28 @@ declare module 'estree' {
 		loc: SourceLocation;
 		metadata: BaseNodeMetaData & {
 			ts_name?: string;
+			// for <style> tag
+			styleScopeHash?: string;
+			// for elements with scoped style classes
+			css?: {
+				scopedClasses: Map<
+					string,
+					{
+						start: number;
+						end: number;
+						selector: CSS.ClassSelector;
+					}
+				>;
+				topScopedClasses: Map<
+					string,
+					{
+						start: number;
+						end: number;
+						selector: CSS.ClassSelector;
+					}
+				>;
+				hash: string;
+			};
 		};
 
 		// currently only for <style> and <script> tags

package/src/compiler/types/parse.d.ts

@@ -56,6 +56,12 @@ declare module 'zimmerframe' {
 		state: any,
 		visitors: RippleCompiler.Visitors<AST.Node, any>,
 	): AST.Node;
+
+	export function walk(
+		node: AST.CSS.Node,
+		state: any,
+		visitors: RippleCompiler.Visitors<(AST.CSS.Node), any>,
+	): AST.CSS.Node;
 }
 
 export namespace Parse {

package/src/compiler/utils.js

@@ -1,5 +1,7 @@
-/** @import { CommonContext, NameSpace, ScopeInterface } from '#compiler' */
-/** @import * as AST from 'estree' */
+/**
+@import * as AST from 'estree';
+@import { CommonContext, NameSpace, ScopeInterface } from '#compiler';
+ */
 
 import { build_assignment_value, extract_paths } from '../utils/ast.js';
 import * as b from '../utils/builders.js';