react-app-rewire-wolox/lib/loaders.js

Add CSS Modules + SASS and Babel config Webpack config to a [`react-app-rewired`](https://github.com/timarney/react-app-rewired) config.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _autoprefixer = require("autoprefixer");

var _autoprefixer2 = _interopRequireDefault(_autoprefixer);

var _extractTextWebpackPlugin = require("extract-text-webpack-plugin");

var _extractTextWebpackPlugin2 = _interopRequireDefault(_extractTextWebpackPlugin);

var _paths = require("./paths");

var _paths2 = _interopRequireDefault(_paths);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var scssRules = {
  test: /\.scss$/,
  include: _paths2.default.scssPath,
  exclude: _paths2.default.scssModulesPath,
  loader: _extractTextWebpackPlugin2.default.extract({
    fallback: {
      loader: require.resolve("style-loader"),
      options: {
        hmr: false
      }
    },
    use: [{
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 2,
        minimize: false,
        sourceMap: true
      }
    }, {
      loader: require.resolve("postcss-loader"),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: "postcss",
        plugins: function plugins() {
          return [require("postcss-flexbugs-fixes"), // eslint-disable-line import/no-extraneous-dependencies, global-require
          (0, _autoprefixer2.default)({
            browsers: [">1%", "last 4 versions", "Firefox ESR", "not ie < 9" // React doesn't support IE8 anyway
            ],
            flexbox: "no-2009"
          })];
        }
      }
    }, {
      loader: require.resolve("sass-loader"),
      options: {
        includePaths: [_paths2.default.scssPath]
      }
    }]
  })
};

var scssModulesRules = {
  test: /\.scss$/,
  include: _paths2.default.scssModulesPath,
  exclude: _paths2.default.scssPath,
  loader: _extractTextWebpackPlugin2.default.extract({
    fallback: {
      loader: require.resolve("style-loader"),
      options: {
        hmr: false
      }
    },
    use: [{
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 2,
        modules: true,
        camelCase: true,
        minimize: false,
        localIdentName: "[name]__[local]___[hash:base64:5]",
        sourceMap: true
      }
    }, {
      loader: require.resolve("postcss-loader"),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: "postcss",
        plugins: function plugins() {
          return [require("postcss-flexbugs-fixes"), // eslint-disable-line import/no-extraneous-dependencies, global-require
          (0, _autoprefixer2.default)({
            browsers: [">1%", "last 4 versions", "Firefox ESR", "not ie < 9" // React doesn't support IE8 anyway
            ],
            flexbox: "no-2009"
          })];
        }
      }
    }, {
      loader: require.resolve("sass-loader"),
      options: {
        includePaths: [_paths2.default.scssPath]
      }
    }]
  })
};

var cssModulesRules = {
  test: /\.css$/,
  loader: _extractTextWebpackPlugin2.default.extract({
    fallback: {
      loader: require.resolve("style-loader"),
      options: {
        hmr: false
      }
    },
    use: [{
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 2,
        minimize: false,
        sourceMap: true
      }
    }, {
      loader: require.resolve("postcss-loader"),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: "postcss",
        plugins: function plugins() {
          return [require("postcss-flexbugs-fixes"), // eslint-disable-line import/no-extraneous-dependencies, global-require
          (0, _autoprefixer2.default)({
            browsers: [">1%", "last 4 versions", "Firefox ESR", "not ie < 9" // React doesn't support IE8 anyway
            ],
            flexbox: "no-2009"
          })];
        }
      }
    }]
  })
};

exports.default = {
  scss: scssRules,
  scssModules: scssModulesRules,
  cssModules: cssModulesRules
};