media-query duplicates its generated styles

[Tobitubbie]

What version of Tailwind CSS are you using? v3.4.10 (tested in v3.4.4, too)

What build tool (or framework if it abstracts the build tool) are you using? none

What version of Node.js are you using? v18.20.1

What browser are you using? Chrome

What operating system are you using? Windows

Reproduction URL https://play.tailwindcss.com/4aiEEar1oo?file=config

Describe your issue

The 3 preconditions for the error to occur are:

• important is true or set to a string
• some safelist-pattern is configured and matches
• styles are inside a media-query

Every style (key of the object) defined for the media-query is repeated x times in the final generated css!

---

2 times on sibling css:

'@media (...)': { 
  '.a': {...}, 
  '.b': {...} 
}

=> results in:

@media (...): { 
  '.a':  {...}, 
  '.b':  {...}, 

  '.a':  {...}, 
  '.b':  {...} 
}

---

3 times on nested css:

'@media (...)': { 
  '.a': { '.b': {...} } 
}

=> results in:

'@media': { 
  '.a .b':  {...}, 

  '.a .b':  {...}, 

  '.a .b':  {...}
}

5 nested properties ( a { b { c { d { e } } } } ) lead to 15 duplications

This is increasing our final stylesheet quite a bit 🥲

Is this intended behaviour or am I doing something wrong?

[monixca345]

Thanks for the step by step tutorial. Works like a charm! The solution worked for me thanks to the community and the members for the solution. aa jetnet