error with css @support for iPhoneX

[bolechen]

when I use

require('laravel-mix-purgecss');
mix.purgeCss();

and my css code:

//for ipx
@supports (padding-bottom: constant(safe-area-inset-bottom)) or (padding-bottom: env(safe-area-inset-bottom)) {
    .app-bottom {
        // padding-bottom: 34px;
        padding-bottom: constant(safe-area-inset-bottom) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

when build done,the css for iPhoneX is gone

[cjmaxik]

Please share webpack.mix.js file.

[bolechen]

let mix = require('laravel-mix');

require('laravel-mix-sass-resources-loader')
// require('laravel-mix-purgecss')
require('laravel-mix-versionhash')

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js').extract(['vue'])
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css')
    .disableNotifications();

//全局样式
mix.sassResources('resources/assets/sass/variables.scss');

if (mix.inProduction()) {
    // mix.purgeCss();
    mix.versionHash();
} else {
    mix.sourceMaps();
}

mix.webpackConfig({
    plugins: [
        // new BundleAnalyzerPlugin(),
    ],
    output: {
        publicPath: '/',
        chunkFilename: 'js/[name].[chunkhash].js',
    },
});

mix.options({
    processCssUrls: true,
    purifyCss: true,
    extractVueStyles: false,
    imgLoaderOptions: {
        enabled: false
    },
    postCss: [
        // require('postcss-pxtorem')({rootValue: 16, propList: ['*'] }),
    ],
    uglify: {
        uglifyOptions: {
            compress: {
                drop_console: true,
                drop_debugger: true
            }
        }
    }
});

when I commented this lines, it seems ok, thx

[cjmaxik]

And what is your laravel-mix version?

[cjmaxik]

Anyway, works perfectly for me on laravel-mix@3. Check if your .app-bottom presented in files within globs (defaults) or you can add in to whitelist using whitelist: [] option.

[bolechen]

Anyway, works perfectly for me on laravel-mix@3. Check if your .app-bottom presented in files within globs (defaults) or you can add in to whitelist using whitelist: [] option.

thx very much.