Skip to content

Commit d367542

Browse files
ony3000ony3000
authored
Merge pull request #38 from ony3000/fix-vue-reversible
Fix delimiter for certain types of short enough class names written in vue expressions
2 parents 9f3d573 + cd50cba commit d367542

File tree

3 files changed

+597
-0
lines changed

3 files changed

+597
-0
lines changed

‎src/packages/core-parts/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,10 @@ function getSomeKindOfQuotes(
5757
parser === 'vue' &&
5858
[
5959
ClassNameType.FA,
60+
ClassNameType.CSL,
6061
ClassNameType.SLSL,
62+
ClassNameType.SLOP,
63+
ClassNameType.SLTO,
6164
ClassNameType.CTL,
6265
ClassNameType.TLSL,
6366
ClassNameType.TLOP,

‎tests/v2-test/vue/expression.test.ts‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -382,6 +382,303 @@ import clsx from "clsx";
382382
<slot></slot>
383383
</div>
384384
</template>
385+
`,
386+
},
387+
{
388+
name: 'issue #37 - short enough conditional class name (no error in v0.4.0, error in v0.5.0 ~ v0.6.0)',
389+
input: `
390+
<template>
391+
<div
392+
:class="{
393+
'bg-black': true
394+
}">Some text</div>
395+
</template>
396+
`,
397+
output: `<template>
398+
<div
399+
:class="{
400+
'bg-black': true,
401+
}"
402+
>
403+
Some text
404+
</div>
405+
</template>
406+
`,
407+
},
408+
{
409+
name: 'class name type checking (1) - short enough FA',
410+
input: `
411+
<script setup lang="ts">
412+
const foo = classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4');
413+
</script>
414+
415+
<template>
416+
<div :class="classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4')">
417+
<slot></slot>
418+
</div>
419+
</template>
420+
`,
421+
output: `<script setup lang="ts">
422+
const foo = classNames(
423+
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
424+
);
425+
</script>
426+
427+
<template>
428+
<div
429+
:class="
430+
classNames(
431+
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
432+
)
433+
"
434+
>
435+
<slot></slot>
436+
</div>
437+
</template>
438+
`,
439+
},
440+
{
441+
name: 'class name type checking (2) - short enough CSL',
442+
input: `
443+
<script setup lang="ts">
444+
const foo = ['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4', 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'];
445+
</script>
446+
447+
<template>
448+
<div :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4', 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
449+
<slot></slot>
450+
</div>
451+
</template>
452+
`,
453+
output: `<script setup lang="ts">
454+
const foo = [
455+
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
456+
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
457+
];
458+
</script>
459+
460+
<template>
461+
<div
462+
:class="[
463+
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
464+
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
465+
]"
466+
>
467+
<slot></slot>
468+
</div>
469+
</template>
470+
`,
471+
},
472+
{
473+
name: 'class name type checking (3) - short enough SLSL',
474+
input: `
475+
<script setup lang="ts">
476+
const foo = ['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'];
477+
</script>
478+
479+
<template>
480+
<div :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
481+
<slot></slot>
482+
</div>
483+
</template>
484+
`,
485+
output: `<script setup lang="ts">
486+
const foo = ["rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"];
487+
</script>
488+
489+
<template>
490+
<div
491+
:class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
492+
>
493+
<slot></slot>
494+
</div>
495+
</template>
496+
`,
497+
},
498+
{
499+
name: 'class name type checking (4) - short enough SLOP',
500+
input: `
501+
<script setup lang="ts">
502+
const foo = classNames({'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true});
503+
</script>
504+
505+
<template>
506+
<div :class="{'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true}">
507+
<slot></slot>
508+
</div>
509+
</template>
510+
`,
511+
output: `<script setup lang="ts">
512+
const foo = classNames({
513+
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
514+
});
515+
</script>
516+
517+
<template>
518+
<div
519+
:class="{
520+
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
521+
}"
522+
>
523+
<slot></slot>
524+
</div>
525+
</template>
526+
`,
527+
},
528+
{
529+
name: 'class name type checking (5) - short enough SLTO',
530+
input: `
531+
<script setup lang="ts">
532+
const foo = classNames([true ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4' : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']);
533+
</script>
534+
535+
<template>
536+
<div :class="[true ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4' : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
537+
<slot></slot>
538+
</div>
539+
</template>
540+
`,
541+
output: `<script setup lang="ts">
542+
const foo = classNames([
543+
true
544+
? "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"
545+
: "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
546+
]);
547+
</script>
548+
549+
<template>
550+
<div
551+
:class="[
552+
true
553+
? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'
554+
: 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
555+
]"
556+
>
557+
<slot></slot>
558+
</div>
559+
</template>
560+
`,
561+
},
562+
{
563+
name: 'class name type checking (6) - short enough CTL',
564+
input: `
565+
<script setup lang="ts">
566+
const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`, \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
567+
</script>
568+
569+
<template>
570+
<div :class="[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`, \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
571+
<slot></slot>
572+
</div>
573+
</template>
574+
`,
575+
output: `<script setup lang="ts">
576+
const foo = [
577+
\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`,
578+
\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`,
579+
];
580+
</script>
581+
582+
<template>
583+
<div
584+
:class="[
585+
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
586+
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
587+
]"
588+
>
589+
<slot></slot>
590+
</div>
591+
</template>
592+
`,
593+
},
594+
{
595+
name: 'class name type checking (7) - short enough TLSL',
596+
input: `
597+
<script setup lang="ts">
598+
const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
599+
</script>
600+
601+
<template>
602+
<div :class="[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
603+
<slot></slot>
604+
</div>
605+
</template>
606+
`,
607+
output: `<script setup lang="ts">
608+
const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
609+
</script>
610+
611+
<template>
612+
<div
613+
:class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
614+
>
615+
<slot></slot>
616+
</div>
617+
</template>
618+
`,
619+
},
620+
{
621+
name: 'class name type checking (8) - short enough TLOP',
622+
input: `
623+
<script setup lang="ts">
624+
const foo = classNames({[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true});
625+
</script>
626+
627+
<template>
628+
<div :class="{[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true}">
629+
<slot></slot>
630+
</div>
631+
</template>
632+
`,
633+
output: `<script setup lang="ts">
634+
const foo = classNames({
635+
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
636+
});
637+
</script>
638+
639+
<template>
640+
<div
641+
:class="{
642+
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
643+
}"
644+
>
645+
<slot></slot>
646+
</div>
647+
</template>
648+
`,
649+
},
650+
{
651+
name: 'class name type checking (9) - short enough TLTO',
652+
input: `
653+
<script setup lang="ts">
654+
const foo = classNames([true ? \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\` : \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]);
655+
</script>
656+
657+
<template>
658+
<div :class="[true ? \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\` : \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
659+
<slot></slot>
660+
</div>
661+
</template>
662+
`,
663+
output: `<script setup lang="ts">
664+
const foo = classNames([
665+
true
666+
? "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"
667+
: "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
668+
]);
669+
</script>
670+
671+
<template>
672+
<div
673+
:class="[
674+
true
675+
? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'
676+
: 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
677+
]"
678+
>
679+
<slot></slot>
680+
</div>
681+
</template>
385682
`,
386683
},
387684
{

0 commit comments

Comments
 (0)