packages/pack/webpack/css.loader.js

   1 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   2
   3 const RAW_TEXT = /.*\.theme\.css|\.raw\.scss$/;
   4
   5 const handleUrlResolve = (url) => {
   6     // Transparent image, included through write
   7     if (url.includes('host.png')) {
   8         return false;
   9     }
  10     return true;
  11 };
  12
  13 module.exports = ({ browserslist, logical, webpackOnCaffeine }) => {
  14     const sassLoaders = [
  15         {
  16             loader: require.resolve('css-loader'),
  17             options: {
  18                 url: { filter: handleUrlResolve },
  19             },
  20         },
  21         {
  22             loader: require.resolve('postcss-loader'),
  23             options: {
  24                 postcssOptions: {
  25                     plugins: [
  26                         require('autoprefixer')({
  27                             overrideBrowserslist: browserslist,
  28                             flexbox: 'no-2009',
  29                         }),
  30                         require('postcss-color-functional-notation')(),
  31                         !logical && require('postcss-logical')(),
  32                     ].filter(Boolean),
  33                 },
  34             },
  35         },
  36         !webpackOnCaffeine && {
  37             loader: require.resolve('resolve-url-loader'),
  38         },
  39         {
  40             loader: require.resolve('sass-loader'),
  41             options: webpackOnCaffeine
  42                 ? {
  43                       implementation: require('sass'),
  44                       sassOptions: {
  45                           outputStyle: 'compressed',
  46                       },
  47                   }
  48                 : {},
  49         },
  50     ].filter(Boolean);
  51
  52     const miniLoader = {
  53         loader: MiniCssExtractPlugin.loader,
  54     };
  55
  56     return [
  57         {
  58             test: /\.css$/,
  59             exclude: /.*\.theme\.css/,
  60             use: [
  61                 miniLoader,
  62                 {
  63                     loader: require.resolve('css-loader'),
  64                     options: {
  65                         importLoaders: 1,
  66                         url: { filter: handleUrlResolve },
  67                     },
  68                 },
  69             ],
  70             sideEffects: true,
  71         },
  72         {
  73             test: /\.scss$/,
  74             exclude: RAW_TEXT,
  75             use: [miniLoader, ...sassLoaders],
  76             sideEffects: true,
  77         },
  78         {
  79             test: RAW_TEXT,
  80             // Prevent loading the theme in <style>, we want to load it as a raw string
  81             use: [...sassLoaders],
  82         },
  83     ];
  84 };