Add CSS codemod for missing @layer

[RobinMalfait]

This PR adds a codemod that ensures that some parts of your stylesheet are wrapped in an @layer.

This is a follow-up PR of #14411, in that PR we migrate @tailwind directives to imports.

As a quick summary, that will turn this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Into:

@import 'tailwindcss';

But there are a few issues with that if we have additional CSS on the page. For example let's imagine we had this:

@tailwind base;

body {
  background-color: red;
}

@tailwind components;

.btn {}

@tailwind utilities;

This will now be turned into:

@import 'tailwindcss';

body {
  background-color: red;
}

.btn {}

But in v4 we use real layers, in v3 we used to replace the directive with the result of that layer. This means that now the body and .btn styles are in the incorrect spot.

To solve this, we have to wrap them in a layer. The body should go in an @layer base, and the .btn should be in an @layer components to make sure it's in the same spot as it was before.

That's what this PR does, the original input will now be turned into:

@import 'tailwindcss';

@layer base {
  body {
    background-color: red;
  }
}

@layer components {
  .btn {
  }
}

There are a few internal refactors going on as well, but those are less important.

[RobinMalfait]

Just a quick plugin to mark the nodes with tailwind_pretty

[RobinMalfait]

Using the custom walk implementation so that we can skip going inside of the node, once we found a node with tailwind_pretty.