[preset-mini] Ability to hack breakpoints variants

[1001v]

Clear and concise description of the problem

Hello. We all know, that tailwind-like solutions wrap our css utility class with media query, when we use it with breakpoint variant:

<div class="md:p-4"></div>

/* CSS like this will be generated */
@media (min-width: 768px) {
  .p-4 {
    padding: 1rem;
  }
}

So we can create a responsive markup with ease.

However, if we are creating something like embeddable widget via iframe, the markup will be forced to be mobile, since the widget is aimed to be rather small relatively to the parent page. This scenario causes the widget's css "thinks" it's a mobile device.

Suggested solution

I suggest to add an ability to "hack" the variants generation and replace media queries with something else we could control, a body class, for example. So it could look something like this:

<div class="md:p-4"></div>

/* CSS like this will be generated */
body.breakpoints-md .p-4 {
  padding: 1rem;
}

In this scenario we can control, which responsive variant is used.

Alternative

I've considered the following:

1. Make iframe widget transparent and embed it fullscreen. This approach makes it impossible to interact with page itself, while widget is active.
2. Use CSS vars rather than direct values. This approach doesn't cover all scenarios: it requires us to use the same utility accross all breakpoints. It's inconvenient in many cases.
3. Use shadow dom instead an iframe. Shadow dom might be an alternative to iframes in term of embedding things. However, it's not a drop-in replacement, and it's hard to think of it as an alternative from this point of view.
4. I didn't find any possibility to fake the screen width for css media queries.

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README.md of using the package.
• Already used the Interactive Docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[1001v]

Maybe an ability to hook into each utility generation would be enough.