Skip to content

Commit 726e797

Browse files
authored
1 parent c31b51b commit 726e797

File tree

5 files changed

+216
-4
lines changed

5 files changed

+216
-4
lines changed

packages/svelte-vscode/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/dist
22
/node_modules
33
/syntaxes/svelte.tmLanguage.json
4+
/syntaxes/postcss.json

packages/svelte-vscode/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,7 @@ Settings to toggle specific features of the extension. The full list of all sett
101101
3. Set the `svelte.language-server.ls-path` setting in your user configuration, pointing it to the workspace-installed language server.
102102
4. Restart VSCode.
103103
5. Commit the changes to `.yarn/sdks`
104+
105+
### Credits
106+
107+
- The PostCSS grammar is based on [hudochenkov/Syntax-highlighting-for-PostCSS](https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS)

packages/svelte-vscode/package.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Svelte language support for VS Code",
55
"main": "dist/src/extension.js",
66
"scripts": {
7-
"build:grammar": "npx js-yaml syntaxes/svelte.tmLanguage.src.yaml > syntaxes/svelte.tmLanguage.json",
7+
"build:grammar": "npx js-yaml syntaxes/svelte.tmLanguage.src.yaml > syntaxes/svelte.tmLanguage.json && npx js-yaml syntaxes/postcss.src.yaml > syntaxes/postcss.json",
88
"build:ts": "tsc -p ./",
99
"build": "npm run build:ts && npm run build:grammar",
1010
"vscode:prepublish": "npm run build && npm prune --production",
@@ -466,6 +466,13 @@
466466
"embeddedLanguages": {
467467
"meta.embedded.block.svelte": "svelte"
468468
}
469+
},
470+
{
471+
"scopeName": "source.css.postcss",
472+
"path": "./syntaxes/postcss.json",
473+
"injectTo": [
474+
"source.svelte"
475+
]
469476
}
470477
],
471478
"commands": [
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
name: Svelte PostCSS
2+
scopeName: source.css.postcss
3+
uuid: 90DAEA60-88AA-11E2-9E96-0800200C9A66
4+
fileTypes:
5+
- pcss
6+
- postcss
7+
foldingStartMarker: /\*|^#|^\*|^\b|^\.
8+
foldingStopMarker: \*/|^\s*$
9+
patterns:
10+
- begin: /\*
11+
end: \*/
12+
name: comment.block.postcss
13+
patterns:
14+
- include: '#comment-tag'
15+
- include: '#double-slash'
16+
- include: '#double-quoted'
17+
- include: '#single-quoted'
18+
- include: '#interpolation'
19+
- include: '#placeholder-selector'
20+
- include: '#variable'
21+
- include: '#variable-root-css'
22+
- include: '#numeric'
23+
- include: '#unit'
24+
- include: '#flag'
25+
- include: '#dotdotdot'
26+
- begin: '@include'
27+
end: '(?=\n|\(|{|;)'
28+
name: support.function.name.postcss.library
29+
captures:
30+
'0':
31+
name: keyword.control.at-rule.css.postcss
32+
- begin: '@mixin|@function'
33+
end: '$\n?|(?=\(|{)'
34+
name: support.function.name.postcss.no-completions
35+
captures:
36+
'0':
37+
name: keyword.control.at-rule.css.postcss
38+
patterns:
39+
- match: '[\w-]+'
40+
name: entity.name.function
41+
- match: '(?<=@import)\s[\w/.*-]+'
42+
name: string.quoted.double.css.postcss
43+
- begin: '@'
44+
end: >-
45+
$\n?|\s(?!(all|braille|embossed|handheld|print|projection|screen|speech|tty|tv|if|only|not)(\s|,))|(?=;)
46+
name: keyword.control.at-rule.css.postcss
47+
- begin: '#'
48+
end: '$\n?|(?=\s|,|;|\(|\)|\.|\[|{|>)'
49+
name: entity.other.attribute-name.id.css.postcss
50+
patterns:
51+
- include: '#interpolation'
52+
- include: '#pseudo-class'
53+
- begin: \.|(?<=&)(-|_)
54+
end: '$\n?|(?=\s|,|;|\(|\)|\[|{|>)'
55+
name: entity.other.attribute-name.class.css.postcss
56+
patterns:
57+
- include: '#interpolation'
58+
- include: '#pseudo-class'
59+
- begin: '\['
60+
end: '\]'
61+
name: entity.other.attribute-selector.postcss
62+
patterns:
63+
- include: '#double-quoted'
64+
- include: '#single-quoted'
65+
- match: \^|\$|\*|~
66+
name: keyword.other.regex.postcss
67+
- match: '(?<=\]|\)|not\(|\*|>|>\s):[a-z:-]+|(::|:-)[a-z:-]+'
68+
name: entity.other.attribute-name.pseudo-class.css.postcss
69+
- begin: ':'
70+
end: '$\n?|(?=;|\s\(|and\(|{|}|\),)'
71+
name: meta.property-list.css.postcss
72+
patterns:
73+
- include: '#double-slash'
74+
- include: '#double-quoted'
75+
- include: '#single-quoted'
76+
- include: '#interpolation'
77+
- include: '#variable'
78+
- include: '#rgb-value'
79+
- include: '#numeric'
80+
- include: '#unit'
81+
- include: '#flag'
82+
- include: '#function'
83+
- include: '#function-content'
84+
- include: '#function-content-var'
85+
- include: '#operator'
86+
- include: '#parent-selector'
87+
- include: '#property-value'
88+
- include: '#rgb-value'
89+
- include: '#function'
90+
- include: '#function-content'
91+
- begin: >-
92+
(?<!\-|\()\b(a|abbr|acronym|address|applet|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|eventsource|fieldset|figure|figcaption|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|map|mark|menu|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|samp|script|section|select|small|source|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video|main|svg|rect|ruby|center|circle|ellipse|line|polyline|polygon|path|text|u|x)\b(?!-|\)|:\s)|&
93+
end: '(?=\s|,|;|\(|\)|\.|\[|{|>|-|_)'
94+
name: entity.name.tag.css.postcss.symbol
95+
patterns:
96+
- include: '#interpolation'
97+
- include: '#pseudo-class'
98+
- include: '#operator'
99+
- match: '[a-z-]+((?=:|#{))'
100+
name: support.type.property-name.css.postcss
101+
- include: '#reserved-words'
102+
- include: '#property-value'
103+
repository:
104+
comment-tag:
105+
begin: '{{'
106+
end: '}}'
107+
name: comment.tags.postcss
108+
patterns:
109+
- match: '[\w-]+'
110+
name: comment.tag.postcss
111+
dotdotdot:
112+
match: '\.{3}'
113+
name: variable.other
114+
double-slash:
115+
begin: //
116+
end: $
117+
name: comment.line.postcss
118+
patterns:
119+
- include: '#comment-tag'
120+
double-quoted:
121+
begin: '"'
122+
end: '"'
123+
name: string.quoted.double.css.postcss
124+
patterns:
125+
- include: '#quoted-interpolation'
126+
flag:
127+
match: '!(important|default|optional|global)'
128+
name: keyword.other.important.css.postcss
129+
function:
130+
match: '(?<=[\s|\(|,|:])(?!url|format|attr)[\w-][\w-]*(?=\()'
131+
name: support.function.name.postcss
132+
function-content:
133+
match: (?<=url\(|format\(|attr\().+?(?=\))
134+
name: string.quoted.double.css.postcss
135+
function-content-var:
136+
match: '(?<=var\()[\w-]+(?=\))'
137+
name: variable.parameter.postcss
138+
interpolation:
139+
begin: '#{'
140+
end: '}'
141+
name: support.function.interpolation.postcss
142+
patterns:
143+
- include: '#variable'
144+
- include: '#numeric'
145+
- include: '#operator'
146+
- include: '#unit'
147+
- include: '#double-quoted'
148+
- include: '#single-quoted'
149+
numeric:
150+
match: '(-|\.)?[0-9]+(\.[0-9]+)?'
151+
name: constant.numeric.css.postcss
152+
operator:
153+
match: \+|\s-\s|\s-(?=\$)|(?<=\()-(?=\$)|\s-(?=\()|\*|/|%|=|!|<|>|~
154+
name: keyword.operator.postcss
155+
parent-selector:
156+
match: '&'
157+
name: entity.name.tag.css.postcss
158+
placeholder-selector:
159+
begin: (?<!\d)%(?!\d)
160+
end: '$\n?|\s|(?=;|{)'
161+
name: entity.other.attribute-name.placeholder-selector.postcss
162+
property-value:
163+
match: '[\w-]+'
164+
name: >-
165+
meta.property-value.css.postcss,
166+
support.constant.property-value.css.postcss
167+
pseudo-class:
168+
match: ':[a-z:-]+'
169+
name: entity.other.attribute-name.pseudo-class.css.postcss
170+
quoted-interpolation:
171+
begin: '#{'
172+
end: '}'
173+
name: support.function.interpolation.postcss
174+
patterns:
175+
- include: '#variable'
176+
- include: '#numeric'
177+
- include: '#operator'
178+
- include: '#unit'
179+
reserved-words:
180+
match: \b(false|from|in|not|null|through|to|true)\b
181+
name: support.type.property-name.css.postcss
182+
rgb-value:
183+
match: '(#)([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b'
184+
name: constant.other.color.rgb-value.css.postcss
185+
single-quoted:
186+
begin: ''''
187+
end: ''''
188+
name: string.quoted.single.css.postcss
189+
patterns:
190+
- include: '#quoted-interpolation'
191+
unit:
192+
match: >-
193+
(?<=[\d]|})(ch|cm|deg|dpcm|dpi|dppx|em|ex|grad|Hz|in|kHz|mm|ms|pc|pt|px|rad|rem|s|turn|vh|vmax|vmin|vw|%)
194+
name: keyword.other.unit.css.postcss
195+
variable:
196+
match: '\$[\w-]+'
197+
name: variable.parameter.postcss
198+
variable-root-css:
199+
match: '(?<!&)--[\w-]+'
200+
name: variable.parameter.postcss

yarn.lock

+3-3
Original file line numberDiff line numberDiff line change
@@ -1531,9 +1531,9 @@ [email protected], js-yaml@^3.13.1:
15311531
esprima "^4.0.0"
15321532

15331533
js-yaml@^3.14.0:
1534-
version "3.14.0"
1535-
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
1536-
integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
1534+
version "3.14.1"
1535+
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
1536+
integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
15371537
dependencies:
15381538
argparse "^1.0.7"
15391539
esprima "^4.0.0"

0 commit comments

Comments
 (0)