Repository: tailwindlabs/tailwindcss
File: packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts (TypeScript)

Code before:
  ['hover:blur!', 'hover:blur-sm!'],

  ['hover:blur-sm', 'hover:blur-xs'],
  ['blur-sm!', 'blur-xs!'],
  ['hover:blur-sm!', 'hover:blur-xs!'],
])('%s => %s (%#)', async (candidate, result) => {
  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  expect(await legacyClasses(designSystem, {}, candidate)).toEqual(result)
})

test('does not match false positives', async () => {
  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  async function shouldNotDetect(example: string, candidate = 'shadow') {
    expect(
      await legacyClasses(designSystem, {}, candidate, {
        contents: example,
        start: example.indexOf(candidate),
        end: example.indexOf(candidate) + candidate.length,
      }),
    ).toEqual('shadow')
  }

  await shouldNotDetect(`let notShadow = shadow    \n`)
  await shouldNotDetect(`{ "foo": shadow.something + ""}\n`)
  await shouldNotDetect(`<div v-if="something && shadow"></div>\n`)
  await shouldNotDetect(`<div v-else-if="something && shadow"></div>\n`)
  await shouldNotDetect(`<div v-show="something && shadow"></div>\n`)
  await shouldNotDetect(`<div v-if="shadow || shadow"></div>\n`)
  await shouldNotDetect(`<div v-else-if="shadow || shadow"></div>\n`)
  await shouldNotDetect(`<div v-show="shadow || shadow"></div>\n`)
  await shouldNotDetect(`<div v-if="shadow"></div>\n`)
  await shouldNotDetect(`<div v-else-if="shadow"></div>\n`)
  await shouldNotDetect(`<div v-show="shadow"></div>\n`)
  await shouldNotDetect(`<div x-if="shadow"></div>\n`)
  await shouldNotDetect(`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd);'}}\n`)
})


Review comment (suggestion):
Should this be this or nah?

```suggestion
    ).toEqual(candidate)
```

Code after:
  ['hover:blur!', 'hover:blur-sm!'],

  ['hover:blur-sm', 'hover:blur-xs'],
  ['blur-sm!', 'blur-xs!'],
  ['hover:blur-sm!', 'hover:blur-xs!'],
])('%s => %s (%#)', async (candidate, result) => {
  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  expect(await legacyClasses(designSystem, {}, candidate)).toEqual(result)
})

test('does not replace classes in invalid positions', async () => {
  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  async function shouldNotReplace(example: string, candidate = 'shadow') {
    expect(
      await legacyClasses(designSystem, {}, candidate, {
        contents: example,
        start: example.indexOf(candidate),
        end: example.indexOf(candidate) + candidate.length,
      }),
    ).toEqual(candidate)
  }

  await shouldNotReplace(`let notShadow = shadow    \n`)
  await shouldNotReplace(`{ "foo": shadow.something + ""}\n`)
  await shouldNotReplace(`<div v-if="something && shadow"></div>\n`)
  await shouldNotReplace(`<div v-else-if="something && shadow"></div>\n`)
  await shouldNotReplace(`<div v-show="something && shadow"></div>\n`)
  await shouldNotReplace(`<div v-if="shadow || shadow"></div>\n`)
  await shouldNotReplace(`<div v-else-if="shadow || shadow"></div>\n`)
  await shouldNotReplace(`<div v-show="shadow || shadow"></div>\n`)
  await shouldNotReplace(`<div v-if="shadow"></div>\n`)
  await shouldNotReplace(`<div v-else-if="shadow"></div>\n`)
  await shouldNotReplace(`<div v-show="shadow"></div>\n`)
  await shouldNotReplace(`<div x-if="shadow"></div>\n`)
  await shouldNotReplace(`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd)'}}/>\n`)
})