wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Test @import "tailwindcss" prefix(tw) explicitly + move prefix tests (#14566)

Browse source 
I noticed our prefix tests were missing an explicit test for `@import
"tailwindcss" prefix(tw)` so this PR tweaks an existing test to test
that case.

Also noticed that `prefix.test.ts` was in the `compat` folder even
though this is a v4 feature, so moved it out to the root.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan 2024-10-01 13:20:18 -04:00 • committed by GitHub
parent 65240c9240
commit 3693a71a10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 54 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

70
packages/tailwindcss/src/compat/prefix.test.ts → packages/tailwindcss/src/prefix.test.ts
View file

@ -1,6 +1,6 @@
import { expect, test } from 'vitest'
import { compile } from '..'
import plugin from '../plugin'
import { compile } from '.'
import plugin from './plugin'
const css = String.raw
@ -198,15 +198,30 @@ test('a prefix can be configured via @import theme(…)', async () => {
async loadStylesheet(id, base) {
return {
base,
content: '@theme {}',
content: css`
@theme {
--color-potato: #7a4724;
}
`,
}
},
})
// Prefixed utilities are generated
expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
.toMatchInlineSnapshot(`
".tw\\:custom {
expect(
compiler.build([
'tw:underline',
'tw:bg-potato',
'tw:hover:line-through',
'tw:custom',
'flex',
'text-potato',
]),
).toMatchInlineSnapshot(`
".tw\\:bg-potato {
background-color: var(--tw-color-potato, #7a4724);
}
.tw\\:custom {
color: red;
}
.tw\\:underline {
@ -227,18 +242,21 @@ test('a prefix can be configured via @import theme(…)', async () => {
async loadStylesheet(id, base) {
return {
base,
content: '@theme {}',
content: css`
@theme {
--color-potato: #7a4724;
}
`,
}
},
})
expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toEqual('')
expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`""`)
})
test('a prefix can be configured via @import prefix(…)', async () => {
let input = css`
@import 'tailwindcss/theme' prefix(tw);
@tailwind utilities;
@import 'tailwindcss' prefix(tw);
@utility custom {
color: red;
@ -249,15 +267,25 @@ test('a prefix can be configured via @import prefix(…)', async () => {
async loadStylesheet(id, base) {
return {
base,
content: '@theme reference {}',
content: css`
@theme {
--color-potato: #7a4724;
}
@tailwind utilities;
`,
}
},
})
// Prefixed utilities are generated
expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
expect(compiler.build(['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom']))
.toMatchInlineSnapshot(`
".tw\\:custom {
":root {
--tw-color-potato: #7a4724;
}
.tw\\:bg-potato {
background-color: var(--tw-color-potato, #7a4724);
}
.tw\\:custom {
color: red;
}
.tw\\:underline {
@ -278,12 +306,22 @@ test('a prefix can be configured via @import prefix(…)', async () => {
async loadStylesheet(id, base) {
return {
base,
content: '@theme reference {}',
content: css`
@theme {
--color-potato: #7a4724;
}
@tailwind utilities;
`,
}
},
})
expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toEqual('')
expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`
":root {
--tw-color-potato: #7a4724;
}
"
`)
})
test('a prefix must be letters only', async () => {