Skip to content

Commit af8cf9c

Browse files
cgatiancgatian
authored
fix(language-server): auto complete complex utility values (#72)
1 parent 01496c6 commit af8cf9c

File tree

3 files changed

+279
-5
lines changed

3 files changed

+279
-5
lines changed

‎.changeset/pink-grapes-love.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@pandacss/language-server': minor
3+
---
4+
5+
auto complete utilities with complex tokens

‎packages/language-server/__tests__/get-completion-for.test.ts‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,3 +504,257 @@ test('display: block', () => {
504504
]
505505
`)
506506
})
507+
508+
test('width: xl', () => {
509+
const ctx = createContext()
510+
expect(getCompletionFor({ ctx, propName: 'width', propValue: 'x', settings: {} })).toMatchInlineSnapshot(`
511+
[
512+
{
513+
"data": {
514+
"propName": "width",
515+
"shorthand": undefined,
516+
"token": _Token {
517+
"deprecated": undefined,
518+
"description": undefined,
519+
"extensions": {
520+
"category": "sizes",
521+
"condition": "base",
522+
"pixelValue": "320px",
523+
"prop": "xs",
524+
"var": "--sizes-xs",
525+
"varRef": "var(--sizes-xs)",
526+
},
527+
"name": "sizes.xs",
528+
"originalValue": "20rem",
529+
"path": [
530+
"sizes",
531+
"xs",
532+
],
533+
"type": undefined,
534+
"value": "20rem",
535+
},
536+
},
537+
"kind": 20,
538+
"label": "xs",
539+
"preselect": false,
540+
"sortText": "-xs",
541+
},
542+
{
543+
"data": {
544+
"propName": "width",
545+
"shorthand": undefined,
546+
"token": undefined,
547+
},
548+
"kind": 20,
549+
"label": "xl",
550+
"preselect": false,
551+
"sortText": "-xl",
552+
},
553+
{
554+
"data": {
555+
"propName": "width",
556+
"shorthand": undefined,
557+
"token": _Token {
558+
"deprecated": undefined,
559+
"description": undefined,
560+
"extensions": {
561+
"category": "sizes",
562+
"condition": "base",
563+
"pixelValue": "672px",
564+
"prop": "2xl",
565+
"var": "--sizes-2xl",
566+
"varRef": "var(--sizes-2xl)",
567+
},
568+
"name": "sizes.2xl",
569+
"originalValue": "42rem",
570+
"path": [
571+
"sizes",
572+
"2xl",
573+
],
574+
"type": undefined,
575+
"value": "42rem",
576+
},
577+
},
578+
"kind": 20,
579+
"label": "2xl",
580+
"preselect": false,
581+
"sortText": "-0000000000002xl",
582+
},
583+
{
584+
"data": {
585+
"propName": "width",
586+
"shorthand": undefined,
587+
"token": undefined,
588+
},
589+
"kind": 20,
590+
"label": "3xl",
591+
"preselect": false,
592+
"sortText": "-0000000000003xl",
593+
},
594+
{
595+
"data": {
596+
"propName": "width",
597+
"shorthand": undefined,
598+
"token": _Token {
599+
"deprecated": undefined,
600+
"description": undefined,
601+
"extensions": {
602+
"category": "sizes",
603+
"condition": "base",
604+
"pixelValue": "896px",
605+
"prop": "4xl",
606+
"var": "--sizes-4xl",
607+
"varRef": "var(--sizes-4xl)",
608+
},
609+
"name": "sizes.4xl",
610+
"originalValue": "56rem",
611+
"path": [
612+
"sizes",
613+
"4xl",
614+
],
615+
"type": undefined,
616+
"value": "56rem",
617+
},
618+
},
619+
"kind": 20,
620+
"label": "4xl",
621+
"preselect": false,
622+
"sortText": "-0000000000004xl",
623+
},
624+
{
625+
"data": {
626+
"propName": "width",
627+
"shorthand": undefined,
628+
"token": undefined,
629+
},
630+
"kind": 20,
631+
"label": "5xl",
632+
"preselect": false,
633+
"sortText": "-0000000000005xl",
634+
},
635+
{
636+
"data": {
637+
"propName": "width",
638+
"shorthand": undefined,
639+
"token": _Token {
640+
"deprecated": undefined,
641+
"description": undefined,
642+
"extensions": {
643+
"category": "sizes",
644+
"condition": "base",
645+
"pixelValue": "1152px",
646+
"prop": "6xl",
647+
"var": "--sizes-6xl",
648+
"varRef": "var(--sizes-6xl)",
649+
},
650+
"name": "sizes.6xl",
651+
"originalValue": "72rem",
652+
"path": [
653+
"sizes",
654+
"6xl",
655+
],
656+
"type": undefined,
657+
"value": "72rem",
658+
},
659+
},
660+
"kind": 20,
661+
"label": "6xl",
662+
"preselect": false,
663+
"sortText": "-0000000000006xl",
664+
},
665+
{
666+
"data": {
667+
"propName": "width",
668+
"shorthand": undefined,
669+
"token": undefined,
670+
},
671+
"kind": 20,
672+
"label": "7xl",
673+
"preselect": false,
674+
"sortText": "-0000000000007xl",
675+
},
676+
{
677+
"data": {
678+
"propName": "width",
679+
"shorthand": undefined,
680+
"token": _Token {
681+
"deprecated": undefined,
682+
"description": undefined,
683+
"extensions": {
684+
"category": "sizes",
685+
"condition": "base",
686+
"pixelValue": "1440px",
687+
"prop": "8xl",
688+
"var": "--sizes-8xl",
689+
"varRef": "var(--sizes-8xl)",
690+
},
691+
"name": "sizes.8xl",
692+
"originalValue": "90rem",
693+
"path": [
694+
"sizes",
695+
"8xl",
696+
],
697+
"type": undefined,
698+
"value": "90rem",
699+
},
700+
},
701+
"kind": 20,
702+
"label": "8xl",
703+
"preselect": false,
704+
"sortText": "-0000000000008xl",
705+
},
706+
{
707+
"data": {
708+
"propName": "width",
709+
"shorthand": undefined,
710+
"token": undefined,
711+
},
712+
"kind": 20,
713+
"label": "max",
714+
"preselect": false,
715+
"sortText": "-max",
716+
},
717+
{
718+
"data": {
719+
"propName": "width",
720+
"shorthand": undefined,
721+
"token": _Token {
722+
"deprecated": undefined,
723+
"description": undefined,
724+
"extensions": {
725+
"category": "sizes",
726+
"condition": "base",
727+
"pixelValue": "1280px",
728+
"prop": "breakpoint-xl",
729+
"var": "--sizes-breakpoint-xl",
730+
"varRef": "var(--sizes-breakpoint-xl)",
731+
},
732+
"name": "sizes.breakpoint-xl",
733+
"originalValue": "1280px",
734+
"path": [
735+
"sizes",
736+
"breakpoint-xl",
737+
],
738+
"type": undefined,
739+
"value": "1280px",
740+
},
741+
},
742+
"kind": 20,
743+
"label": "breakpoint-xl",
744+
"preselect": false,
745+
"sortText": "-breakpoint-xl",
746+
},
747+
{
748+
"data": {
749+
"propName": "width",
750+
"shorthand": undefined,
751+
"token": undefined,
752+
},
753+
"kind": 20,
754+
"label": "breakpoint-2xl",
755+
"preselect": false,
756+
"sortText": "-breakpoint1000000000002xl",
757+
},
758+
]
759+
`)
760+
})

‎packages/language-server/src/completion-provider.ts‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -151,13 +151,28 @@ export const getCompletionFor = ({
151151
category = utility.values
152152
} else if (typeof utility.values === 'function') {
153153
// values: (theme) => { ...theme("spacing") }
154-
const record = ctx.utility.getPropertyValues(utility, (cat) => {
155-
category = cat
156-
return cat
154+
const record = ctx.utility.getPropertyValues(utility, (key) => {
155+
return `types:Tokens["${key}"]`
157156
})
158157
if (record) {
159-
if (record.type) category = record.type as string
160-
else propValues = record as Record<string, string>
158+
if (record.type) {
159+
category = record.type as string
160+
} else {
161+
const newRecord: Record<string, string> = {}
162+
// itterate through record keys and extract sub values if they are present
163+
Object.entries(record as Record<string, string | {}>).forEach(([name, value]) => {
164+
if (typeof value === 'string') {
165+
newRecord[name] = value
166+
return
167+
}
168+
// flatten token
169+
Object.entries(value as Record<string, string>).forEach(([subName, subValue]) => {
170+
newRecord[subName] = subValue
171+
})
172+
return
173+
})
174+
propValues = newRecord
175+
}
161176
}
162177
}
163178
}

0 commit comments

Comments
 (0)