WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content
This repository was archived by the owner on Dec 25, 2018. It is now read-only.
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

@Nibor808

Description

@Nibor808

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions