Skip to content
This repository was archived by the owner on Nov 21, 2025. It is now read-only.

Commit bc6e1ff

Browse files
atscottatscott
authored
feat(syntaxes): Support inline styles as string (#1921)
* feat(syntaxes): Support inline styles as string angular/angular@59387ee The above commit added support for inline styles to be a single string literal in addition to the previous array of strings. This commit updates the syntaxes regex of the extension to support this feature. * feat(language-service): Enable go to definition for styleUrl The client code has an optimization which skips making requests to the server for Angular results when the position is outside a context that Angular would be interested in. This commit adds the 'styleUrl' property to those properties of interest.
1 parent c44ce9d commit bc6e1ff

File tree

7 files changed

+71
-7
lines changed

7 files changed

+71
-7
lines changed

‎client/src/client.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import * as lsp from 'vscode-languageclient/node';
1313

1414
import {OpenOutputChannel, ProjectLoadingFinish, ProjectLoadingStart, SuggestStrictMode, SuggestStrictModeParams} from '../../common/notifications';
1515
import {GetComponentsWithTemplateFile, GetTcbRequest, GetTemplateLocationForComponent, IsInAngularProject} from '../../common/requests';
16-
import {resolve, Version} from '../../common/resolver';
1716

1817
import {isInsideComponentDecorator, isInsideInlineTemplateRegion, isInsideStringLiteral} from './embedded_support';
1918

‎client/src/embedded_support.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ export function isInsideComponentDecorator(
2525
return true;
2626
}
2727
return isPropertyAssignmentToStringOrStringInArray(
28-
document.getText(), document.offsetAt(position), ['template', 'templateUrl', 'styleUrls']);
28+
document.getText(), document.offsetAt(position),
29+
['template', 'templateUrl', 'styleUrls', 'styleUrl']);
2930
}
3031

3132
/**
@@ -118,4 +119,4 @@ function isPropertyAssignmentToStringOrStringInArray(
118119
function isPropertyAssignmentTerminator(token: ts.SyntaxKind) {
119120
return token === ts.SyntaxKind.EndOfFileToken || token === ts.SyntaxKind.CommaToken ||
120121
token === ts.SyntaxKind.SemicolonToken || token === ts.SyntaxKind.CloseBraceToken;
121-
}
122+
}

‎syntaxes/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Snapshot test cases are specified in [test/cases.json](./test/cases.json).
4141
Snapshot golden files can be updated by running
4242

4343
```bash
44-
yarn test:syntaxes -u
44+
yarn test:legacy-syntaxes -u
4545
```
4646

4747
in the root directory of this repository. Goldens must be updated when a new

‎syntaxes/inline-styles.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
},
2525
{
2626
"include": "#tsBracketExpression"
27+
},
28+
{
29+
"include": "#style"
2730
}
2831
]
2932
},
@@ -46,6 +49,9 @@
4649
},
4750
{
4851
"include": "#tsBracketExpression"
52+
},
53+
{
54+
"include": "#style"
4955
}
5056
]
5157
},

‎syntaxes/src/inline-styles.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,16 @@ export const InlineStyles: GrammarDefinition = {
2020
2: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'}
2121
},
2222
end: /(?=,|})/,
23-
patterns: [{include: '#tsParenExpression'}, {include: '#tsBracketExpression'}]
23+
patterns:
24+
[{include: '#tsParenExpression'}, {include: '#tsBracketExpression'}, {include: '#style'}]
2425
},
2526

2627
tsParenExpression: {
2728
begin: /\G\s*(\()/,
2829
beginCaptures: {1: {name: 'meta.brace.round.ts'}},
2930
end: /\)/,
3031
endCaptures: {0: {name: 'meta.brace.round.ts'}},
31-
patterns: [{include: '$self'}, {include: '#tsBracketExpression'}]
32+
patterns: [{include: '$self'}, {include: '#tsBracketExpression'}, {include: '#style'}]
3233
},
3334

3435
'tsBracketExpression': {

‎syntaxes/test/data/inline-styles.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,10 @@
1717

1818
//// Parenthesization tests
1919
styles: ( (( [ ( '.example { width: 100px; }' ) ] )) ),
20+
//// styles string
21+
styles: ( (( ( '.example { width: 100px; }' ) )) ),
22+
styles: `.example { width: 100px; }` ,
23+
styles: ".example { width: 100px; }" ,
24+
styles: '.example { width: 100px; }' ,
2025
})
2126
export class TMComponent{}

‎syntaxes/test/data/inline-styles.ts.snap‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,62 @@
9494
# ^ inline-styles.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
9595
# ^ inline-styles.ng
9696
# ^ inline-styles.ng meta.brace.round.ts
97-
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-styles.ng
97+
# ^^^^^^^ inline-styles.ng
98+
# ^ inline-styles.ng
99+
# ^ inline-styles.ng string
100+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-styles.ng source.css
101+
# ^ inline-styles.ng string
102+
# ^ inline-styles.ng
98103
# ^ inline-styles.ng meta.brace.round.ts
99104
# ^^^^^^^ inline-styles.ng
100105
# ^^ inline-styles.ng
106+
>//// styles string
107+
#^^^^^^^^^^^^^^^^^^^ inline-styles.ng
108+
> styles: ( (( ( '.example { width: 100px; }' ) )) ),
109+
#^^ inline-styles.ng
110+
# ^^^^^^ inline-styles.ng meta.object-literal.key.ts
111+
# ^ inline-styles.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
112+
# ^ inline-styles.ng
113+
# ^ inline-styles.ng meta.brace.round.ts
114+
# ^^^^^^ inline-styles.ng
115+
# ^ inline-styles.ng
116+
# ^ inline-styles.ng string
117+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-styles.ng source.css
118+
# ^ inline-styles.ng string
119+
# ^ inline-styles.ng
120+
# ^ inline-styles.ng meta.brace.round.ts
121+
# ^^^^^^ inline-styles.ng
122+
# ^^ inline-styles.ng
123+
> styles: `.example { width: 100px; }` ,
124+
#^^ inline-styles.ng
125+
# ^^^^^^ inline-styles.ng meta.object-literal.key.ts
126+
# ^ inline-styles.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
127+
# ^^ inline-styles.ng
128+
# ^ inline-styles.ng string
129+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-styles.ng source.css
130+
# ^ inline-styles.ng string
131+
# ^ inline-styles.ng
132+
# ^^ inline-styles.ng
133+
> styles: ".example { width: 100px; }" ,
134+
#^^ inline-styles.ng
135+
# ^^^^^^ inline-styles.ng meta.object-literal.key.ts
136+
# ^ inline-styles.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
137+
# ^^ inline-styles.ng
138+
# ^ inline-styles.ng string
139+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-styles.ng source.css
140+
# ^ inline-styles.ng string
141+
# ^ inline-styles.ng
142+
# ^^ inline-styles.ng
143+
> styles: '.example { width: 100px; }' ,
144+
#^^ inline-styles.ng
145+
# ^^^^^^ inline-styles.ng meta.object-literal.key.ts
146+
# ^ inline-styles.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
147+
# ^^ inline-styles.ng
148+
# ^ inline-styles.ng string
149+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-styles.ng source.css
150+
# ^ inline-styles.ng string
151+
# ^ inline-styles.ng
152+
# ^^ inline-styles.ng
101153
>})
102154
#^^^ inline-styles.ng
103155
>export class TMComponent{}

0 commit comments

Comments
 (0)