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?

[philipp-spiess]

@Tobitubbie Hey! Agree that this is unexpected but I don't think we'll be backporting a fix for this for v3 and in v4 this does not happen because we're relying on native CSS nesting instead:

I recommend you upgrade to v4 instead. The only change necessary to make this plugin work though is to invert the @media rule and the utility name in the addComponent API:

  import plugin from 'tailwindcss/plugin'

  /** @type {import('tailwindcss').Config} */
  export default {
    important: '#myApp',
    plugins: [
      plugin(({ addComponents }) => {
        addComponents(
          {
-          '@media (forced-colors: active)': {
+          '.abc-1': {
-            '.abc-1': {
+            '@media (forced-colors: active)': {
                outline: 'solid 1px',
                '.abc-2': {
                  outline: 'solid 2px',
                },
              },
            },
          },
          { respectImportant: true },
        )
      }),
    ],
  }