Drop exact duplicate declarations from output CSS within a style rule (#18809)

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:
```css
.foo {
  color: red;
  & .bar {
    color: green;
  }
  color: red;
}
```

It expands to this:
```css
.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.

Author: thecrypticace

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Drop warning from browser build ([#18731](https://github.com/tailwindlabs/tailwindcss/issues/18731))
+- Drop exact duplicate declarations when emitting CSS ([#18809](https://github.com/tailwindlabs/tailwindcss/issues/18809))
 
 ### Fixed
 

packages/tailwindcss/src/ast.test.ts

@@ -202,6 +202,93 @@ it('should not emit empty rules once optimized', () => {
   `)
 })
 
+it('should not emit exact duplicate declarations in the same rule', () => {
+  let ast = CSS.parse(css`
+    .foo {
+      color: red;
+      .bar {
+        color: green;
+        color: blue;
+        color: green;
+      }
+      color: red;
+    }
+    .foo {
+      color: red;
+      & {
+        color: green;
+        & {
+          color: red;
+          color: green;
+          color: blue;
+        }
+        color: red;
+      }
+      background: blue;
+      .bar {
+        color: green;
+        color: blue;
+        color: green;
+      }
+      caret-color: orange;
+    }
+  `)
+
+  expect(toCss(ast)).toMatchInlineSnapshot(`
+    ".foo {
+      color: red;
+      .bar {
+        color: green;
+        color: blue;
+        color: green;
+      }
+      color: red;
+    }
+    .foo {
+      color: red;
+      & {
+        color: green;
+        & {
+          color: red;
+          color: green;
+          color: blue;
+        }
+        color: red;
+      }
+      background: blue;
+      .bar {
+        color: green;
+        color: blue;
+        color: green;
+      }
+      caret-color: orange;
+    }
+    "
+  `)
+
+  expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(`
+    ".foo {
+      .bar {
+        color: blue;
+        color: green;
+      }
+      color: red;
+    }
+    .foo {
+      color: green;
+      color: blue;
+      color: red;
+      background: blue;
+      .bar {
+        color: blue;
+        color: green;
+      }
+      caret-color: orange;
+    }
+    "
+  `)
+})
+
 it('should only visit children once when calling `replaceWith` with single element array', () => {
   let visited = new Set()
 

packages/tailwindcss/src/ast.ts

@@ -351,27 +351,45 @@ export function optimizeAst(
 
     // Rule
     else if (node.kind === 'rule') {
-      // Rules with `&` as the selector should be flattened
-      if (node.selector === '&') {
-        for (let child of node.nodes) {
-          let nodes: AstNode[] = []
-          transform(child, nodes, context, depth + 1)
-          if (nodes.length > 0) {
-            parent.push(...nodes)
-          }
-        }
+      let nodes: AstNode[] = []
+
+      for (let child of node.nodes) {
+        transform(child, nodes, context, depth + 1)
       }
 
-      //
-      else {
-        let copy = { ...node, nodes: [] }
-        for (let child of node.nodes) {
-          transform(child, copy.nodes, context, depth + 1)
-        }
-        if (copy.nodes.length > 0) {
-          parent.push(copy)
+      // Keep the last decl when there are exact duplicates. Keeping the *first* one might
+      // not be correct when given nested rules where a rule sits between declarations.
+      let seen: Record<string, AstNode[]> = {}
+      let toRemove = new Set<AstNode>()
+
+      // Keep track of all nodes that produce a given declaration
+      for (let child of nodes) {
+        if (child.kind !== 'declaration') continue
+
+        let key = `${child.property}:${child.value}:${child.important}`
+        seen[key] ??= []
+        seen[key].push(child)
+      }
+
+      // And remove all but the last of each
+      for (let key in seen) {
+        for (let i = 0; i < seen[key].length - 1; ++i) {
+          toRemove.add(seen[key][i])
         }
       }
+
+      if (toRemove.size > 0) {
+        nodes = nodes.filter((node) => !toRemove.has(node))
+      }
+
+      if (nodes.length === 0) return
+
+      // Rules with `&` as the selector should be flattened
+      if (node.selector === '&') {
+        parent.push(...nodes)
+      } else {
+        parent.push({ ...node, nodes })
+      }
     }
 
     // AtRule `@property`

packages/tailwindcss/src/index.test.ts

@@ -527,7 +527,6 @@ describe('@apply', () => {
       .foo, .bar {
         --tw-content: "b";
         content: var(--tw-content);
-        content: var(--tw-content);
       }
 
       @property --tw-content {