JastaFly
@JastaFly

Сборщик игнорирует синтаксис PostCSS?

Переношу старую сборку на Node 18.12.0 и Webpack 5 и после обновления пакетов и конфигов перестал нормально собираться банд со стилями. Стили собираются но полностью игнорят синтаксис PostCSS, копируясь из файлов на прямую. То есть например, есть у нас вот такой вот вложенный блок на PostCSS:
{
  ......
    &__inner {
        display: grid;
        grid-template-columns: 5fr 5fr;
        grid-column-gap: 2%;
        grid-row-gap: 15px;
    }
}

Вот во что он превращается в бандле:
__inner.mfrs {
        display: grid;
        grid-template-columns: 5fr 5fr;
        grid-column-gap: 2%;
        grid-row-gap: 15px;
    }

Блок PostCSS для адаптив использующий переменные:
.mfp-gallery {
    .mfp {
        &-arrow, &-close {
            display: none;
        }

        &-content {
            width: 600px;
            max-height: 90vh;

            @media (--max1024) {
                width: 100%;
                max-width: 90vw !important;
            }
        }
    }
}

Превращается в это:
.mfp-gallery   -content.mfp {
            width: 600px;
            max-height: 90vh;
        }

@media (--max1024) {

.mfp-gallery    -content.mfp {
                width: 100%;
                max-width: 90vw !important;
        }

То есть переменны не сработали, амперсанд (&) ссылающийся на родительский блок тоже не фурычит. При этом сборщик не на что не ругается, в нём нет ничего кроме пары варнингов которые как мне кажется отношения к делу не имеют:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main.css (1.01 MiB)
  main.js (934 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.92 MiB)
      main.css
      main.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Мой webpack.config.js:
const params = {
    env: process.env.NODE_ENV || 'development'
};

const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

const plugins = {
    miniCssExtractPlugin: require("mini-css-extract-plugin"),
    svgLoader: require('svg-sprite-loader/plugin'),
    cssOptimize: require('optimize-css-assets-webpack-plugin'),
    jsOptimize: require('terser-webpack-plugin')
};

const postCss = {
    postCssPresetEnv: require('postcss-preset-env'),
    import: require('postcss-import'),
    nested: require('postcss-nested'),
    cssFor: require('postcss-for'),
    simpleVars: require('postcss-simple-vars'),
    flexbugs: require("postcss-flexbugs-fixes"),
    inputStyle: require("postcss-input-style"),
    objectFit: require("postcss-object-fit-images"),
    gradientFix: require('postcss-gradient-transparency-fix'),
    extend: require('postcss-extend'),
};

module.exports = {
    context: path.resolve(__dirname + '/app'),
    entry: {
        subscription: './app-subscription.js',
        critical: './app-crit.js',
        main: './app.js',
    },
    stats: {children: false},

    watch: params.env == 'development',
    watchOptions: {
        aggregateTimeout: 50
    },

    resolve: {
        modules: [
            (path.resolve(__dirname)),
            (path.resolve(__dirname) + '/vendor'),
            (path.resolve(__dirname) + '/node_modules')
        ],
        extensions: ['*', '.js', '.css']
    },

    resolveLoader: {
        modules: [
            path.resolve(__dirname),
            path.resolve(__dirname) + '/node_modules',
            path.resolve(__dirname) + '/node_modules'
        ]
    },

    output: {
        path: path.resolve(__dirname + '/build'),
        publicPath: '/local/client/build/',
        filename: '[name].js',
        library: 'App'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    plugins.miniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',

                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            postcssOptions: {
                                plugins: () => [
                                    postCss.import(),
                                    postCss.cssFor(),
                                    postCss.simpleVars(),
                                    postCss.postCssPresetEnv(),
                                    postCss.nested(),
                                    postCss.flexbugs(),
                                    postCss.inputStyle(),
                                    postCss.objectFit(),
                                    postCss.gradientFix(),
                                    postCss.extend(),
                                ]

                            }

                        },
                    },
                ],
            },

            {
                test: /\.js$/,
                exclude: /(node_modules|vendor)/,
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                    presets: ['@babel/preset-env']
                }
            },

            {
                test: /\.(svg)$/,
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: true,
                        }
                    },
                    'svg-transform-loader',
                    'svgo-loader'
                ]
            }
        ]
    },

    plugins: [
        new plugins.miniCssExtractPlugin({
            filename: '[name].css'
        }),

        new plugins.svgLoader(),

        new webpack.ProvidePlugin({
            Swiper: 'swiper/dist/js/swiper.min.js',
            vanillaTextMask: "vanilla-text-mask/dist/vanillaTextMask.js"
        }),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new Dotenv({
            path:  (path.resolve(__dirname) + '/.env')
        }),
        
    ]
};

if (params.env == 'production') {

    module.exports.plugins.push(
        new plugins.jsOptimize()
    );

    /*module.exports.plugins.push(
        new plugins.cssOptimize({
            cssProcessor: require('cssnano'),
        })
    );*/
}

Подскажите плиз что не так? Куда глядеть?
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
JastaFly
@JastaFly Автор вопроса
Починить сборку помогло удаление плагина postcss-preset-env из конфига вебпака
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы