nested apply rules problems with !important and nested css

[minimit]

UPDATED DEMO #2302 (comment)

Describe the problem:

When using a plugin with styles in addComponents, the !important are compiled without !important, when using @apply.

Source:

    addComponents({
      '.text-uppercase': {
        textTransform: 'uppercase !important',
      },
      '.red-text': {
        color: 'red !important',
      },
    })

.test-0 {
  @apply red-text text-uppercase;
}

Result:

.text-uppercase {
  text-transform: uppercase !important;
}

.red-text {
  color: red !important;
}

.test-0 {
  text-transform: uppercase;
  color: red !important;
}

Expected result:

.text-uppercase {
  text-transform: uppercase !important;
}

.red-text {
  color: red !important;
}

.test-0 {
  text-transform: uppercase !important;
  color: red !important;
}

Link to a minimal reproduction:

https://github.com/minimit/twbug-component-important

[adamwathan]

This is the output I'm seeing (note that important is removed from both rules):

.text-uppercase {
  text-transform: uppercase !important;
}

.red-text {
  color: red !important;
}

.test-0 {
  text-transform: uppercase;
  color: red;
}

...which is expected. @apply removes important by default, you need to add !important after @apply if you want it to be added:

.test-0 {
  @apply red-text text-uppercase !important;
}

The reason for this is that @apply is typically used to compose utilities together to create component classes, and if you make your utilities "important" you don't want to preserve that when creating components because it will lead to specificity issues.

[minimit]

Hello @adamwathan. I understand it sounds good to not have important when applying, It's not very important but nested rule keep the !important. It's not relevant with the one level utilities but it happends.

Anyway I've found another related problem with @apply when applying nested selectors. It seems that nested apply rules have some problems. I've updated the demo with that:

.test-blackred {
  color: black !important;
  .test-blackred-inner {
    color: red !important;
  }
}

.test-as-blackred {
  @apply test-blackred;
}

.final {
  @apply test-as-blackred;
}

Output:

.test-blackred {
  color: black !important;
}

.test-blackred .test-blackred-inner {
  color: red !important;
}

.test-as-blackred {
  color: black;
}

.test-as-blackred .test-blackred-inner {
  color: red !important;
}

.final {
  color: black;
}

/* missing .final .test-blackred-inner {} */

This is to take into consideration when fixing #2192 maybe.. I'm sorry I can't help you much with postcss, the apply rule seems a very complex script.

[adamwathan]

Yeah this is all part of general nesting support with @apply which is currently just not accounted for at all (since it's not valid CSS) but we do want to solve it. Work is happening in #2271 👍 Going to close and just track in #2192, thanks!