Bug: `!important` rules are ignored unless directly next to each other

[tuaki]

Description

Some !important rules are omitted if there are other rules between the !important and the not-!important variants.

Input CSS

h1 { color: green !important; }

body { margin: 0; }

h1 { color: red; }

Actual Output

body {
  margin: 0;
}

h1 {
  color: red;
}

Expected Output

body {
  margin: 0;
}

h1 {
  color: red;
  color: green !important;
}

Environment

• LightningCSS version: 1.30.2
• I've done some tests in the Lightning CSS Playground and it seems it worked correctly up to 1.19.0 and then broke on 1.20.0. Which makes sense based on the 1.20.0 changelog.

Additional Notes

• If the body rule is omitted, the h1 rules work correctly.
• If the body rule is put first (so the h1 rules are next to each other), everything works correctly.
• The body rule can be replaced with @supports, @media and probably other rules and it still won't work correctly.
• I discovered the bug when using tailwindcss with @layer rules - when all imports were resolved, the code looked like this:

  @layer base {
      textarea { resize: none !important; }
  }
  @layer base {
      @supports (contain-intrinsic-size: 1px) {
          ::placeholder { color: currentcolor; }
      }
      textarea { resize: vertical;}
  }

  Which resulted in omitting the first textarea rule. However, when the first rule is doubled, i.e.:

  @layer base {
      textarea { resize: none !important; }
  }
  @layer base {
      textarea { resize: none !important; }
  }
  @layer base {
      @supports (contain-intrinsic-size: 1px) {
          ::placeholder { color: currentcolor; }
      }
      textarea { resize: vertical;}
  }

  The rule is not ignored anymore (and is, in fact, doubled as well, which also seems like a bug):

  @layer base {
    textarea {
      resize: none !important;
      resize: none !important;
    }
  
    @supports (contain-intrinsic-size: 1px) {
      ::placeholder {
        color: currentColor;
      }
    }
  
    textarea {
      resize: vertical;
    }
  }