Drop exact duplicate declarations from output CSS within a style rule

[thecrypticace]

Fixes #18178

When someone writes a utility like after:content-['foo'] it'll produce duplicate content: var(--tw-content) declarations. I thought about special casing these but we already have an optimization pass where we perform a full walk of the AST, flattening some rules (with the & selector), analyzing declarations, etc… We can utilize that existing spot in core to analyze and remove duplicate declarations within rules across the AST.

The implementation does this by keeping track of declarations within a style rule and keeps the last one for any exact duplicate which is a tuple of (property, value, important). This does require some additional loops but preseving the last declaration is important for correctness with regards to CSS nesting.

For example take this nested CSS:

.foo {
  color: red;
  & .bar {
    color: green;
  }
  color: red;
}

It expands to this:

.foo {
  color: red;
}
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

If you remove the last rule then a <div class="foo bar">…</div> will have green text when its supposed to be red. Since that would affect behavior we have to always preserve the last declaration for a given property.

We could go further and eliminate multiple declarations for the same property but this presents a problem: every property and value must be understood and combined with browser targets to understand whether or not that property may act as a "fallback" or whether definitely overwrites its previous value in all cases. This is a much more complicated task that is much more suited to something light Lighting CSS.

[RobinMalfait]

jk 😂

[thecrypticace]

I mean basically lol