Plugin not generating css, no error log in console

[Xaviju]

First of all, thanks for this plugin, its a very interesting feature for postcss.
I am new to postcss, so I might be doing something wrong but this is the only plugin I am using that is not working and not showing any errors on console. If I remove the plugin from mi gulpfile the file main.css is generated correctly.

Let me show you the code.

In a file called typography.css I have a simple extend rule

@define-placeholder xsmall {
  font-size: .6rem;
}

In another file, base.css I extend this rule

body {
    @extend xsmall;
}

In my gulpfile

var autoprefixer = require('autoprefixer-core');
var cssnext = require('cssnext');
var postcssNested = require('postcss-nested');
var postcssMixins = require('postcss-mixins');
var simpleExtend = require('postcss-simple-extend');
var comments = require('postcss-discard-comments');
var importCSS = require('postcss-import');
var logWarnings = require('postcss-log-warnings');

gulp.task('styles', function () {
    var processors = [
        cssnext(),
        importCSS({from: 'app/css/main.css'}),
        postcssMixins(),
        postcssNested,
        simpleExtend(),
        autoprefixer({browsers: ['last 2 versions']}),
        comments(),
        logWarnings()
    ];
    return gulp.src('app/css/main.css')
    .pipe($.postcss(processors))
    .pipe(gulp.dest('dist/styles'));
});

If I comment the simpleExtend() process, the file is generated correctly. If I keep it, the css file is not generated and I don receive any warning on console. I didn't copy it, but I am using an error log rule with gulp-plumber.

Any ideas?
Thanks!

[David Clark]

Hm. Which version of gulp-postcss (and thus which version of PostCSS) are you running?

[David Clark]

I just tried a simplified test with gulp-postcss, this plugin, and postcss-log-warnings, and I had no problems. So it would be great if you could try to isolate the problem more or share more about your setup & files in play (e.g. those css files must be @imported?)

[David Clark]

I'm thinking that this is a problem with postcss-nested, not this plugin. See: postcss/postcss-nested#11

Notice that if you remove this plugin from the list, in your generated CSS the @extend rule is at the root level instead of inside the body ruleset. So I believe postcss-nested is extracting the at-rule and then postcss-simple-extend thinks it's an illegal extension.

Until that postcss-nested issue is fixed I think you can get around this by placing this plugin before postcss-nested in your list of processors.

Please let me know if that doesn't work for you.

[Xaviju]

Currently running
"postcss": "^4.1.4"
"postcss-simple-extend": "^0.3.0"

I'll try to isolate the problem and test it again with your ideas.
Thanks for the hint, I'll let you know if I can make it work :)

[Xaviju]

Ok, found out what was happening!

1. I defined a set of placeholders for different font sizes: xsmall, small, medium, large, xlarge.
2. Then I started to develop but only used one of the defined placeholders ('medium'), the others were just for future development.
3. Launched gulp, but the task was not completed. Only when removing this plugin, everything worked correctly.
4. Reactivated the plugin. I removed all the unused placeholders (except 'medium') everything worked fine.
5. If I add a second placeholder but I don't extend it it throws an error.
6. If I add a second placholder but I use it, it works fine.

So as long as the defined placeholders are being used in the code it works ok, but if I define a placeholder and its not used it throws an error and the task does not gets completed.
There is no error message to find out what is happening.

Can you test it with this new information?

[David Clark]

Did you see the comment above #1 (comment) ? Does any of this happen if you do not use postcss-nested, or use it after postcss-simple-extend?

I will also look a little bit into this weirdness about unused placeholders maybe causing errors, and errors not being logged.

[David Clark]

Please update to the version I just pushed (v0.3.1) and try your stuff again. I changed some code to try to ensure that unused definitions and erroneous extensions were removed from the generated CSS instead of staying in there.

[Xaviju]

It works!! Thanks for the fast answer and fix, that was great!
Sure, before posting I tested isolating postcss-simple-extend (removing the rest of the plugins), or changing the plugin execution order in many ways to find out what was causing the error. But finally it was related to the unused placeholders in my css.

Thanks this plugin! 😄