this.filter is not a function

[intermundos]

Good evening all,

I get the following error: TypeError: this.filter is not a function with csscomb and postcss fly plugins.

Could it be due to removal of this in v2?

Thanks for help.

This is my flyfile.

exports.default = function*(fly) { yield fly.parallel(['html', 'styles']); };

exports.styles = function*(fly) { yield fly.source(path.styles.src) .csscomb() .target(path.styles.dist); }

exports.html = function*(fly) { yield fly.source(path.html.src).run({every: true}, function*(files) { includeHtml(files); }).target(path.html.dist); };

[lukeed]

Hi there!

Yes, both these plugins still rely on .filter() which no longer exists in V2.

There is a PR that's been open for a long time now. We're hoping to get some sort of response to take care of that. In the meantime, you can download @hzlmn's branch directly:

$ npm install --save-dev hzlmn/fly-postcss#v2

I've never seen fly-csscomb before. Perhaps you'd like to open a PR on this one? Looks like a simple fix

[intermundos]

Thanks for quick response. I appreciate that.

I would love to make a fix for csscomb plugin, but can you please advise how do I do it, I never did that before.

Also I want to create a plugin for file include using preprocess package and would really appreciate if you can dedicate me 10 minutes of your time and explain the process as well.

Thanks in advance.

[lukeed]

No problem. If you haven't already, check out the plugins guide. I feel like it's a good representation of how to build plugins; but if it's not clear, please let me know how it could be better so others can benefit in the future.

For CSSComb:

1. Export a function that utilizes Fly: module.exports = function () --> module.exports = function (fly)

2. Replace this.filter with fly.plugin

3. Set the name for fly.plugin: fly.plugin('csscomb' ...

4. Decide if the plugin should be run for every file. In this case, it should. fly.plugin('csscomb', {every: true} ...

   The every option is true by default, but I'm declaring it anyway.

5. Attach the existing function as a generator:

   const format = require('path').format;
   const Comb = require('csscomb');
   
   module.exports = function (fly) {
     fly.plugin('csscomb', {every: true}, function * (file, opts) {
       const comb = new Comb(opts);
       const filepath = format(file);
       try {
         return comb.processPath(filepath); // <~ maybe change this
       } catch (err) {
         return fly.emit('plugin_error', {
           plugin: 'fly-csscomb',
           error: err.message
         });
       }
     });
   }

   You'll notice that I had to use path.format here. That's only because the processPath() expects a filepath (and Fly exposes each file as an object).

   But, since Fly attaches a data key to each file object, it might make sense to use something like comb.processString instead, so that CSSComb doesn't have to go read a file when we already have it.

6. It looks like CSSComb returns a string with the formatted text, so we should write this back into each file:

   // return comb.processPath(filepath);
   const data = comb.processPath(filepath);
   // update the file data (good to keep it as a Buffer)
   file.data = new Buffer(data);

---

I broke this down into each & every sub-step, so it seems more daunting than it actually is. But hopefully that makes it clear for you too!

[intermundos]

Thank you for your help!

Sorry for that, but I wanted to ask you for explanation on how to do it from Git perspective. Should I clone fly-ccscomb plugin and then push it, or may be fork it? I have no experience with contributing to github projects. Would be great if you could explain in short the process.

Thanks again. A.

[jorgebucaran]

@intermundos Maybe this could help a bit? https://guides.github.com/introduction/flow

[intermundos]

@jbucaran thanks, will learn this.

[lukeed]

Ah, whoops 😜 The guide @jbucaran shared is a good starting point.

I'm going to go ahead & close this issue since it's not relevant to 2.0, but feel free to continue asking for help.