[v4]: support breakpoint variants on custom classenames

[xsjcTony]

There's an already existing issue [v4] variants are not working on layer defined components and utilities for this, but the example in that issue is way too small, so it seems to have a workaround.

---

Say I have the below css (in a real project with Astro)

I want to use prose-sm classname dynamically, not tied to a single breakpoint.
Sometimes I want max-lg:prose-sm and sometimes I want max-md:prose-sm.
It has to be dynamic, so the workaround in the previous issue won't work.

Since Astro is built for performance and ships 0 JavaScript by default, I don't really want to introduce a JS code snippet to apply the classname conditionally based on matchMedia()...

Please let me know whether I have a workaround for that, or if we are able to support this feature. Thanks.
It's REALLY needed in a lot of scenarios.

---

/* prose.css */

:root {
  --prose-max-width: 65ch;
  --prose-width: min(var(--prose-max-width), 100%);
  --prose-margin: calc(calc(100vw - var(--prose-width)) / 2);
}


.prose {
  color: var(--color-fg);
  max-width: var(--prose-max-width);
  font-size: 1rem;
  line-height: 1.75;


  /* Variants */
  &.prose-fluid {
    max-width: none;
  }

  &.prose-img-inline {
    img,
    svg {
      display: inline;
    }
  }


  /* Specials */
  & > :first-child {
    margin-block-start: 0 !important;
  }

  & > :last-child {
    margin-block-end: 0 !important;
  }


  /* Titles */
  h1 {
    color: var(--color-fg-lighter);
  }

  h2 {
    color: var(--color-fg-light);
  }


  /* Links */
  a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: inherit;
    border-block-end: 1px solid --alpha(var(--color-primary) / 30%);
    transition: color, border-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;

    @media (hover: hover) {
      &:hover {
        color: var(--color-primary-2);
        border-color: var(--color-primary-2);
      }
    }

    &:active {
      color: var(--color-primary-3);
      border-color: var(--color-primary-3);
    }

    &:has(:only-child:is(img, svg)) {
      border-block-end: none;
    }
  }


  /* Paragraphs */
  p {
    margin-block: 1.25em;
  }


  /* Lists */
  ul,
  ol {
    & > li {
      position: relative;
      padding-inline-start: 1.75em;
    }
  }

  ul > li::before {
    content: '';
    position: absolute;
    background-color: var(--color-fg-light);
    border-radius: calc(infinity * 1px);
    width: 0.375em;
    height: 0.375em;
    top: calc(0.875em - calc(0.375em / 2));
    left: 0.25em;
  }

  li {
    margin-block: 0.5em;
  }


  /* small */
  &.prose-sm {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);


    p {
      margin-block: calc(16 / 14 * 1em);
    }


    ul,
    ol {
      & > li {
        padding-inline-start: calc(11 / 7 * 1em);
      }
    }

    ul > li::before {
      width: calc(2.5 / 7 * 1em);
      height: calc(2.5 / 7 * 1em);
      top: calc(calc(5 / 7 * 1em) - calc(2.5 / 7 * 1em / 2));
      left: calc(1.5 / 7 * 1em);
    }

    li {
      margin-block: calc(2 / 7 * 1em);
    }
  }
}