Issues found in 5.0.0+, causing other PostCSS plugins particularly postcss-extend-rule

[coderesolution]

Hello,

To ensure both parties see this, we wrote this in-depth here: csstools/postcss-extend-rule#14. However, for the sake of continuity I have pasted the same contents below:

Our team have been having issues recently after updating all of our dependencies to the latest versions (except for Gulp).

The primary issue we are facing is whilst using postcss-extend-rule (and similar issues with alternative postcss-extend) coupled with the latest version of postcss-nested. The issue causes the @extend rule to not compile properly when nested and across various files. As such, we find div { @extend .example; } in our compiled CSS.

After spending a lot of time switching versions back-and-forth for every single dependency, we located the specific dependency and release that is causing issues.

And that is postcss-nested, release 5.0.0 and newer. When we use 4.2.3 or older, it runs a dream.

Our latest package.json (working) file:

{
  "name": "Project",
  "version": "1.0.0",
  "description": "Description",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.7",
    "browser-sync": "^2.27.5",
    "clear": "^0.1.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-notify": "^4.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^9.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-shell": "^0.7.1",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-terser": "^1.4.1",
    "postcss": "^8.3.11",
    "postcss-critical-split": "^2.5.3",
    "postcss-custom-media": "^8.0.0",
    "postcss-easings": "^3.0.1",
    "postcss-easy-import": "^3.0.0",
    "postcss-extend-rule": "^3.0.0",
    "postcss-flexibility": "^3.0.0",
    "postcss-hexrgba": "^2.0.1",
    "postcss-media-minmax": "^5.0.0",
    "postcss-merge-queries": "^1.0.3",
    "postcss-mixins": "^8.1.0",
    "postcss-nested": "^4.2.3",
    "postcss-pxtorem": "^6.0.0",
    "postcss-responsive-type": "^1.0.0",
    "postcss-short": "^5.0.0",
    "postcss-simple-vars": "^5.0.2",
    "postcss-units": "^1.2.1",
    "postcss-value-parser": "^4.1.0"
  },
  "resolutions": {
    "graceful-fs": "^4.2.4"
  },
  "browserslist": [
    "last 3 versions",
    "> 5% in GB"
  ]
}

We are using Gulp. Here is a preview of the related task:

gulp.task( 'css:theme:core', function() {

	return gulp.src( path.styles.src + '/base/build.css' )
		.pipe( plumber( {
			errorHandler: notify.onError( "Error: <%= error.message %>" )
		} ) )
		.pipe( sourcemaps.init() )
		.pipe( postcss( [
			require( 'postcss-easy-import' ),
			require( 'postcss-nested' ),
			require( 'postcss-extend-rule' ),
			require( 'postcss-easings' ),
			require( 'postcss-responsive-type' ),
			require( 'postcss-pxtorem' ),
			require( 'postcss-mixins' ),
			require( 'postcss-simple-vars' ),
			require( 'postcss-hexrgba' ),
			require( 'postcss-units' ),
			require( 'postcss-media-minmax' ),
			require( 'postcss-custom-media' ),
			require( 'postcss-merge-queries' ),
			require( 'postcss-short' ),
			require( 'autoprefixer' )
		] ) )
		.pipe( cssnano() )
		.pipe( rename( 'main.css' ) )
		.pipe( sourcemaps.write() )
		.pipe( gulp.dest( path.styles.dist ) )
		.pipe( browserSync.stream() );

} );

We would love some help locating the issue that started in postcss-nested version 5.0.0 (5.0.6 is the latest), that is causing these issues, so that we can take advantage of the latest versions of every dependency.

Thank you for your help!

[ai]

I am not sure, that we can fix it in postcss-nested.

The best way is to fix it in postcss-extend-rule. We need to migrate it to PostCSS 8.