./helpers/getStylesLoaders.js

getStylesLoaders.js

import { join } from 'path';
import _ from 'lodash';
import postCssScss from 'postcss-scss';
import { SASS_GLOBALS_PATH } from '../constants';
import ifCondition from './ifCondition';
import getEnvHelpers from './getEnvHelpers';

/**
 * @param {Object} [options={}]
 * @param {boolean} [cssModules=false]
 * @param {boolean} [preRender=false] if `true`, only extract selectors as json, instead of generating `css`
 * @param {boolean} [postCssPack='defaults']
 * @returns {Object[]}
 */
export default function getStylesLoaders({ cssModules = false, preRender = false, postCssPack = 'defaults' } = {}) {
  const { isProd, ifNotTest } = getEnvHelpers();

  const ifCssModules = ifCondition(cssModules);
  const ifNotPreRender = ifCondition(!preRender);

  return _.compact([
    ifNotPreRender({
      loader: 'style',
    }),
    {
      loader: preRender ? 'css/locals' : 'css',
      query: {
        ...ifCssModules({
          modules: true,
          importLoaders: 4,
          localIdentName: '[local]--[hash:base64:10]',
        }),
        minimize: false,
        sourceMap: !isProd,
      },
    },
    ifNotTest({
      loader: 'postcss',
      query: {
        syntax: postCssScss,
        parser: postCssScss,
        pack: postCssPack,
        sourceMap: !isProd,
      },
    }),
    {
      loader: 'resolve-url',
      query: {
        sourceMap: !isProd,
      },
    },
    {
      loader: 'sass',
      query: {
        outputStyle: 'expanded',
        sourceMap: !isProd,
      },
    },
    {
      loader: join(__dirname, '../webpackLoaders/injectGlobalStyles.js'),
      query: {
        path: SASS_GLOBALS_PATH,
      },
    },
  ]);
}