Minification breaks nested @apply

[pokonski]

What version of Tailwind CSS are you using?

For example: v3.4.7

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

tailwindcss standalone executable 3.4.7

What version of Node.js are you using?

N/A, using standalone

What browser are you using?

Firefox 127

What operating system are you using?

MacOS

Reproduction URL

https://github.com/pokonski/tailwind-minify-nesting/tree/master

Describe your issue

Minification breaks nested rules and flattens them:

Source file

.parent {
  & .child {
    @apply text-blue-500;

    &:not([href]) {
      @apply text-red-500;
    }
  }
}

Running tailwindcss -i source.css -o build.css outputs working CSS:

.parent {
  & .child {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity))
  }
  & .child {
    &:not([href]) {
      --tw-text-opacity: 1;
      color: rgb(239 68 68 / var(--tw-text-opacity))
    }
  }
}

But running tailwindcss -i source.css -o build-min.css -m outputs broken CSS with missing nested rules:
(formatted by me for readability)

.parent {
  & .child {
    --tw-text-opacity: 1;
    color: rgb(239 68 68/var(--tw-text-opacity));
    color: rgb(59 130 246/var(--tw-text-opacity))
  }
}

[adamwathan]

Super weird, can reproduce even without using @apply by just using this as the source CSS:

.parent {
  & .child {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity))
  }
  & .child {
    &:not([href]) {
      --tw-text-opacity: 1;
      color: rgb(239 68 68 / var(--tw-text-opacity))
    }
  }
}

My first instinct is this is a bug in cssnano that has maybe been fixed (we're on v6 internally and it looks like v7 is out now) so going to see if that helps. Thanks for raising!

[pokonski]

Thank you for looking into this @adamwathan ! Looks like @thecrypticace already spotted the problem that was indeed in cssnano :) The issue was addressed in cssnano 6.0.1: cssnano/cssnano@eb9a9a1

[thecrypticace]

I've merged the fix for it and it'll be available in the next patch release. In the meantime you can use our insiders build which has the fix:

npm tailwindcss@insiders