shadcn-vue/packages/cli/test/utils/transform-css-vars.test.ts
Sadegh Barati 0e84af73de
feat: use unjs modules and improve cli from main shadcn-ui source, custom ui dir (#324)
* feat: add devDeps, add nypm for installing deps

* feat: custom ui dir

* refactor: use consola instead of chalk

* test: ui alias

* refactor: import { z } from 'zod' instead of *, replace node:path with pathe

* chore: add components name to `configFile` option

* chore: update `c12` which fix json5 parse issue

and it also supports .config directory

* chore: update `https-proxy-agent`

* fix: await until dependencies are installed then run detypes process

* feat: add tailwind prefix

* test: tw-prefix snapshot

* chore: add prefix option to init

* test: apply prefix

* fix: tw-prefix parse wrongly

* chore: hide prefix temporarily

---------

Co-authored-by: zernonia <zernonia@gmail.com>
2024-03-06 05:38:19 +03:30

70 lines
1.7 KiB
TypeScript

import { expect, it } from 'vitest'
import { transform } from '../../src/utils/transformers'
import stone from '../fixtures/colors/stone.json'
it('transform css vars', async () => {
expect(
await transform({
filename: 'app.vue',
raw: `<script setup lang="ts"></script>
<template>
<div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
</template>"`,
config: {
tailwind: {
baseColor: 'stone',
cssVariables: true,
},
aliases: {
components: '@/components',
utils: '@/lib/utils',
},
},
baseColor: stone,
}),
).toMatchSnapshot()
expect(
await transform({
filename: 'app.vue',
raw: `<script setup lang="ts"></script>
<template>
<div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
</template>"`,
config: {
tailwind: {
baseColor: 'stone',
cssVariables: false,
},
aliases: {
components: '@/components',
utils: '@/lib/utils',
},
},
baseColor: stone,
}),
).toMatchSnapshot()
expect(
await transform({
filename: 'app.vue',
raw: `<script setup lang="ts"></script>
<template>
<div :class="cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')">foo</div>
</template>"`,
config: {
tailwind: {
baseColor: 'stone',
cssVariables: false,
},
aliases: {
components: '@/components',
utils: '@/lib/utils',
},
},
baseColor: stone,
}),
).toMatchSnapshot()
})