csstools / csstools/postcss-extend-rule

Issues stemming from postcss-nested 5.0.0 and newer

Open
#14 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
54
Forks
7
Avg merge
1d 5h
Merged PRs (30d)
1

Description

Hello,

To ensure both parties see this, we wrote this in-depth here: https://github.com/postcss/postcss-nested/issues/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:
```json
{
"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:

```js
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!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.