From 68682298b9a850b98afc18ba4433d6264a5564ec Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Fri, 22 Apr 2022 18:07:21 +0100 Subject: [PATCH] Fix `@screen` highlighting for Vetur SFC PostCSS styles (#538) --- packages/vscode-tailwindcss/package.json | 8 +- .../syntaxes/at-rules.postcss.tmLanguage.json | 213 ++++++++++++++++++ 2 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 packages/vscode-tailwindcss/syntaxes/at-rules.postcss.tmLanguage.json diff --git a/packages/vscode-tailwindcss/package.json b/packages/vscode-tailwindcss/package.json index eb8ced8..67ef3f6 100755 --- a/packages/vscode-tailwindcss/package.json +++ b/packages/vscode-tailwindcss/package.json @@ -73,7 +73,6 @@ "path": "./syntaxes/at-rules.tmLanguage.json", "injectTo": [ "source.css", - "source.css.postcss", "source.vue", "source.svelte", "text.html" @@ -86,6 +85,13 @@ "source.css.scss" ] }, + { + "scopeName": "tailwindcss.at-rules.postcss.injection", + "path": "./syntaxes/at-rules.postcss.tmLanguage.json", + "injectTo": [ + "source.css.postcss" + ] + }, { "scopeName": "tailwindcss.at-apply.injection", "path": "./syntaxes/at-apply.tmLanguage.json", diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.postcss.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.postcss.tmLanguage.json new file mode 100644 index 0000000..749db63 --- /dev/null +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.postcss.tmLanguage.json @@ -0,0 +1,213 @@ +{ + "scopeName": "tailwindcss.at-rules.injection", + "fileTypes": [], + "injectionSelector": "L:source.css.postcss -comment", + "name": "TailwindCSS", + "patterns": [ + { + "begin": "(?i)((@)tailwind)(?=\\s|/\\*|$)", + "beginCaptures": { + "1": { + "name": "keyword.control.at-rule.tailwind.tailwind" + }, + "2": { + "name": "punctuation.definition.keyword.css" + } + }, + "end": ";", + "endCaptures": { + "0": { + "name": "punctuation.terminator.tailwind.tailwind" + } + }, + "name": "meta.at-rule.tailwind.css", + "patterns": [ + { + "include": "source.css#comment-block" + }, + { + "include": "source.css.postcss#double-slash" + }, + { + "include": "source.css#escapes" + }, + { + "match": "[^\\s;]+?", + "name": "variable.parameter.tailwind.tailwind" + } + ] + }, + { + "begin": "(?i)((@)screen)(?=[\\s{]|/\\*|$)", + "beginCaptures": { + "1": { + "name": "keyword.control.at-rule.screen.tailwind" + }, + "2": { + "name": "punctuation.definition.keyword.css" + } + }, + "end": "(?<=})(?!\\G)", + "patterns": [ + { + "include": "source.css#comment-block" + }, + { + "include": "source.css.postcss#double-slash" + }, + { + "match": "[^\\s{]+?", + "name": "variable.parameter.screen.tailwind" + }, + { + "begin": "{", + "beginCaptures": { + "0": { + "name": "punctuation.section.screen.begin.bracket.curly.tailwind" + } + }, + "end": "}", + "endCaptures": { + "0": { + "name": "punctuation.section.screen.end.bracket.curly.tailwind" + } + }, + "name": "meta.at-rule.screen.body.tailwind", + "patterns": [ + { + "include": "source.css.postcss" + } + ] + } + ] + }, + { + "begin": "(?i)((@)layer)(?=[\\s{]|/\\*|$)", + "beginCaptures": { + "1": { + "name": "keyword.control.at-rule.layer.tailwind" + }, + "2": { + "name": "punctuation.definition.keyword.css" + } + }, + "end": "(?<=})(?!\\G)", + "patterns": [ + { + "include": "source.css#comment-block" + }, + { + "include": "source.css.postcss#double-slash" + }, + { + "match": "[^\\s{]+?", + "name": "variable.parameter.layer.tailwind" + }, + { + "begin": "{", + "beginCaptures": { + "0": { + "name": "punctuation.section.layer.begin.bracket.curly.tailwind" + } + }, + "end": "}", + "endCaptures": { + "0": { + "name": "punctuation.section.layer.end.bracket.curly.tailwind" + } + }, + "name": "meta.at-rule.layer.body.tailwind", + "patterns": [ + { + "include": "source.css.postcss" + } + ] + } + ] + }, + { + "begin": "(?i)((@)variants)(?=[\\s{]|/\\*|$)", + "beginCaptures": { + "1": { + "name": "keyword.control.at-rule.variants.tailwind" + }, + "2": { + "name": "punctuation.definition.keyword.css" + } + }, + "end": "(?<=})(?!\\G)", + "patterns": [ + { + "include": "source.css#comment-block" + }, + { + "include": "source.css.postcss#double-slash" + }, + { + "match": "[^\\s{,]+?", + "name": "variable.parameter.variants.tailwind" + }, + { + "begin": "{", + "beginCaptures": { + "0": { + "name": "punctuation.section.variants.begin.bracket.curly.tailwind" + } + }, + "end": "}", + "endCaptures": { + "0": { + "name": "punctuation.section.variants.end.bracket.curly.tailwind" + } + }, + "name": "meta.at-rule.variants.body.tailwind", + "patterns": [ + { + "include": "source.css.postcss" + } + ] + } + ] + }, + { + "begin": "(?i)((@)responsive)(?=[\\s{]|/\\*|$)", + "beginCaptures": { + "1": { + "name": "keyword.control.at-rule.responsive.tailwind" + }, + "2": { + "name": "punctuation.definition.keyword.css" + } + }, + "end": "(?<=})(?!\\G)", + "patterns": [ + { + "include": "source.css#comment-block" + }, + { + "include": "source.css.postcss#double-slash" + }, + { + "begin": "{", + "beginCaptures": { + "0": { + "name": "punctuation.section.responsive.begin.bracket.curly.tailwind" + } + }, + "end": "}", + "endCaptures": { + "0": { + "name": "punctuation.section.responsive.end.bracket.curly.tailwind" + } + }, + "name": "meta.at-rule.responsive.body.tailwind", + "patterns": [ + { + "include": "source.css.postcss" + } + ] + } + ] + } + ] +}