Z-index values getting prepended with # in latest version, only when building for prod

[relm]

I've encountered a strange issue - since upgrading to the latest 1.3.0 release, certain z-index values are getting prepended with a # symbol. It only happens when building for prod.

I downgraded to 0.33.0 and this did not occur anymore.

What's even weirder is that it doesn't happen across all values, just certain CSS rules.

One example:

.header-wrapper { z-index: 200; }

Gets changed to the following after compile:
.header-wrapper { z-index: #200; }

Any ideas on what would cause this? For now I have downgraded to 0.33.0 since I cannot figure it out.

My webpack.config.js:

var Encore = require('@symfony/webpack-encore');
var path = require('path');
//var webpack = require('webpack');
//var MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');

Encore
    // the project directory where all compiled assets will be stored
    .setOutputPath('public/assets/dist')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/assets/dist')
    //.addLoader({ test: /\.handlebars$/, loader: 'handlebars-loader' })
    .enableSingleRuntimeChunk()

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './assets/js/app.js')

    .addEntry('login', './assets/js/pages/login.js')
    .addEntry('register', './assets/js/pages/register.js')
    .addEntry('archive', './assets/js/pages/archive.js')
    .addEntry('narshe', './assets/js/pages/narshe.js')
    .addEntry('management', './assets/js/components/Management.js')
    .addEntry('video', './assets/js/video.js')
    .splitEntryChunks()
    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    //.enableSingleRuntimeChunk()
    //.disableSingleRuntimeChunk()
    // create hashed filenames (e.g. app.abc123.css) - only for production
    .enableVersioning()
    .enableSourceMaps(!Encore.isProduction())
    // Enable SASS loader with PostCSS config
    /*.enableSassLoader((options) => {
        options.sourceMap = true;
        options.sassOptions = {
            outputStyle: 'compressed',
            sourceComments: !Encore.isProduction(),
        };
    }, {})*/
    /*.enableSassLoader(function (options) {
    }, 
        { resolveUrlLoader: false }
    )*/

    // enables Sass/SCSS support
    .enableSassLoader()
    .enablePostCssLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()
    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()
    // show OS notifications when builds finish/fail
    .enableBuildNotifications()
    // Enable .vue file processing
    .enableVueLoader(() => {}, { runtimeCompilerBuild: false, version: 3 })
    // enables @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3,
        includeNodeModules: ['bootstrap', 'flatpickr', 'vue-tippy', 'tippy.js']
    })
    // This is our alias to the root vue components dir
    .addAliases({
        '@': path.resolve(__dirname, 'assets', 'js/vue'),
        styles: path.resolve(__dirname, 'assets', 'css'),
    })
    /*.addPlugin(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
    .addPlugin(new MomentTimezoneDataPlugin({
        matchZones: /^America/,
        matchZones: [/^America/, /^Pacific/, /^Atlantic/, /^Europe/, /^Africa/, /^Asia/, /^Australia/],
    }))*/
;

if (Encore.isProduction()) {
    Encore.setOutputPath('public/assets/dist/prod');
}

// export the final configuration
module.exports = Encore.getWebpackConfig();

[Kocal]

Related to cssnano/cssnano#1113 I guess, #966 upgraded CSSNano from 4 to 5.

There is already a PR that fix your issue: cssnano/cssnano#1118