<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">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.</p>
<p dir="auto">The existence of packages like <code class="notranslate">vue-mq</code> 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.</p>
<p dir="auto">The proposed feature would make working with media queries easier, less error-prone, and more consistent.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<h2 dir="auto">Usage</h2>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style size=&quot;base&quot;&gt;
/**
 * `base` is an optional label for readability - anything that lacks a size
 * descriptor would automatically be base
 */
...
&lt;/style&gt;

&lt;style size=&quot;xs&quot;&gt;
...
&lt;/style&gt;

&lt;style size=&quot;sm&quot;&gt;
...
&lt;/style&gt;

&lt;style size=&quot;md&quot;&gt;
...
&lt;/style&gt;

&lt;style size=&quot;lg&quot;&gt;
...
&lt;/style&gt;

&lt;style size=&quot;xl&quot;&gt;
...
&lt;/style&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">size</span>="<span class="pl-s">base</span>"<span class="pl-kos">&gt;</span>
<span class="pl-c">/**</span>
<span class="pl-c"> * `base` is an optional label for readability - anything that lacks a size</span>
<span class="pl-c"> * descriptor would automatically be base</span>
<span class="pl-c"> */</span>
...
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">size</span>="<span class="pl-s">xs</span>"<span class="pl-kos">&gt;</span>
...
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">size</span>="<span class="pl-s">sm</span>"<span class="pl-kos">&gt;</span>
...
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">size</span>="<span class="pl-s">md</span>"<span class="pl-kos">&gt;</span>
...
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">size</span>="<span class="pl-s">lg</span>"<span class="pl-kos">&gt;</span>
...
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">size</span>="<span class="pl-s">xl</span>"<span class="pl-kos">&gt;</span>
...
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This allows developers to separate code by size without media queries, in a<br>
clean and consistent fashion.</p>
<h2 dir="auto">Configuration</h2>
<p dir="auto">There should be reasonable defaults, with the ability to override via config.<br>
For example, the default configuration could be based on bootstrap's well-known<br>
labelled screen sizes.</p>
<p dir="auto">Overriding the configuration via <code class="notranslate">vue.config.js</code> might look like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="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 },
  },
  ...
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  ...
  <span class="pl-s1">styleSizes</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'base'</span><span class="pl-kos">,</span> <span class="pl-c1">type</span>: <span class="pl-s">'base'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'xs'</span><span class="pl-kos">,</span> <span class="pl-c1">maxWidth</span>: <span class="pl-c1">575</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'sm'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">576</span><span class="pl-kos">,</span> <span class="pl-c1">maxWidth</span>: <span class="pl-c1">767</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'md'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">768</span><span class="pl-kos">,</span> <span class="pl-c1">maxWidth</span>: <span class="pl-c1">991</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'lg'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">992</span><span class="pl-kos">,</span> <span class="pl-c1">maxWidth</span>: <span class="pl-c1">1199</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'xl'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">1200</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  ...
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Although it would be completely configurable to use whatever labels and size<br>
cutoffs desired:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="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 },
  },
  ...
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  ...
  <span class="pl-s1">styleSizes</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'extra-small'</span><span class="pl-kos">,</span> <span class="pl-c1">type</span>: <span class="pl-s">'base'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'small'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">576</span><span class="pl-kos">,</span> <span class="pl-c1">maxWidth</span>: <span class="pl-c1">767</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'large'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">992</span><span class="pl-kos">,</span> <span class="pl-c1">maxWidth</span>: <span class="pl-c1">1199</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'extra-large'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">1200</span><span class="pl-kos">,</span> <span class="pl-c1">maxWidth</span>: <span class="pl-c1">3839</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'ginormous'</span><span class="pl-kos">,</span> <span class="pl-c1">minWidth</span>: <span class="pl-c1">3840</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  ...
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Functionality</h2>
<p dir="auto">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.</p>
<h3 dir="auto">Example</h3>
<p dir="auto">So this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style scoped size=&quot;md&quot;&gt;
.generic-item {
  ...
}
&lt;/style&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">scoped</span> <span class="pl-c1">size</span>="<span class="pl-s">md</span>"<span class="pl-kos">&gt;</span>
.<span class="pl-c1">generic-item</span> {
  ...
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Might be transformed into this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style scoped&gt;
@media only screen and (max-width: 768px) and (max-width: 991px) {
  .generic-item {
    ...
  }
}
&lt;/style&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">scoped</span><span class="pl-kos">&gt;</span>
<span class="pl-k">@media</span> <span class="pl-c1">only</span> screen <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">768<span class="pl-smi">px</span></span>) <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">991<span class="pl-smi">px</span></span>) {
  .<span class="pl-c1">generic-item</span> {
    ...
  }
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">Combining styles of same type</h3>
<p dir="auto">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 <code class="notranslate">scoped</code> or no <code class="notranslate">scoped</code>).</p>
<p dir="auto">So this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style scoped&gt;
.generic-item {
  ...
}
&lt;/style&gt;

&lt;style scoped size=&quot;md&quot;&gt;
.generic-item {
  ...
}
&lt;/style&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">scoped</span><span class="pl-kos">&gt;</span>
.<span class="pl-c1">generic-item</span> {
  ...
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">scoped</span> <span class="pl-c1">size</span>="<span class="pl-s">md</span>"<span class="pl-kos">&gt;</span>
.<span class="pl-c1">generic-item</span> {
  ...
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Might be transformed into this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style scoped&gt;
.generic-item {
  ...
}

@media only screen and (max-width: 768px) and (max-width: 991px) {
  .generic-item {
    ...
  }
}
&lt;/style&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">scoped</span><span class="pl-kos">&gt;</span>
.<span class="pl-c1">generic-item</span> {
  ...
}

<span class="pl-k">@media</span> <span class="pl-c1">only</span> screen <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">768<span class="pl-smi">px</span></span>) <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">991<span class="pl-smi">px</span></span>) {
  .<span class="pl-c1">generic-item</span> {
    ...
  }
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">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</p>
<p dir="auto">I have tried to put a basic example here and I can't get it working: <a href="https://jsfiddle.net/fkm1qtb1/2/" rel="nofollow">https://jsfiddle.net/fkm1qtb1/2/</a> . 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)</p>
<p dir="auto">Is this possible, I'm doing something wrong ?</p>
<p dir="auto">Thanks.</p>