add hover providers support for color hover variants

CHANGELOG.md

@@ -6,11 +6,11 @@ All notable changes to the Yumma CSS Intellisense will be documented in this fil
 
 ### Added
 
-- Add breakpoints, modifiers completions and hovers
+- Add support for `sm:*`, `md:*`, `lg:*`, `xxl:*` and `h:*` variants for hover providers.
 
 ### Changed
 
-- Rename `yumma.ts` to `index.ts`
+- Rename `yumma.ts` to `index.ts`.
 
 ### Removed
 

src/providers/hoverProvider.ts

@@ -35,6 +35,36 @@ export const hoverProvider = vscode.languages.registerHoverProvider(
       const range = new vscode.Range(start, end);
       const word = document.getText(range);
       const escapedWord = word.replace(/:/g, "\\:");
+
+      if (word.startsWith("h:")) {
+        const baseClass = word.slice(2);
+        const colorUtil = colorUtils.find((colorUtil) =>
+          baseClass.startsWith(colorUtil.classPrefix)
+        );
+
+        if (colorUtil) {
+          const color = baseColors.find(
+            (color) =>
+              `${colorUtil.classPrefix}${color.className}` === baseClass
+          );
+
+          if (color) {
+            const markdownString = new vscode.MarkdownString();
+
+            markdownString.appendCodeblock(
+              `.${escapedWord}:hover {\n  ${colorUtil.classValue}: ${color.classValue};\n}`,
+              "css"
+            );
+
+            markdownString.appendMarkdown(
+              `\n\nThe [${word}](${baseUrl}${colorUtil.classLink}) color utility only applies when the element is hovered.`
+            );
+
+            markdownString.isTrusted = true;
+            return new vscode.Hover(markdownString, range);
+          }
+        }
+      }
 
       const colorUtil = colorUtils.find((colorUtil) =>
         word.startsWith(colorUtil.classPrefix)
@@ -121,7 +151,7 @@ export const hoverProvider = vscode.languages.registerHoverProvider(
                   "css"
                 );
                 markdownString.appendMarkdown(
-                  `\n\nThe [${word}](${baseUrl}${utilClass.classLink}) utility only acts when you are hovering.`
+                  `\n\nThe [${word}](${baseUrl}${utilClass.classLink}) utility only applies when the element is hovered.`
                 );
                 markdownString.isTrusted = true;
 
@@ -160,7 +190,7 @@ export const hoverProvider = vscode.languages.registerHoverProvider(
                   "css"
                 );
                 markdownString.appendMarkdown(
-                  `\n\nThe [${word}](${baseUrl}${utilClass.classLink}) utility will only apply when the specified viewport is reached.`
+                  `\n\nThe [${word}](${baseUrl}${utilClass.classLink}) utility only applies when the specified viewport is reached.`
                 );
                 markdownString.isTrusted = true;