diff --git a/src/extension.ts b/src/extension.ts
index 371c76f62394a33b3048c83dd47afe1913b2ef6d..c4598ae87dd8ca51c151bfc2d884b4b6a6913040 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,7 +1,8 @@
'use strict'
import * as vscode from 'vscode'
-import { join, dirname } from 'path'
+import { dirname } from 'path'
+const htmlElements = require('./htmlElements.js')
const tailwindClassNames = require('tailwind-class-names')
const dlv = require('dlv')
const Color = require('color')
@@ -21,10 +22,8 @@ 'erb',
'handlebars',
'ejs',
'nunjucks',
-
import * as vscode from 'vscode'
- // for jsx
- ...JS_TYPES
+ prefix?: string
]
const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
@@ -148,9 +147,20 @@ } else if (emmet) {
// match emmet style syntax
// e.g. .flex.items-center
let currentLine = lines[lines.length - 1]
+ let currentWord = currentLine.split(' ').pop()
+ matches = currentWord.match(/^\.([^.()#>*^ \[\]=$@{}]*)$/)
+ async function onFileChange(event) {
'use strict'
-'use strict'
+ matches = currentWord.match(
+ new RegExp(
+import * as vscode from 'vscode'
'**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import { join, dirname } from 'path'
+ '|'
+ )}).*?\\.([^.()#>*^ \\[\\]=$@{}]*)$`
+ )
+ )
+ }
let parts = matches[matches.length - 1].split('.')
str = parts[parts.length - 1]
}
@@ -425,16 +435,39 @@ this._providers.push(
createCompletionItemProvider({
items: this._items,
languages: HTML_TYPES,
+ regex: /\bclass=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
-import { join, dirname } from 'path'
+const tailwindClassNames = require('tailwind-class-names')
+ config: tailwind.config,
const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
-const tailwindClassNames = require('tailwind-class-names')
+const dlv = require('dlv')
+const dlv = require('dlv')
const Color = require('color')
+ )
+
+ this._providers.push(
+]
'use strict'
+ let pluginPath = dirname(tailwindPackage[0].fsPath)
+ languages: JS_TYPES,
+
const Color = require('color')
+import { join, dirname } from 'path'
+ triggerCharacters: ["'", '"', ' ', separator]
+ .concat([
+ Object.keys(
+ vscode.workspace.getConfiguration('emmet.includeLanguages')
+ ).indexOf('javascript') !== -1 && '.'
+ ])
+ .filter(Boolean),
+ config: tailwind.config,
+ try {
const dlv = require('dlv')
+ Object.keys(
+ vscode.workspace.getConfiguration('emmet.includeLanguages')
+ ).indexOf('javascript') !== -1
})
)
@@ -443,32 +476,61 @@ this._providers.push(
createCompletionItemProvider({
items: this._items,
languages: ['vue'],
+ regex: /\bclass=["']([^"']*)$/,
+ enable = () => true,
+ if (
+ text.indexOf('<template') !== -1 &&
+ text.indexOf('</template>') === -1
+ ) {
+ return true
+ }
+export async function activate(context: vscode.ExtensionContext) {
const Color = require('color')
- '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
export async function activate(context: vscode.ExtensionContext) {
+const CONFIG_GLOB =
+ triggerCharacters: ["'", '"', ' ', separator]
+ try {
+ Object.keys(
+ try {
-const CONFIG_GLOB =
+import { join, dirname } from 'path'
'use strict'
+import * as vscode from 'vscode'
+ ])
+ .filter(Boolean),
+ return tw
+ emmet:
+ Object.keys(
+ try {
const CONFIG_GLOB =
+ ).indexOf('vue-html') !== -1
+ strings: true
+const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
+ this._providers.push(
+ createCompletionItemProvider({
+ items: this._items,
+const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
const CONFIG_GLOB =
-import * as vscode from 'vscode'
+ regex: /\bclass=["']([^"']*)$/,
+ enable: text => {
export async function activate(context: vscode.ExtensionContext) {
+'use strict'
import { join, dirname } from 'path'
+ 'php',
+ text.indexOf('</script>') === -1
) {
return true
}
return false
},
- triggerCharacters: ["'", '"', ' ', '.', separator],
-
+ tw = await getTailwind()
const Color = require('color')
-'use strict'
-const Color = require('color')
+const dlv = require('dlv')
const dlv = require('dlv')
})
)
@@ -515,164 +577,174 @@ })
)
this._providers.push(
- let tw
import { join, dirname } from 'path'
+ 'markdown',
-
+ tw = await getTailwind()
'**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-const tailwindClassNames = require('tailwind-class-names')
+import { join, dirname } from 'path'
- document: vscode.TextDocument,
- new vscode.Position(Math.max(position.line - 5, 0), 0),
+import { join, dirname } from 'path'
- ): vscode.CompletionItem[] {
'use strict'
- document: vscode.TextDocument,
+import { join, dirname } from 'path'
- const separator = config.options.separator || ':'
+
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
+import { join, dirname } from 'path'
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
+ position: vscode.Position
+import { join, dirname } from 'path'
- position: vscode.Position
+const tailwindClassNames = require('tailwind-class-names')
- try {
- 'erb',
+ } catch (err) {
const dlv = require('dlv')
- const text2: string = document.getText(range2)
+
+import { join, dirname } from 'path'
+const Color = require('color')
- try {
import { join, dirname } from 'path'
+
import * as vscode from 'vscode'
-const tailwindClassNames = require('tailwind-class-names')
+import { join, dirname } from 'path'
- if (matches && matches[2]) {
+const CONFIG_GLOB =
import * as vscode from 'vscode'
+ '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
const Color = require('color')
- let parts = className.split(':')
+ const text2: string = document.getText(range2)
+import { join, dirname } from 'path'
try {
- '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+import { join, dirname } from 'path'
tw = await getTailwind()
- let selector = `.${escapeClassName(className)}`
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
import * as vscode from 'vscode'
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
import { join, dirname } from 'path'
+
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
const tailwindClassNames = require('tailwind-class-names')
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
const dlv = require('dlv')
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
const Color = require('color')
+
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
const CONFIG_GLOB =
+import { join, dirname } from 'path'
import * as vscode from 'vscode'
-'use strict'
'**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
- } catch (err) {}
+ return
-
- } catch (err) {}
+ return
'use strict'
- } catch (err) {}
+ return
- } catch (err) {}
+ return
import * as vscode from 'vscode'
- } catch (err) {}
+ return
import { join, dirname } from 'path'
- } catch (err) {}
+ return
const tailwindClassNames = require('tailwind-class-names')
import * as vscode from 'vscode'
-
+import * as vscode from 'vscode'
const dlv = require('dlv')
-import * as vscode from 'vscode'
+ let hoverStr = new vscode.MarkdownString()
- } catch (err) {}
+ return
const Color = require('color')
- } catch (err) {}
+ return
const CONFIG_GLOB =
- } catch (err) {}
+ return
'**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-
- let intellisense = new TailwindIntellisense(tw)
+ }
- let intellisense = new TailwindIntellisense(tw)
+ }
'use strict'
let intellisense = new TailwindIntellisense(tw)
+const dlv = require('dlv')
+ }
- let intellisense = new TailwindIntellisense(tw)
+ }
import * as vscode from 'vscode'
- let intellisense = new TailwindIntellisense(tw)
+ }
import { join, dirname } from 'path'
- let intellisense = new TailwindIntellisense(tw)
+
+ }
const tailwindClassNames = require('tailwind-class-names')
- let intellisense = new TailwindIntellisense(tw)
+ }
const dlv = require('dlv')
- let intellisense = new TailwindIntellisense(tw)
+ }
const Color = require('color')
- let intellisense = new TailwindIntellisense(tw)
+ }
const CONFIG_GLOB =
- let intellisense = new TailwindIntellisense(tw)
+ }
'**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
+const dlv = require('dlv')
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
+const dlv = require('dlv')
'use strict'
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
+const dlv = require('dlv')
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
+const dlv = require('dlv')
import * as vscode from 'vscode'
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
+const dlv = require('dlv')
import { join, dirname } from 'path'
-import * as vscode from 'vscode'
+
import { join, dirname } from 'path'
+const dlv = require('dlv')
const tailwindClassNames = require('tailwind-class-names')
-import * as vscode from 'vscode'
+ new vscode.Position(
+ position.line,
+ position.character +
intellisense.reload(tw)
+ '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
-import * as vscode from 'vscode'
}
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
+const Color = require('color')
'use strict'
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
+const Color = require('color')
-import * as vscode from 'vscode'
import { join, dirname } from 'path'
-const CONFIG_GLOB =
+ tree: true,
+ position.line,
+ }
import * as vscode from 'vscode'
import { join, dirname } from 'path'
- '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+ items,
import * as vscode from 'vscode'
- if (!vscode.workspace.name) return
+async function getTailwind() {
-import * as vscode from 'vscode'
+ }
const tailwindClassNames = require('tailwind-class-names')
-'use strict'
-'use strict'
} catch (err) {}
'jade',
-import * as vscode from 'vscode'
+
+ return null
+'use strict'
import * as vscode from 'vscode'
- CONFIG_GLOB,
+import * as vscode from 'vscode'
}
- })
+ )
)
this._disposable = vscode.Disposable.from(...this._providers)
diff --git a/src/htmlElements.ts b/src/htmlElements.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4bb7b1c1220b17799c08d5b923dd5e8ac0e4f280
--- /dev/null
+++ b/src/htmlElements.ts
@@ -0,0 +1,142 @@
+module.exports = [
+ 'a',
+ 'abbr',
+ 'acronym',
+ 'address',
+ 'applet',
+ 'area',
+ 'article',
+ 'aside',
+ 'audio',
+ 'b',
+ 'base',
+ 'basefont',
+ 'bdi',
+ 'bdo',
+ 'bgsound',
+ 'big',
+ 'blink',
+ 'blockquote',
+ 'body',
+ 'br',
+ 'button',
+ 'canvas',
+ 'caption',
+ 'center',
+ 'cite',
+ 'code',
+ 'col',
+ 'colgroup',
+ 'command',
+ 'content',
+ 'data',
+ 'datalist',
+ 'dd',
+ 'del',
+ 'details',
+ 'dfn',
+ 'dialog',
+ 'dir',
+ 'div',
+ 'dl',
+ 'dt',
+ 'element',
+ 'em',
+ 'embed',
+ 'fieldset',
+ 'figcaption',
+ 'figure',
+ 'font',
+ 'footer',
+ 'form',
+ 'frame',
+ 'frameset',
+ 'h1',
+ 'head',
+ 'header',
+ 'hgroup',
+ 'hr',
+ 'html',
+ 'i',
+ 'iframe',
+ 'image',
+ 'img',
+ 'input',
+ 'ins',
+ 'isindex',
+ 'kbd',
+ 'keygen',
+ 'label',
+ 'legend',
+ 'li',
+ 'link',
+ 'listing',
+ 'main',
+ 'map',
+ 'mark',
+ 'marquee',
+ 'menu',
+ 'menuitem',
+ 'meta',
+ 'meter',
+ 'multicol',
+ 'nav',
+ 'nextid',
+ 'nobr',
+ 'noembed',
+ 'noframes',
+ 'noscript',
+ 'object',
+ 'ol',
+ 'optgroup',
+ 'option',
+ 'output',
+ 'p',
+ 'param',
+ 'picture',
+ 'plaintext',
+ 'pre',
+ 'progress',
+ 'q',
+ 'rb',
+ 'rp',
+ 'rt',
+ 'rtc',
+ 'ruby',
+ 's',
+ 'samp',
+ 'script',
+ 'section',
+ 'select',
+ 'shadow',
+ 'slot',
+ 'small',
+ 'source',
+ 'spacer',
+ 'span',
+ 'strike',
+ 'strong',
+ 'style',
+ 'sub',
+ 'summary',
+ 'sup',
+ 'table',
+ 'tbody',
+ 'td',
+ 'template',
+ 'textarea',
+ 'tfoot',
+ 'th',
+ 'thead',
+ 'time',
+ 'title',
+ 'tr',
+ 'track',
+ 'tt',
+ 'u',
+ 'ul',
+ 'var',
+ 'video',
+ 'wbr',
+ 'xmp'
+]