Issue 1:
What problem does this feature solve?

Media queries are a regular concern for anyone building a complex responsive web application in Vue. Today, this means each component has a style section with base css as well as media queries. Though this functionality is not broken, it is error prone and can cause subtle consistency issues unless development teams actively work to set up strong foundations. So the current state of media queries in Vue is more of a hill of failure than a pit of success.

The existence of packages like vue-mq demonstrate that there is demand for improving this situation, and while those kinds of packages can already help, it would be cleaner and more consistent to build this into Vue itself. Vue is presentation layer software, and this is a reasonably global presentation layer concern.

The proposed feature would make working with media queries easier, less error-prone, and more consistent.

What does the proposed API look like?

Usage

<style size="base">
/**
* `base` is an optional label for readability - anything that lacks a size
* descriptor would automatically be base
*/
...
</style>

<style size="xs">
...
</style>

<style size="sm">
...
</style>

<style size="md">
...
</style>

<style size="lg">
...
</style>

<style size="xl">
...
</style>

This allows developers to separate code by size without media queries, in a

clean and consistent fashion.

Configuration

There should be reasonable defaults, with the ability to override via config.

For example, the default configuration could be based on bootstrap's well-known

labelled screen sizes.

Overriding the configuration via vue.config.js might look like:

module.exports = {
...
styleSizes: [
{ name: 'base', type: 'base' },
{ name: 'xs', maxWidth: 575 },
{ name: 'sm', minWidth: 576, maxWidth: 767 },
{ name: 'md', minWidth: 768, maxWidth: 991 },
{ name: 'lg', minWidth: 992, maxWidth: 1199 },
{ name: 'xl', minWidth: 1200 },
},
...
}

Although it would be completely configurable to use whatever labels and size

cutoffs desired:

module.exports = {
...
styleSizes: [
{ name: 'extra-small', type: 'base' },
{ name: 'small', minWidth: 576, maxWidth: 767 },
{ name: 'large', minWidth: 992, maxWidth: 1199 },
{ name: 'extra-large', minWidth: 1200, maxWidth: 3839 },
{ name: 'ginormous', minWidth: 3840 },
},
...
}

Functionality

When size attributes are assigned to a style, it should be transformed into a media query within a style tag with the same attributes as the original tag, except without the size attribute.

Example

So this:

<style scoped size="md">
.generic-item {
...
}
</style>

Might be transformed into this:

<style scoped>
@media only screen and (max-width: 768px) and (max-width: 991px) {
.generic-item {
...
}
}
</style>

Combining styles of same type

I'm not sure how the internals work, but it might be preferable to combine different style sizes into a single style of the same type (so scoped or no scoped).

So this:

<style scoped>
.generic-item {
...
}
</style>

<style scoped size="md">
.generic-item {
...
}
</style>

Might be transformed into this:

<style scoped>
.generic-item {
...
}

@media only screen and (max-width: 768px) and (max-width: 991px) {
.generic-item {
...
}
}
</style>

Issue 2:
Hi. I would like to insert the template of a component in a different element but maintain the components tree structure. To be more precise, I have a component (bootstrap modal) which is rendered in the middle of the html content. Now the problem is that the styles of the modal inherits from parent, so what I want to archive is to have my component right there but the template to be inserted just before body end tag

I have tried to put a basic example here and I can't get it working: https://jsfiddle.net/fkm1qtb1/2/ . As you can see, the text is red because the parent element has that color which applies on children too. So I want the template to be inserted on a custom element that is not affected by the color (on this example)

Is this possible, I'm doing something wrong ?

Thanks.