Skip to content
This repository was archived by the owner on Dec 25, 2018. It is now read-only.

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

Open
Nibor808 opened this issue Oct 17, 2018 · 0 comments
Open

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

Nibor808 opened this issue Oct 17, 2018 · 0 comments

Comments

@Nibor808
Copy link

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

Without purify:
screen shot 2018-10-17 at 2 11 03 pm

screen shot 2018-10-17 at 1 59 37 pm

After purify:
screen shot 2018-10-17 at 2 10 06 pm

screen shot 2018-10-17 at 2 02 38 pm

A search through styles.css reveals that there is no .form-control class present:
screen shot 2018-10-17 at 2 08 32 pm

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant