tailwindcss/packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.test.ts at 19104ab378cad59477f854189e7929578a2d0d51 · tailwindlabs/tailwindcss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import { expect, test } from 'vitest'
import { modernizeArbitraryValues } from './modernize-arbitrary-values'

test.each([
  // Arbitrary variants
  ['[[data-visible]]:flex', 'data-visible:flex'],
  ['[&[data-visible]]:flex', 'data-visible:flex'],
  ['[[data-visible]&]:flex', 'data-visible:flex'],
  ['[&>[data-visible]]:flex', '*:data-visible:flex'],
  ['[&_>_[data-visible]]:flex', '*:data-visible:flex'],
  ['[&>*]:flex', '*:flex'],
  ['[&_>_*]:flex', '*:flex'],

  ['[&_[data-visible]]:flex', '**:data-visible:flex'],
  ['[&_*]:flex', '**:flex'],

  ['[&:first-child]:flex', 'first:flex'],
  ['[&:not(:first-child)]:flex', 'not-first:flex'],

  // nth-child
  ['[&:nth-child(2)]:flex', 'nth-2:flex'],
  ['[&:not(:nth-child(2))]:flex', 'not-nth-2:flex'],

  ['[&:nth-child(-n+3)]:flex', 'nth-[-n+3]:flex'],
  ['[&:not(:nth-child(-n+3))]:flex', 'not-nth-[-n+3]:flex'],
  ['[&:nth-child(-n_+_3)]:flex', 'nth-[-n+3]:flex'],
  ['[&:not(:nth-child(-n_+_3))]:flex', 'not-nth-[-n+3]:flex'],

  // nth-last-child
  ['[&:nth-last-child(2)]:flex', 'nth-last-2:flex'],
  ['[&:not(:nth-last-child(2))]:flex', 'not-nth-last-2:flex'],

  ['[&:nth-last-child(-n+3)]:flex', 'nth-last-[-n+3]:flex'],
  ['[&:not(:nth-last-child(-n+3))]:flex', 'not-nth-last-[-n+3]:flex'],
  ['[&:nth-last-child(-n_+_3)]:flex', 'nth-last-[-n+3]:flex'],
  ['[&:not(:nth-last-child(-n_+_3))]:flex', 'not-nth-last-[-n+3]:flex'],

  // nth-child odd/even
  ['[&:nth-child(odd)]:flex', 'odd:flex'],
  ['[&:not(:nth-child(odd))]:flex', 'even:flex'],
  ['[&:nth-child(even)]:flex', 'even:flex'],
  ['[&:not(:nth-child(even))]:flex', 'odd:flex'],

  // Keep multiple attribute selectors as-is
  ['[[data-visible][data-dark]]:flex', '[[data-visible][data-dark]]:flex'],

  // Complex attribute selectors with operators, quotes and insensitivity flags
  ['[[data-url*="example"]]:flex', 'data-[url*="example"]:flex'],
  ['[[data-url$=".com"_i]]:flex', 'data-[url$=".com"_i]:flex'],
  ['[[data-url$=.com_i]]:flex', 'data-[url$=.com_i]:flex'],

  // Attribute selector wrapped in `&:is(…)`
  ['[&:is([data-visible])]:flex', 'data-visible:flex'],

  // Compound arbitrary variants
  ['has-[[data-visible]]:flex', 'has-data-visible:flex'],
  ['has-[&:is([data-visible])]:flex', 'has-data-visible:flex'],
  ['has-[&>[data-visible]]:flex', 'has-[&>[data-visible]]:flex'],

  ['has-[[data-slot=description]]:flex', 'has-data-[slot=description]:flex'],
  ['has-[&:is([data-slot=description])]:flex', 'has-data-[slot=description]:flex'],

  ['has-[[aria-visible="true"]]:flex', 'has-aria-visible:flex'],
  ['has-[[aria-visible]]:flex', 'has-aria-[visible]:flex'],

  ['has-[&:not(:nth-child(even))]:flex', 'has-odd:flex'],
])('%s => %s', async (candidate, result) => {
  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  expect(modernizeArbitraryValues(designSystem, {}, candidate)).toEqual(result)
})