443 lines
12 KiB
TypeScript
443 lines
12 KiB
TypeScript
import { State } from '../util/state'
|
||
import {
|
||
CompletionItem,
|
||
CompletionItemKind,
|
||
CompletionParams,
|
||
Range,
|
||
MarkupKind,
|
||
CompletionList,
|
||
} from 'vscode-languageserver'
|
||
const dlv = require('dlv')
|
||
import removeMeta from '../util/removeMeta'
|
||
import { getColor, getColorFromString } from '../util/color'
|
||
import { isHtmlContext } from '../util/html'
|
||
import { isCssContext } from '../util/css'
|
||
import { findLast, findJsxStrings, arrFindLast } from '../util/find'
|
||
import { stringifyConfigValue, stringifyCss } from '../util/stringify'
|
||
import isObject from '../util/isObject'
|
||
|
||
function completionsFromClassList(
|
||
state: State,
|
||
classList: string,
|
||
classListRange: Range
|
||
): CompletionList {
|
||
let classNames = classList.split(/[\s+]/)
|
||
const partialClassName = classNames[classNames.length - 1]
|
||
// TODO
|
||
let sep = ':'
|
||
let parts = partialClassName.split(sep)
|
||
let subset: any
|
||
let isSubset: boolean = false
|
||
|
||
let replacementRange = {
|
||
...classListRange,
|
||
start: {
|
||
...classListRange.start,
|
||
character: classListRange.end.character - partialClassName.length,
|
||
},
|
||
}
|
||
|
||
for (let i = parts.length - 1; i > 0; i--) {
|
||
let keys = parts.slice(0, i).filter(Boolean)
|
||
subset = dlv(state.classNames.classNames, keys)
|
||
if (typeof subset !== 'undefined' && typeof subset.__rule === 'undefined') {
|
||
isSubset = true
|
||
replacementRange = {
|
||
...replacementRange,
|
||
start: {
|
||
...replacementRange.start,
|
||
character:
|
||
replacementRange.start.character +
|
||
keys.join(sep).length +
|
||
sep.length,
|
||
},
|
||
}
|
||
break
|
||
}
|
||
}
|
||
|
||
return {
|
||
isIncomplete: false,
|
||
items: Object.keys(isSubset ? subset : state.classNames.classNames).map(
|
||
(className) => {
|
||
let kind: CompletionItemKind = CompletionItemKind.Constant
|
||
let documentation: string = null
|
||
if (isContextItem(state, [className])) {
|
||
kind = CompletionItemKind.Module
|
||
} else {
|
||
const color = getColor(state, [className])
|
||
if (color) {
|
||
kind = CompletionItemKind.Color
|
||
documentation = color
|
||
}
|
||
}
|
||
|
||
return {
|
||
label: className,
|
||
kind,
|
||
documentation,
|
||
textEdit: {
|
||
newText: className,
|
||
range: replacementRange,
|
||
},
|
||
}
|
||
}
|
||
),
|
||
}
|
||
}
|
||
|
||
function provideClassAttributeCompletions(
|
||
state: State,
|
||
{ context, position, textDocument }: CompletionParams
|
||
): CompletionList {
|
||
let doc = state.editor.documents.get(textDocument.uri)
|
||
let str = doc.getText({
|
||
start: { line: Math.max(position.line - 10, 0), character: 0 },
|
||
end: position,
|
||
})
|
||
|
||
const match = findLast(/\bclass(?:Name)?=(?<initial>['"`{])/gi, str)
|
||
|
||
if (match === null) {
|
||
return null
|
||
}
|
||
|
||
const rest = str.substr(match.index + match[0].length)
|
||
|
||
if (match.groups.initial === '{') {
|
||
const strings = findJsxStrings('{' + rest)
|
||
const lastOpenString = arrFindLast(
|
||
strings,
|
||
(string) => typeof string.end === 'undefined'
|
||
)
|
||
if (lastOpenString) {
|
||
const classList = str.substr(
|
||
str.length - rest.length + lastOpenString.start - 1
|
||
)
|
||
return completionsFromClassList(state, classList, {
|
||
start: {
|
||
line: position.line,
|
||
character: position.character - classList.length,
|
||
},
|
||
end: position,
|
||
})
|
||
}
|
||
return null
|
||
}
|
||
|
||
if (rest.indexOf(match.groups.initial) !== -1) {
|
||
return null
|
||
}
|
||
|
||
return completionsFromClassList(state, rest, {
|
||
start: {
|
||
line: position.line,
|
||
character: position.character - rest.length,
|
||
},
|
||
end: position,
|
||
})
|
||
}
|
||
|
||
function provideAtApplyCompletions(
|
||
state: State,
|
||
{ context, position, textDocument }: CompletionParams
|
||
): CompletionList {
|
||
let doc = state.editor.documents.get(textDocument.uri)
|
||
let str = doc.getText({
|
||
start: { line: Math.max(position.line - 30, 0), character: 0 },
|
||
end: position,
|
||
})
|
||
|
||
const match = findLast(/@apply\s+(?<classList>[^;}]*)$/gi, str)
|
||
|
||
if (match === null) {
|
||
return null
|
||
}
|
||
|
||
const classList = match.groups.classList
|
||
|
||
return completionsFromClassList(state, classList, {
|
||
start: {
|
||
line: position.line,
|
||
character: position.character - classList.length,
|
||
},
|
||
end: position,
|
||
})
|
||
}
|
||
|
||
function provideClassNameCompletions(
|
||
state: State,
|
||
params: CompletionParams
|
||
): CompletionList {
|
||
let doc = state.editor.documents.get(params.textDocument.uri)
|
||
|
||
if (isHtmlContext(doc, params.position)) {
|
||
return provideClassAttributeCompletions(state, params)
|
||
}
|
||
|
||
if (isCssContext(doc, params.position)) {
|
||
return provideAtApplyCompletions(state, params)
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
function provideCssHelperCompletions(
|
||
state: State,
|
||
{ position, textDocument }: CompletionParams
|
||
): CompletionList {
|
||
let doc = state.editor.documents.get(textDocument.uri)
|
||
|
||
if (!isCssContext(doc, position)) {
|
||
return null
|
||
}
|
||
|
||
let text = doc.getText({
|
||
start: { line: position.line, character: 0 },
|
||
// read one extra character so we can see if it's a ] later
|
||
end: { line: position.line, character: position.character + 1 },
|
||
})
|
||
|
||
const match = text
|
||
.substr(0, text.length - 1) // don't include that extra character from earlier
|
||
.match(/\b(?<helper>config|theme)\(['"](?<keys>[^'"]*)$/)
|
||
|
||
if (match === null) {
|
||
return null
|
||
}
|
||
|
||
let base =
|
||
match.groups.helper === 'config'
|
||
? state.config
|
||
: dlv(state.config, 'theme', {})
|
||
let parts = match.groups.keys.split(/([\[\].]+)/)
|
||
let keys = parts.filter((_, i) => i % 2 === 0)
|
||
let separators = parts.filter((_, i) => i % 2 !== 0)
|
||
// let obj =
|
||
// keys.length === 1 ? base : dlv(base, keys.slice(0, keys.length - 1), {})
|
||
|
||
// if (!isObject(obj)) return null
|
||
|
||
function totalLength(arr: string[]): number {
|
||
return arr.reduce((acc, cur) => acc + cur.length, 0)
|
||
}
|
||
|
||
let obj: any
|
||
let offset: number = 0
|
||
let separator: string = separators.length
|
||
? separators[separators.length - 1]
|
||
: null
|
||
|
||
if (keys.length === 1) {
|
||
obj = base
|
||
} else {
|
||
for (let i = keys.length - 1; i > 0; i--) {
|
||
let o = dlv(base, keys.slice(0, i))
|
||
if (isObject(o)) {
|
||
obj = o
|
||
offset = totalLength(parts.slice(i * 2))
|
||
separator = separators[i - 1]
|
||
break
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!obj) return null
|
||
|
||
return {
|
||
isIncomplete: false,
|
||
items: Object.keys(obj).map((item) => {
|
||
let color = getColorFromString(obj[item])
|
||
const replaceDot: boolean =
|
||
item.indexOf('.') !== -1 && separator && separator.endsWith('.')
|
||
const insertClosingBrace: boolean =
|
||
text.charAt(text.length - 1) !== ']' &&
|
||
(replaceDot || (separator && separator.endsWith('[')))
|
||
|
||
return {
|
||
label: item,
|
||
filterText: `${replaceDot ? '.' : ''}${item}`,
|
||
kind: color
|
||
? CompletionItemKind.Color
|
||
: isObject(obj[item])
|
||
? CompletionItemKind.Module
|
||
: CompletionItemKind.Property,
|
||
detail: stringifyConfigValue(obj[item]),
|
||
documentation: color,
|
||
textEdit: {
|
||
newText: `${replaceDot ? '[' : ''}${item}${
|
||
insertClosingBrace ? ']' : ''
|
||
}`,
|
||
range: {
|
||
start: {
|
||
line: position.line,
|
||
character:
|
||
position.character -
|
||
keys[keys.length - 1].length -
|
||
(replaceDot ? 1 : 0) -
|
||
offset,
|
||
},
|
||
end: position,
|
||
},
|
||
},
|
||
data: 'helper',
|
||
}
|
||
}),
|
||
}
|
||
}
|
||
|
||
function provideCssDirectiveCompletions(
|
||
state: State,
|
||
{ position, textDocument }: CompletionParams
|
||
): CompletionList {
|
||
let doc = state.editor.documents.get(textDocument.uri)
|
||
|
||
if (!isCssContext(doc, position)) {
|
||
return null
|
||
}
|
||
|
||
let text = doc.getText({
|
||
start: { line: position.line, character: 0 },
|
||
end: position,
|
||
})
|
||
|
||
const match = text.match(/^\s*@(?<partial>[a-z]*)$/i)
|
||
|
||
if (match === null) return null
|
||
|
||
const items: CompletionItem[] = [
|
||
{
|
||
label: '@tailwind',
|
||
documentation: {
|
||
kind: MarkupKind.Markdown,
|
||
value:
|
||
'Use the `@tailwind` directive to insert Tailwind’s `base`, `components`, `utilities` and `screens` styles into your CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind)',
|
||
},
|
||
},
|
||
{
|
||
label: '@variants',
|
||
documentation: {
|
||
kind: MarkupKind.Markdown,
|
||
value:
|
||
'You can generate `responsive`, `hover`, `focus`, `active`, and `group-hover` versions of your own utilities by wrapping their definitions in the `@variants` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#variants)',
|
||
},
|
||
},
|
||
{
|
||
label: '@responsive',
|
||
documentation: {
|
||
kind: MarkupKind.Markdown,
|
||
value:
|
||
'You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#responsive)',
|
||
},
|
||
},
|
||
{
|
||
label: '@screen',
|
||
documentation: {
|
||
kind: MarkupKind.Markdown,
|
||
value:
|
||
'The `@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#screen)',
|
||
},
|
||
},
|
||
{
|
||
label: '@apply',
|
||
documentation: {
|
||
kind: MarkupKind.Markdown,
|
||
value:
|
||
'Use `@apply` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#apply)',
|
||
},
|
||
},
|
||
]
|
||
|
||
return {
|
||
isIncomplete: false,
|
||
items: items.map((item) => ({
|
||
...item,
|
||
kind: CompletionItemKind.Keyword,
|
||
data: 'directive',
|
||
textEdit: {
|
||
newText: item.label,
|
||
range: {
|
||
start: {
|
||
line: position.line,
|
||
character: position.character - match.groups.partial.length - 1,
|
||
},
|
||
end: position,
|
||
},
|
||
},
|
||
})),
|
||
}
|
||
}
|
||
|
||
export function provideCompletions(
|
||
state: State,
|
||
params: CompletionParams
|
||
): CompletionList {
|
||
if (state === null) return { items: [], isIncomplete: false }
|
||
|
||
return (
|
||
provideClassNameCompletions(state, params) ||
|
||
provideCssHelperCompletions(state, params) ||
|
||
provideCssDirectiveCompletions(state, params)
|
||
)
|
||
}
|
||
|
||
export function resolveCompletionItem(
|
||
state: State,
|
||
item: CompletionItem
|
||
): CompletionItem {
|
||
if (item.data === 'helper' || item.data === 'directive') {
|
||
return item
|
||
}
|
||
|
||
const className = state.classNames.classNames[item.label]
|
||
if (isContextItem(state, [item.label])) {
|
||
item.detail = state.classNames.context[item.label].join(', ')
|
||
} else {
|
||
item.detail = getCssDetail(state, className)
|
||
if (!item.documentation) {
|
||
item.documentation = stringifyCss(className)
|
||
if (item.detail === item.documentation) {
|
||
item.documentation = null
|
||
} else {
|
||
// item.documentation = {
|
||
// kind: MarkupKind.Markdown,
|
||
// value: ['```css', item.documentation, '```'].join('\n')
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
return item
|
||
}
|
||
|
||
function isContextItem(state: State, keys: string[]): boolean {
|
||
const item = dlv(state.classNames.classNames, keys)
|
||
return Boolean(
|
||
!item.__rule &&
|
||
!Array.isArray(item) &&
|
||
state.classNames.context[keys[keys.length - 1]]
|
||
)
|
||
}
|
||
|
||
function stringifyDecls(obj: any): string {
|
||
return Object.keys(obj)
|
||
.map((prop) => {
|
||
return `${prop}: ${obj[prop]};`
|
||
})
|
||
.join(' ')
|
||
}
|
||
|
||
function getCssDetail(state: State, className: any): string {
|
||
if (Array.isArray(className)) {
|
||
return `${className.length} rules`
|
||
}
|
||
let withoutMeta = removeMeta(className)
|
||
if (className.__decls === true) {
|
||
return stringifyDecls(withoutMeta)
|
||
}
|
||
let keys = Object.keys(withoutMeta)
|
||
if (keys.length === 1) {
|
||
return getCssDetail(state, className[keys[0]])
|
||
}
|
||
return `${keys.length} rules`
|
||
}
|