How to generate one HTML document from some css files in Gulp?

[hisako135]

Here's my styleguide task.

var postcss = require('gulp-postcss');
var styleguide = require('postcss-style-guide');
var postcssimport = require('postcss-import');
gulp.task('styleguide', function () {
  gulp.src(path.css_src + '**/*.css')
    .pipe(postcss([
        precss(),
        postcssimport(),
        styleguide({
              project: 'styleguide',
              dest: './styleguide/index.html'
        })
    ]))
});

styleguide task seems to be working, tho nothing is printed in the generated HTML file.

[11:03:03] Starting 'styleguide'...
[11:03:03] Finished 'styleguide' after 5.85 ms
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!
Successfully created style guide!

Any thoughts on what I might be doing wrong?

[matype]

@hisako135 postcss-style-guide expects only one input to output one html file in PostCSS build flow, so it depends on postcss-import or postcss-partial-import to squash some files. If you are using PreCSS (includes postcss-partial-import, so you need not use postcss-import), you can set one CSS file that includes all @imports.

e.g.

app.css:

@import "module-1.css";
@import "module-2.css";
@import "module-3.css";

gulpfile.js:

// other tasks

gulp.task('styleguide', function () {
  gulp.src(path.css_src + 'app.css')
    .pipe(postcss([
        precss(),
        styleguide({
              project: 'styleguide',
              dest: './styleguide/index.html'
        })
    ]))
});

Thank you for your report :)

[hisako135]

Thank you so much for an in-depth explanation! Feel free to close this issue.

Thanks. keep up the good work :)