Support class modifiers (#686)

master
Brad Cornes 2023-01-03 16:22:15 +00:00 committed by GitHub
parent 3289942894
commit 07ad87e8da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 12 deletions

View File

@ -991,6 +991,9 @@ async function createProjectService(
.getClassList() .getClassList()
.filter((className) => className !== '*') .filter((className) => className !== '*')
.map((className) => { .map((className) => {
if (Array.isArray(className)) {
return [className[0], { color: getColor(state, className[0]), ...className[1] }]
}
return [className, { color: getColor(state, className) }] return [className, { color: getColor(state, className) }]
}) })
} }

View File

@ -64,14 +64,27 @@ export function completionsFromClassList(
} }
if (state.jit) { if (state.jit) {
let { variants: existingVariants, offset } = getVariantsFromClassName(state, partialClassName)
if ( if (
context && context &&
(context.triggerKind === 1 || (context.triggerKind === 1 ||
(context.triggerKind === 2 && context.triggerCharacter === '/')) && (context.triggerKind === 2 && context.triggerCharacter === '/')) &&
partialClassName.includes('/') partialClassName.includes('/')
) { ) {
// opacity modifiers // modifiers
let modifiers: string[]
let beforeSlash = partialClassName.split('/').slice(0, -1).join('/') let beforeSlash = partialClassName.split('/').slice(0, -1).join('/')
let classListContainsModifiers = state.classList.some(
(cls) => Array.isArray(cls) && cls[1].modifiers
)
if (classListContainsModifiers) {
let baseClassName = beforeSlash.slice(offset)
modifiers = state.classList.find(
(cls) => Array.isArray(cls) && cls[0] === baseClassName
)?.[1].modifiers
} else {
let testClass = beforeSlash + '/[0]' let testClass = beforeSlash + '/[0]'
let { rules } = jit.generateRules(state, [testClass]) let { rules } = jit.generateRules(state, [testClass])
if (rules.length > 0) { if (rules.length > 0) {
@ -79,10 +92,15 @@ export function completionsFromClassList(
if (!isObject(opacities)) { if (!isObject(opacities)) {
opacities = {} opacities = {}
} }
modifiers = Object.keys(opacities)
}
}
if (modifiers) {
return { return {
isIncomplete: false, isIncomplete: false,
items: Object.keys(opacities).map((opacity, index) => { items: modifiers.map((modifier, index) => {
let className = `${beforeSlash}/${opacity}` let className = `${beforeSlash}/${modifier}`
let kind: CompletionItemKind = 21 let kind: CompletionItemKind = 21
let documentation: string = null let documentation: string = null
@ -110,8 +128,6 @@ export function completionsFromClassList(
} }
} }
let { variants: existingVariants, offset } = getVariantsFromClassName(state, partialClassName)
replacementRange.start.character += offset replacementRange.start.character += offset
let important = partialClassName.substr(offset).startsWith('!') let important = partialClassName.substr(offset).startsWith('!')

View File

@ -116,7 +116,7 @@ export interface State {
editor?: EditorState editor?: EditorState
jit?: boolean jit?: boolean
jitContext?: any jitContext?: any
classList?: Array<[string, { color: culori.Color | KeywordColor | null }]> classList?: Array<[string, { color: culori.Color | KeywordColor | null; modifiers?: string[] }]>
pluginVersions?: string pluginVersions?: string
// postcssPlugins?: { before: any[]; after: any[] } // postcssPlugins?: { before: any[]; after: any[] }
} }