Migrating Stylelint from 13.13.1 to 14.16.0 will stop Webpack process at "92% sealing asset processing StylelintWebpackPlugin_1"

[1v3n]

Migrating Stylelint version from 13.13.1 to 14.16.0 will stop Webpack process at "92% sealing asset processing StylelintWebpackPlugin_1"

I followed the official migration guide.

Once I start Webpack I would expect that the bundling is successful, but webpack stops here:

Command: webpack --stats --mode development --progress Stops at 92% sealing asset processing StylelintWebpackPlugin_1

Here is my config:

package.json

```json | { "name": "company-repo", "dependencies": { "@splidejs/splide": "^4.1.4", "axios": "^1.2.0", "cookie": "^0.5.0", "copy-to-clipboard": "^3.3.1", "fittext.js": "1.2.0", "foundation-sites": "6.4.3", "handlebars": "4.7.7", "jquery": "^3.6.0", "jquery-lazyload": "1.9.7", "jquery-validation": "^1.19.3", "jquery.easing": "1.4.1", "js-storage": "1.1.0", "leaflet": "1.9.3", "lightweight-charts": "^3.3.0", "lozad": "1.16.0", "mobile-detect": "1.4.5", "promise-polyfill": "^8.2.0", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-is": ">= 16.8.0", "slick-carousel": "1.8.1", "star-rating-svg": "3.5.0", "styled-components": "^5.3.3", "urijs": "^1.19.7" }, "devDependencies": { "@babel/core": "^7.20.5", "@babel/eslint-parser": "^7.14.4", "@babel/preset-env": "^7.14.4", "@babel/preset-react": "^7.13.13", "@babel/preset-typescript": "^7.14.5", "@types/jasmine": "^3.7.7", "@types/jquery": "^3.5.5", "@typescript-eslint/eslint-plugin": "^4.27.0", "@typescript-eslint/parser": "^4.27.0", "autoprefixer": "^10.4.13", "babel-loader": "^9.1.2", "babel-plugin-istanbul": "^6.0.0", "babel-polyfill": "^6.26.0", "compression-webpack-plugin": "^8.0.0", "copy-webpack-plugin": "^9.0.0", "css-loader": "^5.2.6", "css-minimizer-webpack-plugin": "^3.0.1", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "eslint": "^7.1.0", "eslint-config-airbnb-base": "^14.1.0", "eslint-config-prettier": "^8.3.0", "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-jasmine": "4.1.1", "eslint-plugin-react": "^7.31.11", "expose-loader": "^4.0.0", "file-loader": "^6.2.0", "glob": "^7.1.7", "handlebars-loader": "^1.7.1", "istanbul-combine": "^0.3.0", "jasmine-enzyme": "^7.1.2", "jest": "^27.0.6", "karma": "^6.3.4", "karma-babel-preprocessor": "^8.0.1", "karma-chrome-launcher": "^3.1.0", "karma-coverage": "^2.0.3", "karma-fixture": "^0.2.6", "karma-html2js-preprocessor": "^1.1.0", "karma-jasmine": "^4.0.1", "karma-jasmine-ajax": "^0.1.13", "karma-json-fixtures-preprocessor": "^0.0.6", "karma-mocha": "^2.0.1", "karma-mocha-reporter": "^2.2.5", "karma-phantomjs-launcher": "^1.0.4", "karma-webpack": "^5.0.0", "mini-css-extract-plugin": "^1.6.0", "mocha": "^9.0.2", "postcss": "^8.3.0", "postcss-scss": "^4.0.4", "postcss-loader": "^7.0.2", "prettier": "^2.8.1", "process": "^0.11.10", "resolve-url-loader": "5.0.0-beta.1", "sass": "^1.57.1", "sass-loader": "^13.2.0", "sass-true": "^7.0.0", "stylelint": "^14.16.0", "stylelint-prettier": "^2.0.0", "stylelint-config-prettier": "^9.0.4", "stylelint-config-standard-scss": "^6.1.0", "stylelint-order": "^6.0.0", "stylelint-webpack-plugin": "^3.3.0", "svg-sprite-loader": "^6.0.7", "terser-webpack-plugin": "^4.2.3", "typescript": "^4.3.4", "url-loader": "^4.1.1", "util": "^0.12.4", "webpack": "^5.61.0", "webpack-bundle-analyzer": "^4.4.2", "webpack-cli": "^4.7.0", "webpack-manifest-plugin": "^5.0.0" }, "scripts": { "webpack": "webpack --stats --mode development --progress", "webpack:prod": "webpack --bail --mode production", "webpack:watch": "webpack --watch --mode development --profile --progress", }, "private": true, "directories": { "doc": "doc" }, "license": "ISC" } ```

.stylelintrc.js

```js module.exports = { extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier'], plugins: ['stylelint-order'], } ```

Webpack config StylelintPlugin

