jolheiser
/
tailwind-ctp-intellisense
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Theme helper improvements

master
Brad Cornes 2022-10-17 17:56:00 +01:00
parent c9acd0d124
commit 1b730cb656
9 changed files with 179 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/tailwindcss-language-server/src/language/cssServer.ts
View File

@ -162,11 +162,16 @@ connection.onCompletion(async ({ textDocument, position }, _token) =>
{
...item,
label: 'theme()',
filterText: 'theme',
documentation: {
kind: 'markdown',
value:
'Use the `theme()` function to access your Tailwind config values using dot notation.',
},
command: {
title: '',
command: 'editor.action.triggerSuggest',
},
textEdit: {
...item.textEdit,
newText: item.textEdit.newText.replace(/^calc\(/, 'theme('),
@ -357,6 +362,7 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument {
/@media(\s+screen\s*\([^)]+\))/g,
(_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`
)
.replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_')
)
}

1
packages/tailwindcss-language-server/src/server.ts
View File

@ -112,6 +112,7 @@ const TRIGGER_CHARACTERS = [
// @apply and emmet-style
'.',
// config/theme helper
'(',
'[',
// JIT "important" prefix
'!',

69
packages/tailwindcss-language-service/src/completionProvider.ts
View File

@ -503,6 +503,11 @@ function provideAtApplyCompletions(
)
}
const NUMBER_REGEX = /^(\d+\.?|\d*\.\d+)$/
function isNumber(str: string): boolean {
return NUMBER_REGEX.test(str)
}
async function provideClassNameCompletions(
state: State,
document: TextDocument,
@ -537,14 +542,26 @@ function provideCssHelperCompletions(
const match = text
.substr(0, text.length - 1) // don't include that extra character from earlier
.match(/\b(?<helper>config|theme)\(['"](?<keys>[^'"]*)$/)
.match(/\b(?<helper>config|theme)\(\s*['"]?(?<path>[^)'"]*)$/)
if (match === null) {
return null
}
let alpha: string
let path = match.groups.path.replace(/^['"]+/g, '')
let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]*))$/)
if (matches) {
path = matches[1]
alpha = matches[2]
}
if (alpha !== undefined) {
return null
}
let base = match.groups.helper === 'config' ? state.config : dlv(state.config, 'theme', {})
let parts = match.groups.keys.split(/([\[\].]+)/)
let parts = path.split(/([\[\].]+)/)
let keys = parts.filter((_, i) => i % 2 === 0)
let separators = parts.filter((_, i) => i % 2 !== 0)
// let obj =
@ -557,7 +574,7 @@ function provideCssHelperCompletions(
}
let obj: any
let offset: number = 0
let offset: number = keys[keys.length - 1].length
let separator: string = separators.length ? separators[separators.length - 1] : null
if (keys.length === 1) {
@ -576,9 +593,32 @@ function provideCssHelperCompletions(
if (!obj) return null
let editRange = {
start: {
line: position.line,
character: position.character - offset,
},
end: position,
}
return {
isIncomplete: false,
items: Object.keys(obj).map((item, index) => {
items: Object.keys(obj)
.sort((a, z) => {
let aIsNumber = isNumber(a)
let zIsNumber = isNumber(z)
if (aIsNumber && !zIsNumber) {
return -1
}
if (!aIsNumber && zIsNumber) {
return 1
}
if (aIsNumber && zIsNumber) {
return parseFloat(a) - parseFloat(z)
}
return 0
})
.map((item, index) => {
let color = getColorFromValue(obj[item])
const replaceDot: boolean = item.indexOf('.') !== -1 && separator && separator.endsWith('.')
const insertClosingBrace: boolean =
@ -588,8 +628,10 @@ function provideCssHelperCompletions(
return {
label: item,
filterText: `${replaceDot ? '.' : ''}${item}`,
sortText: naturalExpand(index),
commitCharacters: [!item.includes('.') && '.', !item.includes('[') && '['].filter(
Boolean
),
kind: color ? 16 : isObject(obj[item]) ? 9 : 10,
// VS Code bug causes some values to not display in some cases
detail: detail === '0' || detail === 'transparent' ? `${detail} ` : detail,
@ -598,16 +640,23 @@ function provideCssHelperCompletions(
? culori.formatRgb(color)
: null,
textEdit: {
newText: `${replaceDot ? '[' : ''}${item}${insertClosingBrace ? ']' : ''}`,
newText: `${item}${insertClosingBrace ? ']' : ''}`,
range: editRange,
},
additionalTextEdits: replaceDot
? [
{
newText: '[',
range: {
start: {
line: position.line,
character:
position.character - keys[keys.length - 1].length - (replaceDot ? 1 : 0) - offset,
...editRange.start,
character: editRange.start.character - 1,
},
end: position,
end: editRange.start,
},
},
]
: [],
data: 'helper',
}
}),

48
packages/tailwindcss-language-service/src/diagnostics/getInvalidConfigPathDiagnostics.ts
View File

@ -1,16 +1,12 @@
import { State, Settings } from '../util/state'
import type { TextDocument, Range, DiagnosticSeverity } from 'vscode-languageserver'
import type { TextDocument } from 'vscode-languageserver'
import { InvalidConfigPathDiagnostic, DiagnosticKind } from './types'
import { isCssDoc } from '../util/css'
import { getLanguageBoundaries } from '../util/getLanguageBoundaries'
import { findAll, indexToPosition } from '../util/find'
import { findHelperFunctionsInDocument } from '../util/find'
import { stringToPath } from '../util/stringToPath'
import isObject from '../util/isObject'
import { closest } from '../util/closest'
import { absoluteRange } from '../util/absoluteRange'
import { combinations } from '../util/combinations'
import dlv from 'dlv'
import { getTextWithoutComments } from '../util/doc'
function pathToString(path: string | string[]): string {
if (typeof path === 'string') return path
@ -167,47 +163,18 @@ export function getInvalidConfigPathDiagnostics(
if (severity === 'ignore') return []
let diagnostics: InvalidConfigPathDiagnostic[] = []
let ranges: Range[] = []
if (isCssDoc(state, document)) {
ranges.push(undefined)
} else {
let boundaries = getLanguageBoundaries(state, document)
if (!boundaries) return []
ranges.push(...boundaries.filter((b) => b.type === 'css').map(({ range }) => range))
}
ranges.forEach((range) => {
let text = getTextWithoutComments(document, 'css', range)
let matches = findAll(
/(?<prefix>\s|^)(?<helper>config|theme)\((?<quote>['"])(?<key>[^)]+)\k<quote>[^)]*\)/g,
text
)
matches.forEach((match) => {
let base = match.groups.helper === 'theme' ? ['theme'] : []
let result = validateConfigPath(state, match.groups.key, base)
findHelperFunctionsInDocument(state, document).forEach((helperFn) => {
let base = helperFn.helper === 'theme' ? ['theme'] : []
let result = validateConfigPath(state, helperFn.path, base)
if (result.isValid === true) {
return null
return
}
let startIndex =
match.index +
match.groups.prefix.length +
match.groups.helper.length +
1 + // open paren
match.groups.quote.length
diagnostics.push({
code: DiagnosticKind.InvalidConfigPath,
range: absoluteRange(
{
start: indexToPosition(text, startIndex),
end: indexToPosition(text, startIndex + match.groups.key.length),
},
range
),
range: helperFn.ranges.path,
severity:
severity === 'error'
? 1 /* DiagnosticSeverity.Error */
@ -216,7 +183,6 @@ export function getInvalidConfigPathDiagnostics(
suggestions: result.suggestions,
})
})
})
return diagnostics
}

4
packages/tailwindcss-language-service/src/documentColorProvider.ts
View File

@ -36,12 +36,12 @@ export async function getDocumentColors(
let helperFns = findHelperFunctionsInDocument(state, document)
helperFns.forEach((fn) => {
let keys = stringToPath(fn.value)
let keys = stringToPath(fn.path)
let base = fn.helper === 'theme' ? ['theme'] : []
let value = dlv(state.config, [...base, ...keys])
let color = getColorFromValue(value)
if (color && typeof color !== 'string' && (color.alpha ?? 1) !== 0) {
colors.push({ range: fn.valueRange, color: culoriColorToVscodeColor(color) })
colors.push({ range: fn.ranges.path, color: culoriColorToVscodeColor(color) })
}
})

59
packages/tailwindcss-language-service/src/hoverProvider.ts
View File

@ -3,12 +3,12 @@ import type { Hover, TextDocument, Position } from 'vscode-languageserver'
import { stringifyCss, stringifyConfigValue } from './util/stringify'
import dlv from 'dlv'
import { isCssContext } from './util/css'
import { findClassNameAtPosition } from './util/find'
import { findClassNameAtPosition, findHelperFunctionsInRange } from './util/find'
import { validateApply } from './util/validateApply'
import { getClassNameParts } from './util/getClassNameAtPosition'
import * as jit from './util/jit'
import { validateConfigPath } from './diagnostics/getInvalidConfigPathDiagnostics'
import { getTextWithoutComments } from './util/doc'
import { isWithinRange } from './util/isWithinRange'
export async function doHover(
state: State,
@ -22,49 +22,34 @@ export async function doHover(
}
function provideCssHelperHover(state: State, document: TextDocument, position: Position): Hover {
if (!isCssContext(state, document, position)) return null
const line = getTextWithoutComments(document, 'css').split('\n')[position.line]
const match = line.match(/(?<helper>theme|config)\((?<quote>['"])(?<key>[^)]+)\k<quote>[^)]*\)/)
if (match === null) return null
const startChar = match.index + match.groups.helper.length + 2
const endChar = startChar + match.groups.key.length
if (position.character < startChar || position.character >= endChar) {
if (!isCssContext(state, document, position)) {
return null
}
let key = match.groups.key
.split(/(\[[^\]]+\]|\.)/)
.filter(Boolean)
.filter((x) => x !== '.')
.map((x) => x.replace(/^\[([^\]]+)\]$/, '$1'))
let helperFns = findHelperFunctionsInRange(document, {
start: { line: position.line, character: 0 },
end: { line: position.line + 1, character: 0 },
})
if (key.length === 0) return null
if (match.groups.helper === 'theme') {
key = ['theme', ...key]
for (let helperFn of helperFns) {
if (isWithinRange(position, helperFn.ranges.path)) {
let validated = validateConfigPath(
state,
helperFn.path,
helperFn.helper === 'theme' ? ['theme'] : []
)
let value = validated.isValid ? stringifyConfigValue(validated.value) : null
if (value === null) {
return null
}
const value = validateConfigPath(state, key).isValid
? stringifyConfigValue(dlv(state.config, key))
: null
if (value === null) return null
return {
contents: { kind: 'markdown', value: ['```plaintext', value, '```'].join('\n') },
range: {
start: { line: position.line, character: startChar },
end: {
line: position.line,
character: endChar,
},
},
range: helperFn.ranges.path,
}
}
}
return null
}
async function provideClassNameHover(

42
packages/tailwindcss-language-service/src/util/find.ts
View File

@ -359,36 +359,48 @@ export function findHelperFunctionsInRange(
range?: Range
): DocumentHelperFunction[] {
const text = getTextWithoutComments(doc, 'css', range)
const matches = findAll(
/(?<before>^|\s)(?<helper>theme|config)\((?:(?<single>')([^']+)'|(?<double>")([^"]+)")[^)]*\)/gm,
let matches = findAll(
/(?<prefix>\s|^)(?<helper>config|theme)(?<innerPrefix>\(\s*)(?<path>[^)]*?)\s*\)/g,
text
)
return matches.map((match) => {
let value = match[4] || match[6]
let startIndex = match.index + match.groups.before.length
let quotesBefore = ''
let path = match.groups.path.replace(/['"]+$/, '').replace(/^['"]+/, (m) => {
quotesBefore = m
return ''
})
let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/)
if (matches) {
path = matches[1]
}
path = path.replace(/['"]*\s*$/, '')
let startIndex =
match.index +
match.groups.prefix.length +
match.groups.helper.length +
match.groups.innerPrefix.length
return {
full: match[0].substr(match.groups.before.length),
value,
helper: match.groups.helper === 'theme' ? 'theme' : 'config',
quotes: match.groups.single ? "'" : '"',
range: resolveRange(
path,
ranges: {
full: resolveRange(
{
start: indexToPosition(text, startIndex),
end: indexToPosition(text, match.index + match[0].length),
end: indexToPosition(text, startIndex + match.groups.path.length),
},
range
),
valueRange: resolveRange(
path: resolveRange(
{
start: indexToPosition(text, startIndex + match.groups.helper.length + 1),
end: indexToPosition(
text,
startIndex + match.groups.helper.length + 1 + 1 + value.length + 1
),
start: indexToPosition(text, startIndex + quotesBefore.length),
end: indexToPosition(text, startIndex + quotesBefore.length + path.length),
},
range
),
},
}
})
}

10
packages/tailwindcss-language-service/src/util/state.ts
View File

@ -124,12 +124,12 @@ export type DocumentClassName = {
}
export type DocumentHelperFunction = {
full: string
helper: 'theme' | 'config'
value: string
quotes: '"' | "'"
range: Range
valueRange: Range
path: string
ranges: {
full: Range
path: Range
}
}
export type ClassNameMeta = {

6
packages/vscode-tailwindcss/src/extension.ts
View File

@ -378,7 +378,11 @@ export async function activate(context: ExtensionContext) {
async resolveCompletionItem(item, token, next) {
let result = await next(item, token)
let selections = Window.activeTextEditor.selections
if (selections.length > 1 && result.additionalTextEdits?.length > 0) {
if (
result['data'] === 'variant' &&
selections.length > 1 &&
result.additionalTextEdits?.length > 0
) {
let length =
selections[0].start.character - result.additionalTextEdits[0].range.start.character
let prefixLength =