Do not migrate declarations in <style> blocks

[RobinMalfait]

This PR improves the upgrade tool by making sure that we don't migrate CSS declarations in <style>…</style> blocks.

We do this by making sure that:

1. We detect a declaration, the current heuristic is that the candidate is:

   • Preceded by whitespace
   • Followed by a colon and whitespace

   <style>
   .foo {
       flex-shrink: 0;
      ^           ^^
   }
   </style>

2. We are in a <style>…</style> block

   <style>
   ^^^^^^
   .foo {
       flex-shrink: 0;
   }
   </style>
   ^^^^^^^^

The reason we have these 2 checks is because just relying on the first heuristic alone, also means that we will not be migrating keys in JS objects, because they typically follow the same structure:

let classes = {
 flex: 0,
^    ^^
}

Another important thing to note is that we can't just ignore anything in between <style>…</style> blocks, because you could still be using @apply that we do want to migrate.

Last but not least, the first heuristics is not perfect either. If you are writing minified CSS then this will likely fail if there is no whitespace around the candidate.

But my current assumption is that nobody should be writing minified CSS, and minified CSS will very likely be generated and gitignored. In either situation, replacements in minified CSS will not be any worse than it is today.

I'm open to suggestions for better heuristics.

Test plan

1. Added an integration test that verifies that we do migrate @apply and don't migrate the flex-shrink: 0; declaration.

Fixes: #17975

[RobinMalfait]

Note this is using <style not <style> because there could be additional attributes

[philipp-spiess]

Seems reasonable!