Skip to content

Commit

Permalink
Merge pull request #38 from ony3000/fix-vue-reversible
Browse files Browse the repository at this point in the history 
Fix delimiter for certain types of short enough class names written in vue expressions
  • Loading branch information
@ony3000
ony3000 authored Feb 17, 2024
2 parents 9f3d573 + cd50cba commit d367542
Show file tree
Hide file tree
Showing 3 changed files with 597 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/packages/core-parts/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@ function getSomeKindOfQuotes(
parser === 'vue' &&
[
ClassNameType.FA,
ClassNameType.CSL,
ClassNameType.SLSL,
ClassNameType.SLOP,
ClassNameType.SLTO,
ClassNameType.CTL,
ClassNameType.TLSL,
ClassNameType.TLOP,
Expand Down
297 changes: 297 additions & 0 deletions tests/v2-test/vue/expression.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,303 @@ import clsx from "clsx";
<slot></slot>
</div>
</template>
`,
},
{
name: 'issue #37 - short enough conditional class name (no error in v0.4.0, error in v0.5.0 ~ v0.6.0)',
input: `
<template>
<div
:class="{
'bg-black': true
}">Some text</div>
</template>
`,
output: `<template>
<div
:class="{
'bg-black': true,
}"
>
Some text
</div>
</template>
`,
},
{
name: 'class name type checking (1) - short enough FA',
input: `
<script setup lang="ts">
const foo = classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4');
</script>
<template>
<div :class="classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4')">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
const foo = classNames(
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
);
</script>
<template>
<div
:class="
classNames(
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
)
"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (2) - short enough CSL',
input: `
<script setup lang="ts">
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'];
</script>
<template>
<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']">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
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",
];
</script>
<template>
<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',
]"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (3) - short enough SLSL',
input: `
<script setup lang="ts">
const foo = ['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'];
</script>
<template>
<div :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
const foo = ["rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"];
</script>
<template>
<div
:class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (4) - short enough SLOP',
input: `
<script setup lang="ts">
const foo = classNames({'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true});
</script>
<template>
<div :class="{'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true}">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
const foo = classNames({
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
});
</script>
<template>
<div
:class="{
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
}"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (5) - short enough SLTO',
input: `
<script setup lang="ts">
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']);
</script>
<template>
<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']">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
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",
]);
</script>
<template>
<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',
]"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (6) - short enough CTL',
input: `
<script setup lang="ts">
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\`];
</script>
<template>
<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\`]">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
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\`,
];
</script>
<template>
<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',
]"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (7) - short enough TLSL',
input: `
<script setup lang="ts">
const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
</script>
<template>
<div :class="[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
</script>
<template>
<div
:class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (8) - short enough TLOP',
input: `
<script setup lang="ts">
const foo = classNames({[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true});
</script>
<template>
<div :class="{[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true}">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
const foo = classNames({
"rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
});
</script>
<template>
<div
:class="{
'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
}"
>
<slot></slot>
</div>
</template>
`,
},
{
name: 'class name type checking (9) - short enough TLTO',
input: `
<script setup lang="ts">
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\`]);
</script>
<template>
<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\`]">
<slot></slot>
</div>
</template>
`,
output: `<script setup lang="ts">
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",
]);
</script>
<template>
<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',
]"
>
<slot></slot>
</div>
</template>
`,
},
{
Expand Down
Loading

0 comments on commit d367542

Please sign in to comment.