525 lines
13 KiB
TypeScript
525 lines
13 KiB
TypeScript
'use strict'
|
|
|
|
import * as vscode from 'vscode'
|
|
import { join } from 'path'
|
|
const tailwindClassNames = require('tailwind-class-names')
|
|
const dlv = require('dlv')
|
|
const Color = require('color')
|
|
|
|
const CONFIG_GLOB = '{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
|
|
const JS_TYPES = ['typescriptreact', 'javascript', 'javascriptreact']
|
|
const HTML_TYPES = [
|
|
'html',
|
|
'jade',
|
|
'razor',
|
|
'php',
|
|
'blade',
|
|
'vue',
|
|
'twig',
|
|
'markdown',
|
|
'erb',
|
|
'handlebars',
|
|
'ejs',
|
|
'nunjucks',
|
|
// for jsx
|
|
...JS_TYPES
|
|
]
|
|
const CSS_TYPES = ['css', 'sass', 'scss', 'less', 'postcss', 'stylus']
|
|
|
|
export async function activate(context: vscode.ExtensionContext) {
|
|
let tw
|
|
|
|
try {
|
|
tw = await getTailwind()
|
|
} catch (err) {}
|
|
|
|
let intellisense = new TailwindIntellisense(tw)
|
|
context.subscriptions.push(intellisense)
|
|
|
|
let watcher = vscode.workspace.createFileSystemWatcher(`**/${CONFIG_GLOB}`)
|
|
|
|
watcher.onDidChange(onFileChange)
|
|
watcher.onDidCreate(onFileChange)
|
|
watcher.onDidDelete(onFileChange)
|
|
|
|
async function onFileChange(event) {
|
|
try {
|
|
tw = await getTailwind()
|
|
} catch (err) {
|
|
intellisense.dispose()
|
|
return
|
|
}
|
|
|
|
intellisense.reload(tw)
|
|
}
|
|
}
|
|
|
|
async function getTailwind() {
|
|
if (!vscode.workspace.name) return
|
|
|
|
let files = await vscode.workspace.findFiles(
|
|
CONFIG_GLOB,
|
|
'**/node_modules/**',
|
|
1
|
|
)
|
|
if (!files) return null
|
|
|
|
let configPath = files[0].fsPath
|
|
|
|
const pluginPath = join(
|
|
vscode.workspace.workspaceFolders[0].uri.fsPath,
|
|
'node_modules',
|
|
'tailwindcss'
|
|
)
|
|
|
|
let tw
|
|
|
|
try {
|
|
tw = await tailwindClassNames({
|
|
configPath,
|
|
pluginPath,
|
|
tree: true,
|
|
strings: true
|
|
})
|
|
} catch (err) {
|
|
return null
|
|
}
|
|
|
|
return tw
|
|
}
|
|
|
|
export function deactivate() {}
|
|
|
|
function createCompletionItemProvider(
|
|
items,
|
|
languages: string[],
|
|
regex: RegExp,
|
|
triggerCharacters: string[],
|
|
config,
|
|
prefix = ''
|
|
): vscode.Disposable {
|
|
return vscode.languages.registerCompletionItemProvider(
|
|
languages,
|
|
{
|
|
provideCompletionItems(
|
|
document: vscode.TextDocument,
|
|
position: vscode.Position
|
|
): vscode.CompletionItem[] {
|
|
const range: vscode.Range = new vscode.Range(
|
|
new vscode.Position(Math.max(position.line - 5, 0), 0),
|
|
position
|
|
)
|
|
const text: string = document.getText(range)
|
|
|
|
let p = prefix
|
|
const separator = config.options.separator || ':'
|
|
|
|
const matches = text.match(regex)
|
|
|
|
if (matches) {
|
|
const parts = matches[matches.length - 1].split(' ')
|
|
const str = parts[parts.length - 1]
|
|
|
|
const pth = str
|
|
.replace(new RegExp(`${separator}`, 'g'), '.')
|
|
.replace(/\.$/, '')
|
|
.replace(/^\./, '')
|
|
.replace(/\./g, '.children.')
|
|
|
|
if (pth !== '') {
|
|
const itms = dlv(items, pth)
|
|
if (itms) {
|
|
return prefixItems(itms.children, str, prefix)
|
|
}
|
|
}
|
|
|
|
if (str.indexOf(separator) === -1) {
|
|
return prefixItems(items, str, prefix)
|
|
}
|
|
|
|
return []
|
|
}
|
|
|
|
return []
|
|
}
|
|
},
|
|
...triggerCharacters
|
|
)
|
|
}
|
|
|
|
function prefixItems(items, str, prefix) {
|
|
const addPrefix =
|
|
typeof prefix !== 'undefined' && prefix !== '' && str === prefix
|
|
|
|
return Object.keys(items).map(x => {
|
|
const item = items[x].item
|
|
if (addPrefix) {
|
|
item.filterText = item.insertText = `${prefix}${item.label}`
|
|
} else {
|
|
item.filterText = item.insertText = item.label
|
|
}
|
|
return item
|
|
})
|
|
}
|
|
|
|
function depthOf(obj) {
|
|
if (typeof obj !== 'object' || Array.isArray(obj)) return 0
|
|
|
|
let level = 1
|
|
|
|
for (let key in obj) {
|
|
if (!obj.hasOwnProperty(key)) continue
|
|
|
|
if (typeof obj[key] === 'object') {
|
|
const depth = depthOf(obj[key]) + 1
|
|
level = Math.max(depth, level)
|
|
}
|
|
}
|
|
|
|
return level
|
|
}
|
|
|
|
function createItems(classNames, separator, config, parent = '') {
|
|
let items = {}
|
|
let i = 0
|
|
|
|
Object.keys(classNames).forEach(key => {
|
|
if (depthOf(classNames[key]) === 0) {
|
|
const item = new vscode.CompletionItem(
|
|
key,
|
|
vscode.CompletionItemKind.Constant
|
|
)
|
|
item.sortText = naturalExpand(i.toString())
|
|
if (key !== 'container' && key !== 'group') {
|
|
if (parent) {
|
|
item.detail = classNames[key].replace(
|
|
new RegExp(`:${parent} \{(.*?)\}`),
|
|
'$1'
|
|
)
|
|
} else {
|
|
item.detail = classNames[key]
|
|
}
|
|
|
|
let color = getColorFromDecl(item.detail)
|
|
if (color) {
|
|
item.kind = vscode.CompletionItemKind.Color
|
|
item.documentation = color
|
|
}
|
|
}
|
|
items[key] = {
|
|
item
|
|
}
|
|
i++
|
|
} else {
|
|
const item = new vscode.CompletionItem(
|
|
`${key}${separator}`,
|
|
vscode.CompletionItemKind.Constant
|
|
)
|
|
item.sortText = naturalExpand(i.toString())
|
|
item.command = { title: '', command: 'editor.action.triggerSuggest' }
|
|
if (key === 'hover' || key === 'focus' || key === 'active') {
|
|
item.detail = `:${key}`
|
|
item.sortText = `a${item.sortText}`
|
|
} else if (key === 'group-hover') {
|
|
item.detail = '.group:hover &'
|
|
item.sortText = `a${item.sortText}`
|
|
} else if (
|
|
config.screens &&
|
|
Object.keys(config.screens).indexOf(key) !== -1
|
|
) {
|
|
item.detail = `@media (min-width: ${config.screens[key]})`
|
|
item.sortText = `m${item.sortText}`
|
|
}
|
|
items[key] = {
|
|
item,
|
|
children: createItems(classNames[key], separator, config, key)
|
|
}
|
|
i++
|
|
}
|
|
})
|
|
|
|
return items
|
|
}
|
|
|
|
function createConfigItems(config) {
|
|
let items = {}
|
|
let i = 0
|
|
|
|
Object.keys(config).forEach(key => {
|
|
let item = new vscode.CompletionItem(
|
|
key,
|
|
vscode.CompletionItemKind.Constant
|
|
)
|
|
|
|
if (depthOf(config[key]) === 0) {
|
|
if (key === 'plugins') return
|
|
|
|
item.filterText = item.insertText = `.${key}`
|
|
item.sortText = naturalExpand(i.toString())
|
|
if (typeof config[key] === 'string' || typeof config[key] === 'number') {
|
|
item.detail = config[key]
|
|
|
|
let color = getColorFromValue(item.detail)
|
|
if (color) {
|
|
item.kind = vscode.CompletionItemKind.Color
|
|
item.documentation = color
|
|
}
|
|
} else if (Array.isArray(config[key])) {
|
|
item.detail = stringifyArray(config[key])
|
|
}
|
|
items[key] = { item }
|
|
} else {
|
|
if (key === 'modules' || key === 'options') return
|
|
|
|
item.filterText = item.insertText = `${key}.`
|
|
item.sortText = naturalExpand(i.toString())
|
|
item.command = { title: '', command: 'editor.action.triggerSuggest' }
|
|
items[key] = { item, children: createConfigItems(config[key]) }
|
|
}
|
|
|
|
i++
|
|
})
|
|
|
|
return items
|
|
}
|
|
|
|
class TailwindIntellisense {
|
|
private _providers: vscode.Disposable[]
|
|
private _disposable: vscode.Disposable
|
|
private _tailwind
|
|
private _items
|
|
private _configItems
|
|
|
|
constructor(tailwind) {
|
|
if (tailwind) {
|
|
this._tailwind = tailwind
|
|
this.reload(tailwind)
|
|
}
|
|
}
|
|
|
|
public reload(tailwind) {
|
|
this.dispose()
|
|
|
|
const separator = dlv(tailwind.config, 'options.separator', ':')
|
|
|
|
if (separator !== ':') return
|
|
|
|
this._items = createItems(tailwind.classNames, separator, tailwind.config)
|
|
this._configItems = createConfigItems(tailwind.config)
|
|
|
|
this._providers = []
|
|
|
|
this._providers.push(
|
|
createCompletionItemProvider(
|
|
this._items,
|
|
JS_TYPES,
|
|
/\btw`([^`]*)$/,
|
|
['`', ' ', separator],
|
|
tailwind.config
|
|
)
|
|
)
|
|
|
|
this._providers.push(
|
|
createCompletionItemProvider(
|
|
this._items,
|
|
CSS_TYPES,
|
|
/@apply ([^;}]*)$/,
|
|
['.', separator],
|
|
tailwind.config,
|
|
'.'
|
|
)
|
|
)
|
|
|
|
this._providers.push(
|
|
createCompletionItemProvider(
|
|
this._items,
|
|
HTML_TYPES,
|
|
/\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
|
|
["'", '"', ' ', separator],
|
|
tailwind.config
|
|
)
|
|
)
|
|
|
|
this._providers.push(
|
|
vscode.languages.registerCompletionItemProvider(
|
|
['css', 'sass', 'scss'],
|
|
{
|
|
provideCompletionItems: (
|
|
document: vscode.TextDocument,
|
|
position: vscode.Position
|
|
): vscode.CompletionItem[] => {
|
|
const range: vscode.Range = new vscode.Range(
|
|
new vscode.Position(Math.max(position.line - 5, 0), 0),
|
|
position
|
|
)
|
|
const text: string = document.getText(range)
|
|
|
|
let matches = text.match(/config\(["']([^"']*)$/)
|
|
|
|
if (!matches) return []
|
|
|
|
let objPath =
|
|
matches[1]
|
|
.replace(/\.[^.]*$/, '')
|
|
.replace('.', '.children.')
|
|
.trim() + '.children'
|
|
let foo = dlv(this._configItems, objPath)
|
|
|
|
if (foo) {
|
|
console.log(Object.keys(foo).map(x => foo[x].item))
|
|
return Object.keys(foo).map(x => foo[x].item)
|
|
}
|
|
|
|
return Object.keys(this._configItems).map(
|
|
x => this._configItems[x].item
|
|
)
|
|
}
|
|
},
|
|
"'",
|
|
'"',
|
|
'.'
|
|
)
|
|
)
|
|
|
|
this._providers.push(
|
|
vscode.languages.registerHoverProvider(HTML_TYPES, {
|
|
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 (!/\bclass(Name)?=['"][^'"]*$/.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() {
|
|
if (this._disposable) {
|
|
this._disposable.dispose()
|
|
}
|
|
}
|
|
}
|
|
|
|
function pad(n) {
|
|
return ('00000000' + n).substr(-8)
|
|
}
|
|
|
|
function naturalExpand(a: string) {
|
|
return a.replace(/\d+/g, pad)
|
|
}
|
|
|
|
function stringifyArray(arr: Array<any>): string {
|
|
return arr
|
|
.reduce((acc, curr) => {
|
|
let str = curr.toString()
|
|
if (str.includes(' ')) {
|
|
acc.push(`"${str.replace(/\s\s+/g, ' ')}"`)
|
|
} else {
|
|
acc.push(str)
|
|
}
|
|
return acc
|
|
}, [])
|
|
.join(', ')
|
|
}
|
|
|
|
function escapeClassName(className) {
|
|
return className.replace(/([^A-Za-z0-9\-])/g, '\\$1')
|
|
}
|
|
|
|
function getColorFromDecl(cssStr: string) {
|
|
let matches = cssStr.match(/: ([^;]+);/g)
|
|
if (matches === null || matches.length > 1) return
|
|
|
|
let color = matches[0].slice(2, -1).trim()
|
|
|
|
return getColorFromValue(color)
|
|
}
|
|
|
|
function getColorFromValue(value: string) {
|
|
if (value === 'transparent') {
|
|
return 'rgba(0, 0, 0, 0.01)'
|
|
}
|
|
|
|
try {
|
|
let parsed = Color(value)
|
|
if (parsed.valpha === 0) return 'rgba(0, 0, 0, 0.01)'
|
|
return parsed.rgb().string()
|
|
} catch (err) {
|
|
return
|
|
}
|
|
}
|