@plone/volto/webpack-plugins/webpack-scss-plugin.js

Volto

/* Razzle SCSS Webpack Plugin `razzle-plugin-scss`
    Forked from https://github.com/jaredpalmer/razzle/blob/master/packages/razzle-plugin-scss/index.js
    version 4.2.18
    See Volto's upgrade guide for more information:
    https://6.docs.plone.org/volto/upgrade-guide/index.html
*/

const autoprefixer = require('autoprefixer');
const merge = require('deepmerge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const paths = require('@plone/razzle/config/paths');
const postcssLoadConfig = require('postcss-load-config');

const hasPostCssConfig = () => {
  try {
    return !!postcssLoadConfig.sync();
  } catch (_error) {
    return false;
  }
};

module.exports = {
  modifyWebpackConfig(opts) {
    const isServer = opts.env.target !== 'web';
    const constantEnv = opts.env.dev ? 'dev' : 'prod';

    const razzleOptions = opts.options.razzleOptions;
    const config = Object.assign({}, opts.webpackConfig);

    const defaultOptions = {
      postcss: {
        dev: {
          sourceMap: true,
          ident: 'postcss',
        },
        prod: {
          sourceMap: razzleOptions.enableSourceMaps,
          ident: 'postcss',
        },
        plugins: [
          [
            autoprefixer,
            {
              overrideBrowserslist: opts.options.razzleOptions.browserslist || [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9',
              ],
              flexbox: 'no-2009',
            },
          ],
        ],
      },
      sass: {
        dev: {
          sassOptions: {
            sourceMap: true,
            includePaths: [paths.appNodeModules],
            outputStyle: 'expanded',
            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
            quiet: true,
            quietDeps: true,
          },
        },
        prod: {
          sassOptions: {
            // XXX Source maps are required for the resolve-url-loader to properly
            // function. Disable them in later stages if you do not want source maps.
            sourceMap: true,
            sourceMapContents: false,
            includePaths: [paths.appNodeModules],
            outputStyle: 'expanded',
            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
            quiet: true,
            quietDeps: true,
          },
        },
      },
      css: {
        dev: {
          sourceMap: true,
          importLoaders: 1,
          modules: {
            auto: true,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
        prod: {
          sourceMap: razzleOptions.enableSourceMaps,
          importLoaders: 1,
          modules: {
            auto: true,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
      style: {},
      resolveUrl: {
        dev: {},
        prod: {},
      },
    };

    const options = Object.assign(
      {},
      defaultOptions,
      opts.options.pluginOptions,
    );

    const styleLoader = {
      loader: require.resolve('style-loader'),
      options: options.style,
    };

    const cssLoader = {
      loader: require.resolve('css-loader'),
      options: options.css[constantEnv],
    };

    const resolveUrlLoader = {
      loader: require.resolve('resolve-url-loader'),
      options: options.resolveUrl[constantEnv],
    };

    const postCssLoader = {
      loader: require.resolve('postcss-loader'),
      options: hasPostCssConfig()
        ? undefined
        : {
            postcssOptions: Object.assign({}, options.postcss[constantEnv], {
              plugins: options.postcss.plugins,
            }),
          },
    };

    const sassLoader = {
      loader: require.resolve('sass-loader'),
      options: options.sass[constantEnv],
    };

    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.(sa|sc)ss$/,
        use: isServer
          ? [
              {
                loader: require.resolve('css-loader'),
                options: merge(options.css[constantEnv], {
                  modules: {
                    exportOnlyLocals: true,
                  },
                }),
              },
              resolveUrlLoader,
              postCssLoader,
              sassLoader,
            ]
          : [
              opts.env.dev ? styleLoader : MiniCssExtractPlugin.loader,
              cssLoader,
              postCssLoader,
              resolveUrlLoader,
              sassLoader,
            ],
      },
    ];

    return config;
  },
};