Webpack converts rgba to hex value problem

Questions
1

Hi guys,

When i run my app in dev it’s ok but as soon as i built it for production my CSS variabele rgba ar converted to hex values? Does anyone know why this happens and how to fix this?

See screenshot.

webpack-issue
webpack-issue.png1000×1000 108 KB

const webpack = require(‘webpack’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);

const path = require(‘path’);

function resolvePath(dir) {
return path.join(__dirname, ‘…’, dir);
}

const env = process.env.NODE_ENV || ‘development’;
const target = process.env.TARGET || ‘web’;
const isCordova = target === ‘cordova’;

module.exports = {
mode: env,
entry: [
‘./src/js/app.js’,
],
output: {
path: resolvePath(isCordova ? ‘cordova/www’ : ‘www’),
filename: ‘js/app.js’,
publicPath: ‘’,
hotUpdateChunkFilename: ‘hot/hot-update.js’,
hotUpdateMainFilename: ‘hot/hot-update.json’,
},
resolve: {
extensions: [’.js’, ‘.vue’, ‘.json’],
alias: {
vue$: ‘vue/dist/vue.esm.js’,
‘@’: resolvePath(‘src’),
},
},
devtool: env === ‘production’ ? ‘source-map’ : ‘eval’,
devServer: {
hot: true,
open: true,
compress: true,
contentBase: ‘/www/’,
disableHostCheck: true,
watchOptions: {
poll: 1000,
},
},
optimization: {
minimizer: [new TerserPlugin({
sourceMap: true,
})],
},
module: {
rules: [
{
test: /.(js|jsx)$/,
use: ‘babel-loader’,
include: [
resolvePath(‘src’),
resolvePath(‘node_modules/framework7’),
resolvePath(‘node_modules/framework7-vue’),

      resolvePath('node_modules/template7'),
      resolvePath('node_modules/dom7'),
      resolvePath('node_modules/ssr-window'),
    ],
  },

  {
    test: /\.vue$/,
    use: 'vue-loader',
  },
  {
    test: /\.css$/,
    use: [
      (env === 'development' ? 'style-loader' : {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../'
        }
      }),
      'css-loader',
      'postcss-loader',
    ],
  },
  {
    test: /\.styl(us)?$/,
    use: [
      (env === 'development' ? 'style-loader' : {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../'
        }
      }),
      'css-loader',
      'postcss-loader',
      'stylus-loader',
    ],
  },
  {
    test: /\.less$/,
    use: [
      (env === 'development' ? 'style-loader' : {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../'
        }
      }),
      'css-loader',
      'postcss-loader',
      'less-loader',
    ],
  },
  {
    test: /\.(sa|sc)ss$/,
    use: [
      (env === 'development' ? 'style-loader' : {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../'
        }
      }),
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ],
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'images/[name].[hash:7].[ext]'

    },
  },
  {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'media/[name].[ext]',

    },
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'fonts/[name].[ext]',

    },
  },
],

},
plugins: [
new webpack.DefinePlugin({
‘process.env.NODE_ENV’: JSON.stringify(env),
‘process.env.TARGET’: JSON.stringify(target),
}),
new VueLoaderPlugin(),
…(env === ‘production’ ? [
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
map: { inline: false },
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
] : [
// Development only plugins
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
new HtmlWebpackPlugin({
filename: ‘./index.html’,
template: ‘./src/index.html’,
inject: true,
minify: env === ‘production’ ? {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} : false,
}),
new MiniCssExtractPlugin({
filename: ‘css/app.css’,
}),
new CopyWebpackPlugin([
{
from: resolvePath(‘src/static’),
to: resolvePath(isCordova ? ‘cordova/www/static’ : ‘www/static’),
},

]),

],
};

2

Why do you need to fix it? In production it is added for two reasons:

  1. fallback for browsers that don’t support CSS variables (or at least tries to do it)
  2. hex value takes less characters -> your CSS has smaller size

But anyway, it is done by PostCSS plugin, you can check its docs to have control over it

3

I want my color picker to use RGBA values, the defaults are fetched from the CSS variables like so:

return window.getComputedStyle($(’#appRoot’)[0]).getPropertyValue(cssVarName);

Now the color picker breaks because it gets hex instead of RGBA values.

I found out the OptimizeCSSPlugin is causing this, when is disable it the values stay in RGBA. Is there a configuration option to leave the RGBA values intact?

4

I found it:

cssProcessorPluginOptions: {
preset: [‘default’, {colormin: false}],
},

1 Like