1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

diff --git a/src/extension.ts b/src/extension.ts
index 0c59ad4e9246207b6dc8a4b69647fb26176a7386..c2c844c8f49524b69bd8ace872dd7d76fd64a06f 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -244,13 +244,15 @@   return items
 }
 
 class TailwindIntellisense {
-  private _completionProviders: vscode.Disposable[]
+  private _providers: vscode.Disposable[]
   private _disposable: vscode.Disposable
+  private _tailwind
   private _items
   private _configItems
 
   constructor(tailwind) {
     if (tailwind) {
+      this._tailwind = tailwind
       this.reload(tailwind)
     }
   }
@@ -265,9 +267,9 @@
     this._items = createItems(tailwind.classNames, separator, tailwind.config)
     this._configItems = createConfigItems(tailwind.config)
 
-    this._completionProviders = []
+    this._providers = []
 
-    this._completionProviders.push(
+    this._providers.push(
       createCompletionItemProvider(
         this._items,
         ['typescriptreact', 'javascript', 'javascriptreact'],
@@ -277,7 +279,7 @@         tailwind.config
       )
     )
 
-    this._completionProviders.push(
+    this._providers.push(
       createCompletionItemProvider(
         this._items,
         ['css', 'sass', 'scss'],
@@ -288,7 +290,7 @@         '.'
       )
     )
 
-    this._completionProviders.push(
+    this._providers.push(
       createCompletionItemProvider(
         this._items,
         [
@@ -314,7 +316,7 @@         tailwind.config
       )
     )
 
-    this._completionProviders.push(
+    this._providers.push(
       vscode.languages.registerCompletionItemProvider(
         ['css', 'sass', 'scss'],
         {
@@ -355,7 +357,90 @@         '.'
       )
     )
 
-    this._disposable = vscode.Disposable.from(...this._completionProviders)
+    this._providers.push(
+      vscode.languages.registerHoverProvider('html', {
+        provideHover: (document, position, token) => {
+          const range1: vscode.Range = new vscode.Range(
+            new vscode.Position(Math.max(position.line - 5, 0), 0),
+            position
+          )
+          const text1: string = document.getText(range1)
+
+          if (!/class=['"][^'"]*$/.test(text1)) return
+
+          const range2: vscode.Range = new vscode.Range(
+            new vscode.Position(Math.max(position.line - 5, 0), 0),
+            position.with({ line: position.line + 1 })
+          )
+          const text2: string = document.getText(range2)
+
+          let str = text1 + text2.substr(text1.length).match(/^([^"' ]*)/)[0]
+          let matches = str.match(/\bclass(Name)?=["']([^"']*)/)
+
+          if (matches && matches[2]) {
+            let className = matches[2].split(' ').pop()
+            let parts = className.split(':')
+
+            if (typeof dlv(this._tailwind.classNames, parts) === 'string') {
+              let base = parts.pop()
+              let selector = `.${escapeClassName(className)}`
+
+              if (parts.indexOf('hover') !== -1) {
+                selector += ':hover'
+              } else if (parts.indexOf('focus') !== -1) {
+                selector += ':focus'
+              } else if (parts.indexOf('active') !== -1) {
+                selector += ':active'
+              } else if (parts.indexOf('group-hover') !== -1) {
+                selector = `.group:hover ${selector}`
+              }
+
+              let hoverStr = new vscode.MarkdownString()
+              let css = this._tailwind.classNames[base]
+              let m = css.match(/^(::?[a-z-]+) {(.*?)}/)
+              if (m) {
+                selector += m[1]
+                css = m[2].trim()
+              }
+              css = css.replace(/([;{]) /g, '$1\n').replace(/^/gm, '  ')
+              let code = `${selector} {\n${css}\n}`
+              let screens = dlv(this._tailwind.config, 'screens', {})
+
+              Object.keys(screens).some(screen => {
+                if (parts.indexOf(screen) !== -1) {
+                  code = `@media (min-width: ${
+                    screens[screen]
+                  }) {\n${code.replace(/^/gm, '  ')}\n}`
+                  return true
+                }
+                return false
+              })
+              hoverStr.appendCodeblock(code, 'css')
+
+              let hoverRange = new vscode.Range(
+                new vscode.Position(
+                  position.line,
+                  position.character +
+                    str.length -
+                    text1.length -
+                    className.length
+                ),
+                new vscode.Position(
+                  position.line,
+                  position.character + str.length - text1.length
+                )
+              )
+
+              return new vscode.Hover(hoverStr, hoverRange)
+            }
+          }
+
+          return null
+        }
+      })
+    )
+
+    this._disposable = vscode.Disposable.from(...this._providers)
   }
 
   dispose() {
@@ -386,3 +471,7 @@       return acc
     }, [])
     .join(', ')
 }
+
+function escapeClassName(className) {
+  return className.replace(/([^A-Za-z0-9\-])/g, '\\$1')
+}