Composing class names inside media queries

I have some styles inside a class which can be used standalone, but I would also like to apply these styles to another class when a media query condition is met.

The only way to achieve this today (IIUC) is by either duplicating the styles for my classes, or moving the media queries into JavaScript and conditionally applying the classes there. Both of these are significant trade offs, so I believe there should be some way of achieving this in CSS, natively.

Below is an example.

I have two classes: light and dark.

.light {
  border: 1px solid;
  background-color: white;
}

.dark {
  border: 1px solid black;
  background-color: black;
  color: white;
}

<h2>light</h2>
<div class="light">foo</div>
<h2>dark</h2>
<div class="dark">foo</div>

Now I want to compose these class names to create a new version: light on mobile (i.e. narrow screens), dark on desktop (i.e. wide screens).

The only way I'm aware of doing this is by duplicating my styles:

@media (max-width: 499px) {
  .lightOnMobileAndDarkOnDesktop {
    border: 1px solid;
    background-color: white;
  }
}

@media (min-width: 500px) {
  .lightOnMobileAndDarkOnDesktop {
    border: 1px solid black;
    background-color: black;
    color: white;
  }
}

<h2>light on mobile, dark on desktop</h2>
<div class="lightOnMobileAndDarkOnDesktop">foo</div>

However I would like to achieve this without duplicating the styles for my classes, and without JavaScript.

Here is some pseudo code which illustrates what I would like to achieve:

@media (max-width: 499px) {
  .lightOnMobileAndDarkOnDesktop {
    @extend .light;
  }
}

@media (min-width: 500px) {
  .lightOnMobileAndDarkOnDesktop {
    @extend .dark;
  }
}

Are there any proposals for CSS that would allow me to achieve this in the future?

Proposals I'm aware of which could help:

• @extend, but this seems inactive. Last updated in 2015? What's the status of this now?
• @apply, but this was abandoned.

(Originally posted to https://stackoverflow.com/questions/56628123/css-composing-class-names-inside-media-queries.)

Start with the issue's examples of composing .light and .dark inside media queries, then review the linked @extend and @apply proposals and their current status. Done would require a resolved direction for achieving conditional class composition without duplicating styles or using JavaScript.