!important gets deleted from build when applyComplexClasses is enabled

[AndrewBogdanovTSS]

One thing I just noticed when trying out applyComplexClasses in v.1.8.6 is that all of my !important statements are stripped out from the compiled code.
I use PostCSS with the next build config:

postcss: {
    // Allows the use of single line comments
    // in .pscss and .vue files
    parser: 'postcss-comment',
    plugins: {
      'postcss-import': {},
      tailwindcss: {},
      'postcss-nested': {},
      'postcss-hexrgba': {},
      'postcss-custom-properties': {
        importFrom: [{customProperties}]
      },
      autoprefixer: {}
    },
    preset: {
      // Change the postcss-preset-env settings
      autoprefixer: {
        grid: true
      }
    }
  },

than in my vue component I have

.swiper{
   &-pagination {
      bottom: -40px !important;
   }
}

resulting code just doesn't contain that !important:

.swiper-pagination {
    bottom: -40px;
}

without applyComplexClasses !important is there

I tried to use

'postcss-nested': { bubble: ['screen']},

above tailwindcss in the config but that that just makes build fail

also wanted to mention that it's not connected with purgeCSS since it was off

[adamwathan]

Tried to quickly reproduce this in a test but Tailwind is preserving the !important as expected (this test passes):

test('you can still use important in nested selectors', () => {
  const input = `
    .swiper{
      &-pagination {
        bottom: -40px !important;
      }
    }
  `

  const expected = `
    .swiper{
      &-pagination {
        bottom: -40px !important;
      }
    }
  `

  return run(input).then(result => {
    expect(result.css).toMatchCss(expected)
    expect(result.warnings().length).toBe(0)
  })
})

Need a minimal reproduction I can clone down to troubleshoot any further if you don't mind.

[AndrewBogdanovTSS]

@adamwathan here you go https:/AndrewBogdanovTSS/tw-complex-classes
So this issue is happening when you got @apply and regular classes mixed. You can check it by going into assets/styles/layout.pcss

.NuxtLogo {
  /*Commenting this line bring !important back to life*/
  @apply mx-2 py-2;
  min-width: 320px;
  max-height: 300px !important;
}

The interesting thing is adding !important inside @apply will propagate it on all styles after it:

.NuxtLogo {
  /*Adding !important will result into getting all styles to become !important in this block*/
  @apply mx-2 py-2 !important;
  min-width: 320px;
  max-height: 300px;
}

So it's not related to postcss-nested and turning off applyComplexClasses brings it back to normal behavior

[adamwathan]

Fixed in v1.8.9 which is out now, thanks for reporting!

[AndrewBogdanovTSS]

The bug is fixed, thanks @adamwathan 👍