removing .form-control from output file (styles.css)

[Nibor808]

trafficstars

versions: "purify-css": "^1.2.5", "purifycss-webpack": "^0.7.0"

Without purify:

After purify:

A search through styles.css reveals that there is no .form-control class present:

webpack:

 require('node-env-file')('./.env');
const path = require('path');
const glob = require('glob-all');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const webpack = require('webpack');
const AssetsPlugin = require('assets-webpack-plugin');
const MCSSEPlugin = require('mini-css-extract-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

const DEV = process.env.DEPLOY_MODE === 'development';
const PROD = process.env.DEPLOY_MODE === 'production';
// eslint-disable-next-line no-console
console.log('DEPLOY_MODE ----->', process.env.DEPLOY_MODE);


const baseDir = path.resolve(__dirname, './src/client');

let outputDir;
let mode;

if (PROD) {
  outputDir = path.resolve(__dirname, './build-prod');
  mode = 'production';
} else if (DEV) {
  outputDir = path.resolve(__dirname, './build-dev');
  mode = 'development';
} else {
  outputDir = path.resolve(__dirname, './build-qa');
  mode = 'production';
}

const entry = `${baseDir}/client.js`;

const plugins = [
  new webpack.DefinePlugin({
    'stripeClientKey': JSON.stringify(process.env.STRIPE_PUB_TEST_KEY)
  }),
  new webpack.EnvironmentPlugin(['DEPLOY_MODE']),
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
  }),
  new MCSSEPlugin({
    filename: 'styles.css'
  }),
  new AssetsPlugin({
    prettyPrint: true,
    fullPath: false,
    path: path.resolve(__dirname, 'src')
  }),
  new MomentLocalesPlugin()
];

const rules = [
  {
    test: /\.(scss|css)$/,
    use: [
      MCSSEPlugin.loader,
      'css-loader',
      'sass-loader',
      'postcss-loader'
    ]
  },
  {
    test: /\.(png|jpe?g|gif|woff|ttf|eot)/,
    loader: 'url-loader',
    options: {
      limit: 10240
    }
  },
  {
    test: /\.svg$/,
    loader: 'svg-url-loader',
    options: {
      limit: 10240,
      noquotes: true,
    }
  }
];

if (!DEV) {
  plugins.push(new PurifyCSSPlugin({
    paths: glob.sync([
      path.join(__dirname, 'src/client/components/*.js'),
      path.join(__dirname, 'src/client/components/admin/*.js'),
      path.join(__dirname, 'src/client/components/auth/*.js'),
      path.join(__dirname, 'src/client/components/common_info/*.js'),
      path.join(__dirname, 'src/client/components/edit_common_info/*.js'),
      path.join(__dirname, 'src/client/components/form_74_4/*.js'),
      path.join(__dirname, 'src/client/components/form_74_6/*.js'),
      path.join(__dirname, 'src/client/components/form_74_7/*.js'),
      path.join(__dirname, 'src/client/components/form_74_11/*.js'),
      path.join(__dirname, 'src/client/components/form_75_1/*.js'),
      path.join(__dirname, 'src/client/components/initial_questions/*.js'),
      path.join(__dirname, 'src/client/components/landing/*.js'),
      path.join(__dirname, 'src/client/components/stripe/*.js')
    ]),
    minimize: true,
    verbose: true
  }));
  rules.push(
    {
      test: /\.(jpe?g|png|gif|svg)$/,
      loader: 'image-webpack-loader',
      enforce: 'pre'
    }
  );
}

const config = {
  mode,
  entry: {
    bundle: entry
  },
  output: {
    path: outputDir,
    filename: DEV ? '[name].js' : '[name].[chunkhash].js',
    publicPath: '/'
  },
  resolve: {
    alias: {
      Bootstrap: path.resolve('node_modules/bootstrap-sass/assets'),
      jQuery: path.resolve('node_modules/jquery/dist')
    },
    extensions: ['*', '.js', '.json', '.jsx'],
    enforceExtension: false,
    modules: [
      'node_modules'
    ]
  },
  devtool: DEV ? 'cheap-module-source-map' : false,
  plugins: plugins,
  module: {
    rules: rules,
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    occurrenceOrder: !DEV,
    concatenateModules: !DEV,
    mergeDuplicateChunks: !DEV,
    removeEmptyChunks: true,
    removeAvailableModules: true
  },
  watchOptions: {
    aggregateTimeout: 5000,
    ignored: /node_modules/
  }
};

module.exports = merge(baseConfig, config);

Can't for the life of me figure out what is happening.