Missing LESS guards create duplicate CSS

[friendscottn]

Preconditions (*)

1. Magento 2.4.5-p1 (not that this matters much)

Steps to reproduce (*)

1. Compile the less files into CSS

Expected result (*)

1. CSS should not be duplicated in styles-m.css and styles-l.css
2. CSS should be only in one CSS file or the other. This affects css file size and performance.

Actual result (*)

1. Several style rules are duplicated between the two files:

.form-discount .g-recaptcha {
  margin-top: 50px !important;
}
...
.login-container .g-recaptcha,
.form-login .g-recaptcha,
.form-edit-account .g-recaptcha {
  margin-bottom: 10px !important;
}
...
.required-captcha.checkbox {
  position: absolute;
  display: block;
  visibility: visible;
  overflow: hidden;
  opacity: 0;
  width: 1px;
  height: 1px;
}
...
.block.newsletter .field-recaptcha .field .control:before {
  content: none;
}
...
.review-form .field-recaptcha {
  margin-bottom: 10px;
}

[m2-assistant]

Hi @friendscottn. Thank you for your report.
To speed up processing of this issue, make sure that you provided sufficient information.

Add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.