Use with LESS/SASS?

[brandonreid]

By chance does livingcss work with LESS/SASS css pre-processors? Was hoping to do something like...

gulp.task('less', function () {
  gulp.src(['./less/app.less'])
    .pipe(less({
        plugins: [autoprefix]
    }))
    .pipe(livingcss())
    .pipe(gulp.dest('./patterns'));
});

Or something.

Thanks!

[straker]

Yep! Works in any file and file type that can support jsDoc-like syntax (meaning the /** */ comments)

[brandonreid]

@straker Appreciate it! Any chance you know of a good example of this? Having trouble getting going, trying to start mine with gulp & less.

[brandonreid]

@straker NM, got it! I'll post how I did it here when I get a little further along. Might make a PR with a LESS example.

[brandonreid]

Ok. For future reference, I got things rolling with a gulp file that looked like so:

var gulp = require('gulp');
var livingcss = require('gulp-livingcss');
var less = require('gulp-less');
var LessAutoprefix = require('less-plugin-autoprefix'),
    autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
var LessPluginCleanCSS = require('less-plugin-clean-css'),
    cleanCSSPlugin = new LessPluginCleanCSS({advanced: true});


gulp.task('patterns', function () {
  gulp.src('less/*.less')
    .pipe(livingcss({
      loadcss: false,
      template: './template/template.hbs'
    }))
    .pipe(gulp.dest('pattern_library'))
});

gulp.task('less', function () {
  gulp.src(['./less/app.less'])
    .pipe(less({
      plugins: [autoprefix, cleanCSSPlugin]
    }))
    .pipe(gulp.dest('./css'));
});

I copied the template file from the node_modules/gulp-livingcss/node_modules/livingcss/template, copied it to my root and set livingcss to use it in the options there ^. Now I can compile my less separately, reference it in my own template copy, style my template, etc. 💥

[straker]

Glad you got it working. Why did you need to copy the template into your directory? Was it not loading properly?

[brandonreid]

I wanted to copy the template so I could customize the style of the actual style guide, but it also allowed me to import my compiled styles file manually into the demos. Couldn't figure out how to have livingcss recognize my compiled less styles through the options (if that's possible).

In all it would be helpful to have a demo of options used in the gulp-livingcss version like you show in the node version's readme.

[straker]

I see. There's actually is a way to bring in any stylesheets you need into the demos. It's not an option but actually part of customizing the context object by adding onto the stylesheets property.

So for your less files you'd probably do the following (making use of the utility functions):

gulp.task('patterns', function () {
  gulp.src('less/*.less')
    .pipe(livingcss({
      loadcss: false,
      preprocess: function(context, template, Handlebars) {
        return livingcss.utils.readFileGlobs('./css/*', function(data, file) {
          context.stylesheets.push(file);
        }
     }))
    .pipe(gulp.dest('pattern_library'))
});

I'll make a demo of doing something like this for future reference since it's definitely not clear enough in the docs. Thanks for bringing it to my attention.

[brandonreid]

@straker Ok so was trying to get this working. Getting this err: TypeError: livingcss.readFileGlobs is not a function. I tried to find the function various ways, when I log out livingcss in the function I don't see the readFileGlobs anywhere. Any ideas?

[straker]

You're right. The function is only made available from the node version of livingcss, but not on the gulp version. I'll create an issue on the gulp-livingcss repo to add the utility functions onto the gulp plugin.

[straker]

Alright, latest gulp-livingcss now exposes the utility functions.

[brandonreid]

Wooot! Many thanks @straker

For the record, now that that's all good I was able to import my compiled less styles by compiling the less first into a ./dist/ folder, then (in sequence so the styles existed before livingcss ran) was able to import those styles like so..

gulp.task('library', function () {
  gulp.src('less/*.less')
    .pipe(livingcss({
      loadcss: false,
      preprocess: function(context, template, Handlebars) {
        return livingcss.utils.readFileGlobs('./dist/app.css', function(data, file) {
          _context.stylesheets.push(file);
        });
      }
    }))
    .pipe(gulp.dest('./pattern_library/'))
});

Side note: This is by far the best pattern library generator, I'm off and running. You can see mine as it grows here if looking for reference.

[straker]

Awesome, glad everything worked out for you. I'll add an example of using LESS/SASS as the file sources soon. Thanks for the great compliment.

[brandonreid]

Bah, one last nbd hangup. So that readFileGlobs method will record the path to the styles but doesn't copy the styles file to the final pattern-library (in my case) folder so the reference matches. I just set gulp-less up to send my styles to two folders, one ./dist/ and one ./pattern-library/dist/.

^Had to add that for the future me figuring it out. All set.

[straker]

Ya, copying the files over would destroy any relative file paths to images and whatnot, so I just reference them to preserve that. I'll make sure to point that out as well.

[straker]

I added an example for future reference.