(feat) add postcss syntax grammar

packages/svelte-vscode/.gitignore

@@ -1,3 +1,4 @@
 /dist
 /node_modules
 /syntaxes/svelte.tmLanguage.json
+/syntaxes/postcss.json

packages/svelte-vscode/README.md

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

packages/svelte-vscode/package.json

@@ -4,7 +4,7 @@
     "description": "Svelte language support for VS Code",
     "main": "dist/src/extension.js",
     "scripts": {
-        "build:grammar": "npx js-yaml syntaxes/svelte.tmLanguage.src.yaml > syntaxes/svelte.tmLanguage.json",
+        "build:grammar": "npx js-yaml syntaxes/svelte.tmLanguage.src.yaml > syntaxes/svelte.tmLanguage.json && npx js-yaml syntaxes/postcss.src.yaml > syntaxes/postcss.json",
         "build:ts": "tsc -p ./",
         "build": "npm run build:ts && npm run build:grammar",
         "vscode:prepublish": "npm run build && npm prune --production",
@@ -466,6 +466,13 @@
                 "embeddedLanguages": {
                     "meta.embedded.block.svelte": "svelte"
                 }
+            },
+            {
+                "scopeName": "source.css.postcss",
+                "path": "./syntaxes/postcss.json",
+                "injectTo": [
+                    "source.svelte"
+                ]
             }
         ],
         "commands": [

packages/svelte-vscode/syntaxes/postcss.src.yaml

@@ -0,0 +1,200 @@
+name: Svelte PostCSS
+scopeName: source.css.postcss
+uuid: 90DAEA60-88AA-11E2-9E96-0800200C9A66
+fileTypes:
+  - pcss
+  - postcss
+foldingStartMarker: /\*|^#|^\*|^\b|^\.
+foldingStopMarker: \*/|^\s*$
+patterns:
+  - begin: /\*
+    end: \*/
+    name: comment.block.postcss
+    patterns:
+      - include: '#comment-tag'
+  - include: '#double-slash'
+  - include: '#double-quoted'
+  - include: '#single-quoted'
+  - include: '#interpolation'
+  - include: '#placeholder-selector'
+  - include: '#variable'
+  - include: '#variable-root-css'
+  - include: '#numeric'
+  - include: '#unit'
+  - include: '#flag'
+  - include: '#dotdotdot'
+  - begin: '@include'
+    end: '(?=\n|\(|{|;)'
+    name: support.function.name.postcss.library
+    captures:
+      '0':
+        name: keyword.control.at-rule.css.postcss
+  - begin: '@mixin|@function'
+    end: '$\n?|(?=\(|{)'
+    name: support.function.name.postcss.no-completions
+    captures:
+      '0':
+        name: keyword.control.at-rule.css.postcss
+    patterns:
+      - match: '[\w-]+'
+        name: entity.name.function
+  - match: '(?<=@import)\s[\w/.*-]+'
+    name: string.quoted.double.css.postcss
+  - begin: '@'
+    end: >-
+      $\n?|\s(?!(all|braille|embossed|handheld|print|projection|screen|speech|tty|tv|if|only|not)(\s|,))|(?=;)
+    name: keyword.control.at-rule.css.postcss
+  - begin: '#'
+    end: '$\n?|(?=\s|,|;|\(|\)|\.|\[|{|>)'
+    name: entity.other.attribute-name.id.css.postcss
+    patterns:
+      - include: '#interpolation'
+      - include: '#pseudo-class'
+  - begin: \.|(?<=&)(-|_)
+    end: '$\n?|(?=\s|,|;|\(|\)|\[|{|>)'
+    name: entity.other.attribute-name.class.css.postcss
+    patterns:
+      - include: '#interpolation'
+      - include: '#pseudo-class'
+  - begin: '\['
+    end: '\]'
+    name: entity.other.attribute-selector.postcss
+    patterns:
+      - include: '#double-quoted'
+      - include: '#single-quoted'
+      - match: \^|\$|\*|~
+        name: keyword.other.regex.postcss
+  - match: '(?<=\]|\)|not\(|\*|>|>\s):[a-z:-]+|(::|:-)[a-z:-]+'
+    name: entity.other.attribute-name.pseudo-class.css.postcss
+  - begin: ':'
+    end: '$\n?|(?=;|\s\(|and\(|{|}|\),)'
+    name: meta.property-list.css.postcss
+    patterns:
+      - include: '#double-slash'
+      - include: '#double-quoted'
+      - include: '#single-quoted'
+      - include: '#interpolation'
+      - include: '#variable'
+      - include: '#rgb-value'
+      - include: '#numeric'
+      - include: '#unit'
+      - include: '#flag'
+      - include: '#function'
+      - include: '#function-content'
+      - include: '#function-content-var'
+      - include: '#operator'
+      - include: '#parent-selector'
+      - include: '#property-value'
+  - include: '#rgb-value'
+  - include: '#function'
+  - include: '#function-content'
+  - begin: >-
+      (?<!\-|\()\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)|&
+    end: '(?=\s|,|;|\(|\)|\.|\[|{|>|-|_)'
+    name: entity.name.tag.css.postcss.symbol
+    patterns:
+      - include: '#interpolation'
+      - include: '#pseudo-class'
+  - include: '#operator'
+  - match: '[a-z-]+((?=:|#{))'
+    name: support.type.property-name.css.postcss
+  - include: '#reserved-words'
+  - include: '#property-value'
+repository:
+  comment-tag:
+    begin: '{{'
+    end: '}}'
+    name: comment.tags.postcss
+    patterns:
+      - match: '[\w-]+'
+        name: comment.tag.postcss
+  dotdotdot:
+    match: '\.{3}'
+    name: variable.other
+  double-slash:
+    begin: //
+    end: $
+    name: comment.line.postcss
+    patterns:
+      - include: '#comment-tag'
+  double-quoted:
+    begin: '"'
+    end: '"'
+    name: string.quoted.double.css.postcss
+    patterns:
+      - include: '#quoted-interpolation'
+  flag:
+    match: '!(important|default|optional|global)'
+    name: keyword.other.important.css.postcss
+  function:
+    match: '(?<=[\s|\(|,|:])(?!url|format|attr)[\w-][\w-]*(?=\()'
+    name: support.function.name.postcss
+  function-content:
+    match: (?<=url\(|format\(|attr\().+?(?=\))
+    name: string.quoted.double.css.postcss
+  function-content-var:
+    match: '(?<=var\()[\w-]+(?=\))'
+    name: variable.parameter.postcss
+  interpolation:
+    begin: '#{'
+    end: '}'
+    name: support.function.interpolation.postcss
+    patterns:
+      - include: '#variable'
+      - include: '#numeric'
+      - include: '#operator'
+      - include: '#unit'
+      - include: '#double-quoted'
+      - include: '#single-quoted'
+  numeric:
+    match: '(-|\.)?[0-9]+(\.[0-9]+)?'
+    name: constant.numeric.css.postcss
+  operator:
+    match: \+|\s-\s|\s-(?=\$)|(?<=\()-(?=\$)|\s-(?=\()|\*|/|%|=|!|<|>|~
+    name: keyword.operator.postcss
+  parent-selector:
+    match: '&'
+    name: entity.name.tag.css.postcss
+  placeholder-selector:
+    begin: (?<!\d)%(?!\d)
+    end: '$\n?|\s|(?=;|{)'
+    name: entity.other.attribute-name.placeholder-selector.postcss
+  property-value:
+    match: '[\w-]+'
+    name: >-
+      meta.property-value.css.postcss,
+      support.constant.property-value.css.postcss
+  pseudo-class:
+    match: ':[a-z:-]+'
+    name: entity.other.attribute-name.pseudo-class.css.postcss
+  quoted-interpolation:
+    begin: '#{'
+    end: '}'
+    name: support.function.interpolation.postcss
+    patterns:
+      - include: '#variable'
+      - include: '#numeric'
+      - include: '#operator'
+      - include: '#unit'
+  reserved-words:
+    match: \b(false|from|in|not|null|through|to|true)\b
+    name: support.type.property-name.css.postcss
+  rgb-value:
+    match: '(#)([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b'
+    name: constant.other.color.rgb-value.css.postcss
+  single-quoted:
+    begin: ''''
+    end: ''''
+    name: string.quoted.single.css.postcss
+    patterns:
+      - include: '#quoted-interpolation'
+  unit:
+    match: >-
+      (?<=[\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|%)
+    name: keyword.other.unit.css.postcss
+  variable:
+    match: '\$[\w-]+'
+    name: variable.parameter.postcss
+  variable-root-css:
+    match: '(?<!&)--[\w-]+'
+    name: variable.parameter.postcss

yarn.lock

@@ -1531,9 +1531,9 @@ [email protected], js-yaml@^3.13.1:
     esprima "^4.0.0"
 
 js-yaml@^3.14.0:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
-  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"