export function getStyleRules()

in webpack-common.js [11:75]

• 57 lines of code
• 3 McCabe index (conditional complexity)

export function getStyleRules({
  bundleStylesWithJs = false,
  _config = config,
} = {}) {
  let styleRules;

  const postCssPlugins = [];
  if (_config.get('enablePostCssLoader')) {
    postCssPlugins.push(autoprefixer());
  }

  const cssLoaderOptions = {
    importLoaders: 2,
    // This is needed to be backward compatible with css-loader v2.
    esModule: false,
  };
  const postcssLoaderOptions = {
    postcssOptions: {
      plugins: postCssPlugins,
    },
  };
  const sassLoaderOptions = {
    sassOptions: {
      quietDeps: true,
      silenceDeprecations: [
        'import', // https://sass-lang.com/documentation/breaking-changes/import/
        'global-builtin', // https://sass-lang.com/documentation/breaking-changes/import/
        'mixed-decls', // https://sass-lang.com/documentation/breaking-changes/mixed-decls/
        'color-functions', // https://sass-lang.com/documentation/breaking-changes/color-functions/
        'slash-div', // https://sass-lang.com/documentation/breaking-changes/slash-div/
      ],
    },
  };

  if (bundleStylesWithJs) {
    // In development, we bundle styles with the JS.
    styleRules = [
      {
        test: /\.(sc|c)ss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: cssLoaderOptions },
          { loader: 'postcss-loader', options: postcssLoaderOptions },
          { loader: 'sass-loader', options: sassLoaderOptions },
        ],
      },
    ];
  } else {
    // In production, we create a separate CSS bundle rather than include
    // styles with the JS bundle. This lets the style bundle load in parallel.
    styleRules = [
      {
        test: /\.(sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: cssLoaderOptions },
          { loader: 'postcss-loader', options: postcssLoaderOptions },
          { loader: 'sass-loader', options: sassLoaderOptions },
        ],
      },
    ];
  }

  return styleRules;
}