feat(language-server): Add folding range support for inline styles

atscott · thePunderWoman · commit 26fd0839c32d · 2026-01-12T13:40:37.000-08:00
Adds folding range support for inline styles to the language server
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vscode-ng-language-service/server/package.json b/vscode-ng-language-service/server/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@types/node": "^24.5.2",
     "vscode-html-languageservice": "5.6.1",
+    "vscode-css-languageservice": "6.3.9",
     "vscode-languageserver": "7.0.0",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-uri": "3.1.0"
diff --git a/vscode-ng-language-service/server/src/BUILD.bazel b/vscode-ng-language-service/server/src/BUILD.bazel
@@ -11,6 +11,7 @@ ts_project(
         "//:node_modules/typescript",
         "//vscode-ng-language-service/common",
         "//vscode-ng-language-service/server:node_modules/@types/node",
+        "//vscode-ng-language-service/server:node_modules/vscode-css-languageservice",
         "//vscode-ng-language-service/server:node_modules/vscode-html-languageservice",
         "//vscode-ng-language-service/server:node_modules/vscode-languageserver",
         "//vscode-ng-language-service/server:node_modules/vscode-languageserver-textdocument",
diff --git a/vscode-ng-language-service/server/src/embedded_support.ts b/vscode-ng-language-service/server/src/embedded_support.ts
@@ -42,13 +42,60 @@ export function getHTMLVirtualContent(sf: ts.SourceFile): string {
   return content;
 }
 
+/**
+ * Takes a TS file and strips out all non-inline style content.
+ *
+ * @see {@link getHTMLVirtualContent}
+ */
+export function getSCSSVirtualContent(sf: ts.SourceFile): string {
+  const inlineStyleNodes: ts.Node[] = findAllMatchingNodes(sf, isInlineStyleNode);
+  const documentText = sf.text;
+
+  // Create a blank document with same text length
+  let content = documentText
+    .split('\n')
+    .map((line) => {
+      return ' '.repeat(line.length);
+    })
+    .join('\n');
+
+  // add back all the inline style regions in-place
+  for (const region of inlineStyleNodes) {
+    content =
+      content.slice(0, region.getStart(sf) + 1) +
+      documentText.slice(region.getStart(sf) + 1, region.getEnd() - 1) +
+      content.slice(region.getEnd() - 1);
+  }
+  return content;
+}
+
+function isInlineStyleNode(node: ts.Node) {
+  if (!ts.isStringLiteralLike(node)) {
+    return false;
+  }
+
+  if (isAssignmentToPropertyWithName(node, 'styles')) {
+    return true;
+  }
+
+  if (
+    node.parent &&
+    ts.isArrayLiteralExpression(node.parent) &&
+    isAssignmentToPropertyWithName(node.parent, 'styles')
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function isAssignmentToPropertyWithName(node: ts.Node, propertyName: 'styles' | 'template') {
+  const assignment = getPropertyAssignmentFromValue(node, propertyName);
+  return assignment !== null && getClassDeclFromDecoratorProp(assignment) !== null;
+}
+
 function isInlineTemplateNode(node: ts.Node) {
-  const assignment = getPropertyAssignmentFromValue(node, 'template');
-  return (
-    ts.isStringLiteralLike(node) &&
-    assignment !== null &&
-    getClassDeclFromDecoratorProp(assignment) !== null
-  );
+  return ts.isStringLiteralLike(node) ? isAssignmentToPropertyWithName(node, 'template') : false;
 }
 
 /**
diff --git a/vscode-ng-language-service/server/src/session.ts b/vscode-ng-language-service/server/src/session.ts
@@ -15,6 +15,7 @@ import {
 import * as ts from 'typescript/lib/tsserverlibrary';
 import {promisify} from 'util';
 import {getLanguageService as getHTMLLanguageService} from 'vscode-html-languageservice';
+import {getSCSSLanguageService} from 'vscode-css-languageservice';
 import {TextDocument} from 'vscode-languageserver-textdocument';
 import * as lsp from 'vscode-languageserver/node';
 
@@ -38,7 +39,7 @@ import {
 
 import {readNgCompletionData, tsCompletionEntryToLspCompletionItem} from './completion';
 import {tsDiagnosticToLspDiagnostic} from './diagnostic';
-import {getHTMLVirtualContent} from './embedded_support';
+import {getHTMLVirtualContent, getSCSSVirtualContent} from './embedded_support';
 import {ServerHost} from './server_host';
 import {documentationToMarkdown} from './text_render';
 import {
@@ -84,6 +85,7 @@ const defaultFormatOptions: ts.FormatCodeSettings = {};
 let defaultPreferences: ts.UserPreferences = {};
 
 const htmlLS = getHTMLLanguageService();
+const scssLS = getSCSSLanguageService();
 
 const alwaysSuppressDiagnostics: number[] = [
   // Diagnostics codes whose errors should always be suppressed, regardless of the options
@@ -1059,7 +1061,18 @@ export class Session {
       0,
       virtualHtmlDocContents,
     );
-    return [...htmlLS.getFoldingRanges(virtualHtmlDoc), ...angularFoldingRanges];
+    const virtualScssDocContents = getSCSSVirtualContent(sf);
+    const virtualScssDoc = TextDocument.create(
+      params.textDocument.uri.toString(),
+      'scss',
+      0,
+      virtualScssDocContents,
+    );
+    return [
+      ...htmlLS.getFoldingRanges(virtualHtmlDoc),
+      ...scssLS.getFoldingRanges(virtualScssDoc),
+      ...angularFoldingRanges,
+    ];
   }
 
   private onDefinition(
diff --git a/vscode-ng-language-service/server/src/tests/embedded_support_spec.ts b/vscode-ng-language-service/server/src/tests/embedded_support_spec.ts
@@ -8,7 +8,7 @@
 
 import * as ts from 'typescript';
 
-import {getHTMLVirtualContent} from '../embedded_support';
+import {getHTMLVirtualContent, getSCSSVirtualContent} from '../embedded_support';
 
 function assertEmbeddedHTMLContent(value: string, expectedContent: string): void {
   const sf = ts.createSourceFile('temp', value, ts.ScriptTarget.ESNext, true /* setParentNodes */);
@@ -17,6 +17,13 @@ function assertEmbeddedHTMLContent(value: string, expectedContent: string): void
   expect(virtualContent).toEqual(expectedContent);
 }
 
+function assertEmbeddedSCSSContent(value: string, expectedContent: string): void {
+  const sf = ts.createSourceFile('temp', value, ts.ScriptTarget.ESNext, true /* setParentNodes */);
+  const virtualContent = getSCSSVirtualContent(sf);
+
+  expect(virtualContent).toEqual(expectedContent);
+}
+
 describe('server embedded support', () => {
   it('strips everything but the template string literal', () => {
     assertEmbeddedHTMLContent(
@@ -41,4 +48,24 @@ describe('server embedded support', () => {
     // length and line break locations, our results will be just fine. It doesn't matter that we
     // have an extra whitespace character at the end of the line for folding ranges.
   });
+
+  describe('SCSS support', () => {
+    it('strips everything but the styles string literal', () => {
+      assertEmbeddedSCSSContent(
+        `@Component({styles: ['abc123']}) export class MyCmp`,
+        `                      abc123                       `,
+      );
+    });
+
+    it('can locate multiple style literals', () => {
+      assertEmbeddedSCSSContent(
+        `@Component({styles: ['abc123', 'xyz789']})`,
+        `                      abc123    xyz789    `,
+      );
+    });
+
+    it('can locate direct assignment to styles', () => {
+      assertEmbeddedSCSSContent(`@Component({styles: 'abc123'})`, `                     abc123   `);
+    });
+  });
 });
