Sort classes using position of first matching rule

[thecrypticace]

Fixes tailwindlabs/prettier-plugin-tailwindcss#174

Given a list of components like this:

addComponents({
  '.foo': { display: 'block' },
  '.foo-1': { display: 'block' },
  '.bar': { display: 'block' },

  // This rule matches both the utility `foo` and `bar`
  // But when sorting `foo` — we've already got a
  // position for `foo` so we should use it
  '.bar .foo': { display: 'block' },
})

Note that the last rule matches both the utilities foo and bar.

When sorting lists of classes we would iterate over all generated rules. Given that last rule matches both foo and bar it would win for any instance of foo used. This means that the utility foo would have a much "later" position than expected. For example, foo-1 foo would be sorted and stay as-is instead of becoming the expected foo foo-1.

Now, given that we cache rules, the internal utility we used to match against them could be overwritten. As such, once you used bar the utility was permanently changed and no longer matched the utility foo causing the sort order to change for any list of classes after the one that used the utility bar.

All that to say, given this HTML:

We would see the following HTML file as having sorted classes:

<span class="foo-1 foo"></span>
<span class="bar"></span>
<span class="foo foo-2"></span>

When in reality it should be this:

<span class="foo foo-1"></span>
<span class="bar"></span>
<span class="foo foo-2"></span>