Separate styles for modern build

[academici]

What problem does this feature solve?

Reducing the size of the style files.
For browsers that support ES modules, using special autoprefixer rules ('Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15')

What does the proposed API look like?

unknown

[LinusBorg]

That's hard to automate since (to my knowledge) <link> doesn't offer a nomodule attribute like <script> does, so we don't have a good way of letting the browser decide which style file to load.

[academici]

@LinusBorg, here is my file postcss.config.js

const isModern = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
let autoprefixerConfig = {}

if(isModern) {
  autoprefixerConfig.browsers = [
    'Chrome >= 60',
    'Safari >= 10.1',
    'iOS >= 10.3',
    'Firefox >= 54',
    'Edge >= 15',
  ]
}

module.exports = {
  plugins: {
    autoprefixer: {
      lost: {},
      ...autoprefixerConfig,
    },
  },
};

Files are generated in the precache-manifest in dist folder
Maybe if "browsers" rule is not set, fill it in like this?

[LinusBorg]

#3108 would add a note about this to the docs.

Don't think we can support this eleagantly during build.