fix(language-plugin-pug): compute offset correctly of pug class (#4652)

Author: KazariEX

packages/language-core/lib/codegen/template/element.ts

@@ -614,22 +614,40 @@ function* generateReferencesForScopedCssClasses(
 			&& prop.name === 'class'
 			&& prop.value
 		) {
-			let startOffset = prop.value.loc.start.offset;
-			let content = prop.value.loc.source;
-			let isWrapped = false;
-			if (
-				(content.startsWith(`'`) && content.endsWith(`'`))
-				|| (content.startsWith(`"`) && content.endsWith(`"`))
-			) {
-				content = content.slice(1, -1);
-				isWrapped = true;
-			}
-			if (content) {
-				const classes = collectClasses(content, startOffset + (isWrapped ? 1 : 0));
-				ctx.scopedClasses.push(...classes);
+			if (options.template.lang === 'pug') {
+				const getClassOffset = Reflect.get(prop.value.loc.start, 'getClassOffset') as (offset: number) => number;
+				const content = prop.value.loc.source.slice(1, -1);
+
+				let startOffset = 1;
+				for (const className of content.split(' ')) {
+					if (className) {
+						ctx.scopedClasses.push({
+							source: 'template',
+							className,
+							offset: getClassOffset(startOffset),
+						});
+					}
+					startOffset += className.length + 1;
+				}
 			}
 			else {
-				ctx.emptyClassOffsets.push(startOffset);
+				let startOffset = prop.value.loc.start.offset;
+				let content = prop.value.loc.source;
+				let isWrapped = false;
+				if (
+					(content.startsWith(`'`) && content.endsWith(`'`))
+					|| (content.startsWith(`"`) && content.endsWith(`"`))
+				) {
+					content = content.slice(1, -1);
+					isWrapped = true;
+				}
+				if (content) {
+					const classes = collectClasses(content, startOffset + (isWrapped ? 1 : 0));
+					ctx.scopedClasses.push(...classes);
+				}
+				else {
+					ctx.emptyClassOffsets.push(startOffset);
+				}
 			}
 		}
 		else if (

packages/language-plugin-pug/index.ts

@@ -37,13 +37,18 @@ const plugin: VueLanguagePlugin = ({ modules }) => {
 						const proxys = new WeakMap();
 						return new Proxy(target, {
 							get(target, prop, receiver) {
+								if (prop === 'getClassOffset') {
+									// div.foo#baz.bar
+									//     ^^^     ^^^
+									// class=" foo bar"
+									//         ^^^ ^^^
+									// NOTE: we need to expose source offset getter
+									return function(startOffset: number) {
+										return getOffset(target.offset + startOffset);
+									};
+								}
 								if (prop === 'offset') {
-									const htmlOffset = target.offset;
-									const nums: number[] = [];
-									for (const mapped of map.toSourceLocation(htmlOffset)) {
-										nums.push(mapped[0]);
-									}
-									return Math.max(-1, ...nums);
+									return getOffset(target.offset);
 								}
 								const value = Reflect.get(target, prop, receiver);
 								if (typeof value === 'object' && value !== null) {
@@ -59,6 +64,15 @@ const plugin: VueLanguagePlugin = ({ modules }) => {
 							}
 						});
 					}
+
+					function getOffset(offset: number) {
+						const htmlOffset = offset;
+						const nums: number[] = [];
+						for (const mapped of map.toSourceLocation(htmlOffset)) {
+							nums.push(mapped[0]);
+						}
+						return Math.max(-1, ...nums);
+					}
 				}
 			}
 		},