Repository: tailwindlabs/tailwindcss
File: integrations/upgrade/index.test.ts (TypeScript)

Code before:

      /*
        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
        so we've added these compatibility styles to make sure everything still
        looks the same as it did with Tailwind CSS v3.

        If we ever want to remove these styles, we need to add an explicit border
        color utility to any element that depends on these defaults.
      */
      @layer base {
        *,
        ::after,
        ::before,
        ::backdrop,
        ::file-selector-button {
          border-color: var(--color-gray-200, currentcolor);
        }
      }

      --- index.html ---
      <div>
        <div class="shadow shadow-sm shadow-xs"></div>
        <div class="blur blur-xs"></div>
        <div class="backdrop-blur backdrop-blur-xs"></div>
        <div class="rounded rounded-sm"></div>
        <div class="ring-3"></div>
      </div>
      "
    `)
  },
)

test(
  'make suffix-less migrations safe (e.g.: `blur`, `rounded`, `shadow`, `ring`)',
  {
    fs: {
      'package.json': json`
        {
          "dependencies": {
            "tailwindcss": "^3",
            "@tailwindcss/upgrade": "workspace:^"
          },
          "devDependencies": {
            "prettier-plugin-tailwindcss": "0.5.0"
          }
        }
      `,
      'tailwind.config.js': js`
        module.exports = {
          content: ['./*.{html,tsx}'],
        }

Review comment (bug):
This doesn't seem right I think. This test is making sure that if default values are different or implementations are different for a utility that we don't migrate because you would end up with a different result.

- `ring` in v3 mapped to `3px`, but in the config we set it to `4px` via `DEFAULT: 4px` which means that `ring` maps to `4px`.
- `ring` in v4 maps to `1px`, but if we use that `--default-ring-width` of `4px` then I think `ring` also means `4px`.

Now it looks like the `ring` was converted to `ring-3` which means that we go from `4px` (`ring` with default of `4px`) to `3px` (because of `ring-3`) which I believe is incorrect.


Code after:

      /*
        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
        so we've added these compatibility styles to make sure everything still
        looks the same as it did with Tailwind CSS v3.

        If we ever want to remove these styles, we need to add an explicit border
        color utility to any element that depends on these defaults.
      */
      @layer base {
        *,
        ::after,
        ::before,
        ::backdrop,
        ::file-selector-button {
          border-color: var(--color-gray-200, currentcolor);
        }
      }

      --- index.html ---
      <div>
        <div class="shadow shadow-sm shadow-xs"></div>
        <div class="blur blur-xs"></div>
        <div class="backdrop-blur backdrop-blur-xs"></div>
        <div class="rounded rounded-sm"></div>
        <div class="ring"></div>
      </div>
      "
    `)
  },
)

test(
  'make suffix-less migrations safe (e.g.: `blur`, `rounded`, `shadow`, `ring`)',
  {
    fs: {
      'package.json': json`
        {
          "dependencies": {
            "tailwindcss": "^3",
            "@tailwindcss/upgrade": "workspace:^"
          },
          "devDependencies": {
            "prettier-plugin-tailwindcss": "0.5.0"
          }
        }
      `,
      'tailwind.config.js': js`
        module.exports = {
          content: ['./*.{html,tsx}'],
        }