add @screen completion item detail
parent
2cd6b792c1
commit
01f37e2c30
|
@ -14,6 +14,7 @@ import { isHtmlContext } from '../util/html'
|
|||
import { isCssContext } from '../util/css'
|
||||
import { findLast, findJsxStrings, arrFindLast } from '../util/find'
|
||||
import { stringifyConfigValue, stringifyCss } from '../util/stringify'
|
||||
import { stringifyScreen, Screen } from '../util/screens'
|
||||
import isObject from '../util/isObject'
|
||||
import * as emmetHelper from 'emmet-helper'
|
||||
import { isValidLocationForEmmetAbbreviation } from '../util/isValidLocationForEmmetAbbreviation'
|
||||
|
@ -380,6 +381,7 @@ function provideScreenDirectiveCompletions(
|
|||
items: Object.keys(screens).map((screen) => ({
|
||||
label: screen,
|
||||
kind: CompletionItemKind.Constant,
|
||||
data: 'screen',
|
||||
textEdit: {
|
||||
newText: screen,
|
||||
range: {
|
||||
|
@ -564,11 +566,18 @@ export function resolveCompletionItem(
|
|||
state: State,
|
||||
item: CompletionItem
|
||||
): CompletionItem {
|
||||
if (
|
||||
item.data === 'helper' ||
|
||||
item.data === 'directive' ||
|
||||
item.data === 'variant'
|
||||
) {
|
||||
if (['helper', 'directive', 'variant'].includes(item.data)) {
|
||||
return item
|
||||
}
|
||||
|
||||
if (item.data === 'screen') {
|
||||
let screens = dlv(
|
||||
state.config,
|
||||
['theme', 'screens'],
|
||||
dlv(state.config, ['screens'], {})
|
||||
)
|
||||
if (!isObject(screens)) screens = {}
|
||||
item.detail = stringifyScreen(screens[item.label] as Screen)
|
||||
return item
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
import isObject from './isObject'
|
||||
|
||||
export type MinMaxScreen = {
|
||||
min?: string
|
||||
max?: string
|
||||
}
|
||||
|
||||
export type RawScreen = {
|
||||
raw: string
|
||||
}
|
||||
|
||||
export type Screen = string | RawScreen | MinMaxScreen | MinMaxScreen[]
|
||||
|
||||
function isRawScreen(screen: unknown): screen is RawScreen {
|
||||
return isObject(screen) && (screen as RawScreen).raw !== undefined
|
||||
}
|
||||
|
||||
export function stringifyScreen(screen: Screen): string {
|
||||
if (!screen) return
|
||||
if (typeof screen === 'string') return `@media (min-width: ${screen})`
|
||||
if (isRawScreen(screen)) {
|
||||
return `@media ${(screen as RawScreen).raw}`
|
||||
}
|
||||
let str = (Array.isArray(screen) ? screen : [screen])
|
||||
.map((range) => {
|
||||
return [
|
||||
typeof range.min === 'string' ? `(min-width: ${range.min})` : null,
|
||||
typeof range.max === 'string' ? `(max-width: ${range.max})` : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' and ')
|
||||
})
|
||||
.join(', ')
|
||||
return str ? `@media ${str}` : undefined
|
||||
}
|
Loading…
Reference in New Issue