feat(gatsby-plugin-sass): Allow miniCssExtract to accept options

[tmilewski]

Description

This PR allows for miniCssExtract to accept options from gatsby-plugin-sass.

Related Issues

None

[pieh]

What is the use case for this? If there is issue that require changing the miniCssExtract options, maybe we could attack this directly and change default settings in gatsby core?

[LekoArts]

Friendly ping @tmilewski

[tmilewski]

@LekoArts @pieh I'll defer to you two as to whether this should go into core or not. I wanted to make sure people had the option one way or the other.

This solves the case where miniCssExtract is warning on the ordering of styles. There are cases where this isn't an issue (see: self-contained styles with each component) but it's still throwing out warnings left-and-right.

webpack-contrib/mini-css-extract-plugin#250 (comment)

This seems like an unreasonable request (to ensure order within our graph)... we need a way to turn this off for projects that don't care. For example, in my projects, each component's styles are self-contained so the order is only important within each component. (each component has a very unique class name root and all selectors are scoped to them)

webpack-contrib/mini-css-extract-plugin#250 (comment)

This issue has been resolved by the addition of ignoreOrder option: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/v0.8.0/README.md#remove-order-warnings

Please open an issue in the repository of the tool you're using that uses mini-css-extract-plugin to discuss if they should use ignoreOrder.

I understand the maintainers here have understood that the warnings are difficult to decipher, and they don't currently need new comments to reflect that. See the comment by @sokra near the first comments in this issue thread #250 (comment):

I must admit that the warning could be improved to point to the locations that need to be changed.

Please open a new issue if ignoreOrder is not working as expected, with reproduction steps, if you think there is an issue with that option.

[pieh]

Just to understand what ignoreOrder does - it just silence the warning about "conflicting styles imports order" in terminal?

[tmilewski]

@pieh That's correct.

[NathHorrigan]

It would be really great if this could be merged in, currently having issues regarding order warnings.

[pvdz]

I've opened #23170 to rebase the changes and get this merged.

[pvdz]

@tmilewski could you rebase this PR to current master, and add some documentation around it? I'm not entirely sure how to document it and otherwise I might have to close this. It looks good otherwise. Cheers!

[wardpeet]

Hey @tmilewski,

first of all, sorry to keep you waiting. I've looked at your changes and they're not fixing the problem. Your PR changes the options for the "mini-css-extract-plugin loader". The loader only has the following options:

• publicPath
• hmr
• esModule
• reloadAll

IgnoreOrder is defined on the plugin itself.

gatsby/packages/gatsby/src/utils/webpack-utils.ts

Lines 627 to 631 in e095119

	new MiniCssExtractPlugin({
	filename: `[name].[contenthash].css`,
	chunkFilename: `[name].[contenthash].css`,
	...options,
	})

Sadly, we currently do not have a proper API to change these values from a plugin. What you can do is use the replaceWebpackConfig action, in your gatsby-node.js file. With replaceWebpackConfig you can remove the minicssextract plugin and add yours with the ignorePlugin option.

exports.onCreateWebpackConfig = ({ actions, stage, getConfig, loaders }) => {
  if (stage === "build-javascript") {
    const config = getConfig()
    const index = config.plugins.findIndex(plugin => {
      return plugin.constructor.name === "MiniCssExtractPlugin"
    })
    //remove extract plugin from current plugin list
    config.plugins.splice(index, 1)
    // add our own miniCssExtract plugin
    config.plugins.push(loaders.miniCssExtract({ ignoreOrder: true }))
    actions.replaceWebpackConfig(config)
  }
}

[AmruthPillai]

@wardpeet I'm getting this issue when I try to run your code:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[7] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.

[AmruthPillai]

This is what worked for me.

gatsby-node.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

exports.onCreateWebpackConfig = ({ actions, stage, getConfig, loaders }) => {
  if (stage === "build-javascript") {
    const config = getConfig();
    const index = config.plugins.findIndex((plugin) => {
      return plugin.constructor.name === "MiniCssExtractPlugin";
    });
    config.plugins[index] = new MiniCssExtractPlugin({ ignoreOrder: true });
    actions.replaceWebpackConfig(config);
  }
};

mini-css-extract-plugin is already a dependency, so you don't need to install it again.

[gabrielpoca]

For anyone else finding this issue, this is what worked for me:

exports.onCreateWebpackConfig = ({ actions, stage, getConfig, loaders }) => {
  if (stage === "build-javascript" || stage === "develop") {
    const config = getConfig()

    const index = config.plugins.findIndex(
      (plugin) => plugin.constructor.name === "MiniCssExtractPlugin"
    )

    if (index) config.plugins[index].options.ignoreOrder = true

    actions.replaceWebpackConfig(config)
  }
}

Instead of replacing the plugin I just change the option ignoreOrder to true, that way we don't remove any options set by Gatsby.