Question: how to easily specify a file as "critical"

[heygrady]

Related: #53

From what I understand, I can do critical style loading by adding a data-href:

<style data-href="https://cdn-url/my-chunk.css">.some-styles{}</style>

We have been using isomorphic-style-loader to manage critical styles. It allows us to bubble up the styles during SSR and concat them to a string. This isn't ideal with mini-css-extract-plugin because it can lead to issues with style duplication and style ordering.

We are considering how to proceed and it seems there is a gap. With the old isomorphic-style-loader setup our critical styles would only be the content of the files we consider "critical".

import withStyles from 'isomorphic-style-loader/withStyles'

import React from 'react'

import styles from './button.css'

const MyButton = () => (<button className={styles.button}>click</button>)

// in a client build withStyles is essentially a no-op (we just use mini-css-extract-plugin)
// in a server build it sends the contents of button.css to a special Provider
// to be inlined during SSR
export default withStyles(styles)(MyButton)

I'm imagining a fork of isomorphic-style-loader that sends the src path of button.css as well as the contents so that we can properly decorate our <style> tag... but that's where things go wrong. I would be able to use a custom manifest file to look up the src path to figure out which css chunk holds button css button.css but that chunk will likely hold other non-critical css as well.

idea: magic comments to specify chunking.

https://webpack.js.org/api/module-methods/#magic-comments

import withStyles from 'isomorphic-style-loader/withStyles'

import React from 'react'

import  /* miniCSSExtractChunkName: MyButton  */ styles from './button.css'

const MyButton = () => (<button className={styles.button}>click</button>)

// now I can be positive that there will be a chuck that only holds these styles
export default withStyles(styles)(MyButton)

[alexander-akait]

@heygrady Don't think it is scope of this plugin, it is optimization and you need other plugin for this action, a lot of developers use difference technologies and extracting critical styles can be very difference, we don't have one good solution.

Using comments unnecessary you can use splitChunks and extract all css modules what you need for critical to separate chunks. I do not think that this will ever be solved on plugin side due difference implementation for difference technologies.

[heygrady]

Thanks. Being able to define a chunk ad hoc would be useful for critical styles regardless of the implementation. I believe that manually adding splitChunks entries as you suggested would be cumbersome for a large app.

SSR is probably out of scope but client-side chunking should be in scope.

[alexander-akait]

@heygrady using comments may be a bit uncomfortable, you can markup new block in header and previously comment will be wrong because it can became not critical, i don't think here exists right solution

[alexander-akait]

CLosing due output scope this plugin and no generic solution, maybe we can revisit it late. Feel free to feedback. Thanks for issue.