Skip to content

WIP: inline template/style bridge hardening and scoped style references#67266

Draft
kbrilla wants to merge 7 commits intoangular:mainfrom
kbrilla:lsp-inline-styles-support
Draft

WIP: inline template/style bridge hardening and scoped style references#67266
kbrilla wants to merge 7 commits intoangular:mainfrom
kbrilla:lsp-inline-styles-support

Conversation

@kbrilla
Copy link
Contributor

@kbrilla kbrilla commented Feb 25, 2026

Scope and Branch Position

  • Built on top of feat/document-symbols-templates as a stacked branch for iteration speed.
  • This PR is intentionally scoped to inline template/style bridge behavior in the VS Code integration layer.
  • Before final merge, this branch should be rebased/split so inline-style bridge changes can be reviewed independently.

Exact Feature Additions (one by one)

  • Inline-style Definition bridge.
    Example: on $color usage inside @Component({ styles: [...] }), vscode.executeDefinitionProvider runs on the scoped virtual style document and returns a definition remapped to the source app.component.ts declaration ($color: #ff0000;).

  • Inline-style References bridge with same-block scoping.
    Example: on $color in the first style block, vscode.executeReferenceProvider returns declaration+usage in that block; on $color in the second block, results stay in that second block and do not leak to the first block.

  • Inline-style Document Symbols merge into TS symbols.
    Example: vscode.executeDocumentSymbolProvider output includes (styles) containers for each inline style block, with child symbols such as .red and .blue, and ranges mapped to source .ts positions.

  • Inline-style Selection Range bridge.
    Example: vscode.executeSelectionRangeProvider on $color positions from two separate inline style blocks returns two independent selection chains, each anchored to its own source TS range.

  • Inline-style Document Color bridge.
    Example: vscode.executeDocumentColorProvider returns a color info for #ff0000 in inline styles with the range mapped to the source .ts file, and does not report color ranges from template text.

  • Inline-style Color Presentation bridge with normalized edits.
    Example: vscode.executeColorPresentationProvider returns presentations whose textEdit.range is normalized to the original inline-style source range; when no provider presentation is returned, a fallback RGB presentation is produced for that range.

  • Inline-style Code Action bridge with source remap.
    Example: quick fix for SCSS typo dispay is provided through vscode.executeCodeActionProvider, and resulting WorkspaceEdit entries are remapped to app.component.ts with the expected replacement display at the original typo range.

  • Inline-style Prepare Rename + Rename bridge.
    Example: vscode.prepareRename and vscode.executeDocumentRenameProvider run against the scoped virtual style document, then remap resulting rename ranges/edits back to source TypeScript URIs/ranges.

  • Inline-style Document Highlights bridge (explicit provider path).
    Example: for $color in the first style block, vscode.executeDocumentHighlights returns two highlights (declaration + first usage) mapped to source TS ranges and excludes the $color occurrence in the second style block; fallback uses vscode.executeReferenceProvider when highlight results are empty.

Strict E2E Command and Result

  • Command: pnpm bazel test //vscode-ng-language-service/integration/e2e:test --test_output=errors --test_env=PATH=/opt/X11/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin --nocache_test_results
  • Result: PASSED (//vscode-ng-language-service/integration/e2e:test, 1/1 target).

Disclosure

  • AI disclosure: AI-assisted implementation and PR drafting, orchestrated by the user.

…ettings grouping

Add shared workspace configuration helper utilities and move extension settings to grouped configuration sections, without inlay-hint feature options yet.
…lates

Adds comprehensive Document Symbols support for Angular templates, enabling the
Outline panel, breadcrumbs navigation, and 'Go to Symbol' (Cmd+Shift+O /
Ctrl+Shift+O) features to work with Angular template syntax.

Features:
- Block syntax: @if, @else, @for, @switch, @case, @defer, @Placeholder, etc.
- Structural directives: *ngIf, *ngFor, *ngSwitch, etc.
- HTML elements and components
- Template reference variables (#ref)
- Loop variables and aliases (let item, let i = $index)
- @let declarations

For TypeScript files with inline templates, shows component class containers
with template symbols nested inside (no TypeScript methods/properties shown).
For external HTML templates, shows template symbols at root level.

Configuration:
- angular.documentSymbols.enabled: Enable/disable feature (default: true)
- angular.documentSymbols.showImplicitForVariables: Show implicit @for variables

Depends on workspace/configuration utilities from the previous commit.

Closes angular#66691
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: vscode-extension Issues related to the Angular Language Service VsCode extension area: language-service Issues related to Angular's VS Code language service labels Feb 25, 2026
@ngbot ngbot bot added this to the Backlog milestone Feb 25, 2026
@kbrilla kbrilla force-pushed the lsp-inline-styles-support branch 2 times, most recently from 8763e1c to 5be1ffc Compare February 25, 2026 08:49
…bridges

Move non-code-action inline-style bridge flows off untitled documents by using virtual/file-backed SCSS documents and source remapping, while preserving feature behavior. Also auto-close mapped inline-style untitled tabs if they become visible.
Add integration coverage that inline-style bridge commands do not create newly visible untitled tabs, and keep fixture coverage for command bridge scenarios.
@kbrilla kbrilla force-pushed the lsp-inline-styles-support branch from 5be1ffc to 3222b6f Compare February 25, 2026 09:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: language-service Issues related to Angular's VS Code language service area: vscode-extension Issues related to the Angular Language Service VsCode extension detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant