Issues stemming from postcss-nested 5.0.0 and newer

[coderesolution]

Hello,

To ensure both parties see this, we wrote this in-depth here: postcss/postcss-nested#139. However, for the sake of continuity I have pasted the same contents below in case this is an issue with postcss-extend-rule:

Note: A suggested from css-nested was to migrate postcss-extend-rule to PostCSS 8.

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!