⬇️ Full config below ⬇️ ```js new StylelintPlugin({ emitWarning: true, files: ['**/*.scss'], exclude: ['/shops/'], extension: 'scss', context: path.resolve(__dirname, '../scss/'), }), ```

Full webpack config

```js const path = require('path'); const webpack = require('webpack'); const SpritePlugin = require('svg-sprite-loader/plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); const StylelintPlugin = require('stylelint-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const TerserPlugin = require('terser-webpack-plugin'); module.exports = function ({ manifestConfig, target, commonPlugins, mode }) { const plugins = [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Storages: 'js-storage', }), new SpritePlugin(), new MiniCssExtractPlugin({ filename: `[name]${manifestConfig ? '-[contenthash]' : ''}.css` }), new StylelintPlugin({ emitWarning: true, files: ['**/*.scss'], exclude: ['/shops/'], extension: 'scss', context: path.resolve(__dirname, '../scss/'), }), new BundleAnalyzerPlugin({ analyzerMode: mode === 'production' ? 'static' : 'disabled', openAnalyzer: false, reportFilename: 'company-report.html', }), ...commonPlugins, ]; if (manifestConfig) { plugins.push( new WebpackManifestPlugin({ fileName: manifestConfig.output, seed: manifestConfig.assets, basePath: '/offerpage/', publicPath: '/offerpage/', map: file => { // Remove hash in manifest key file.name = file.name.replace(/(-[a-f0-9]{32})(\..*)$/, '$2'); return file; }, }) ); } return { stats: 'minimal', devtool: 'source-map', entry: { company: ['babel-polyfill', path.resolve(__dirname, '../js/es6/company.es6.js')], }, output: { filename: `[name]${manifestConfig ? '-[chunkhash]' : ''}.js`, // use the properties of entry as name path: path.join(target, 'offerpage'), }, optimization: { minimizer: [ new TerserPlugin({ parallel: true, sourceMap: true, }), new CssMinimizerPlugin(), ], }, module: { // first lint JS files then babel transpiling rules: [ { test: /\.js$/, enforce: 'pre', exclude: /node_modules/, loader: 'eslint-loader', options: { failOnWarning: false, // does not fail when a warning occurs failOnError: true, // fails when an error occurs fix: true, // fixes automatically the no-brainer errors }, }, { test: /\.(js|jsx|ts)$/, loader: 'babel-loader', options: { presets: ['@babel/preset-typescript', '@babel/env', '@babel/preset-react'], }, }, { test: /\.svg$/, issuer: { not: [/\.scss$/] }, include: [path.resolve(__dirname, '../img/flags'), path.resolve(__dirname, '../img/company-icons')], use: [ { loader: 'svg-sprite-loader', options: { extract: true, spriteFilename: pathname => pathname.includes('company-icons') ? `images/company-icons${manifestConfig ? '.[hash]' : ''}.svg` : `images/sprite${manifestConfig ? '.[hash]' : ''}.svg`, }, }, ], }, { test: /\.(png|jp(e*)g|svg|gif)$/, issuer: { not: [/\.scss$/] }, exclude: [path.resolve(__dirname, '../img/flags'), path.resolve(__dirname, '../img/company-icons')], use: [ { loader: 'url-loader', options: { limit: 300, name: `images/[name]${manifestConfig ? '-[hash]' : ''}.[ext]`, }, }, ], }, { test: /\.(png|jp(e*)g|svg|gif)$/, issuer: /\.scss$/, use: [ { loader: 'url-loader', options: { limit: 300, name: `images/[name]${manifestConfig ? '-[hash]' : ''}.[ext]`, }, }, ], }, { test: /\.(ttf|eot|woff|woff2)$/, loader: 'file-loader', options: { name: `fonts/[name]${manifestConfig ? '-[hash]' : ''}.[ext]`, }, }, { test: /\.html$/, loader: 'handlebars-loader', options: { name: `template/[name]${manifestConfig ? '-[hash]' : ''}.[ext]`, }, }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', { loader: 'resolve-url-loader', }, { loader: 'sass-loader', options: { sourceMap: true, sassOptions: { sourceMapContents: true, }, }, }, ], }, ], }, plugins, resolve: { symlinks: false, extensions: ['.js', '.jsx', '.ts'], }, target: 'web', externals: { jquery: 'jQuery', handlebars: 'Handlebars', }, }; }; ```

[alexander-akait]

Can you creatre reproducible test repo on github?

[ricardogobbosouza]

Hi @1v3n Could you provide a repository to reproduce?

[1v3n]

Hey @ricardogobbosouza,

we fixed it by not following the official migration guide but adding that to your .stylelintrc.json (which is what stylelint-config-standard-scss would do under the hood anyway, if I remember correctly):

 "customSyntax": "postcss-scss",
    "plugins": [
        "stylelint-scss"
    ],

Thx for checking in 🙏