From 68682298b9a850b98afc18ba4433d6264a5564ec Mon Sep 17 00:00:00 2001
From: Brad Cornes <hello@bradley.dev>
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"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}