Closed intermundos closed 7 years ago
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
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.
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:
Export a function that utilizes Fly:
module.exports = function ()
--> module.exports = function (fly)
Replace this.filter
with fly.plugin
Set the name
for fly.plugin
:
fly.plugin('csscomb' ...
Decide if the plugin should be run for every file. In this case, it should.
fly.plugin('csscomb', {every: true} ...
The
every
option istrue
by default, but I'm declaring it anyway.
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.
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!
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.
@intermundos Maybe this could help a bit? https://guides.github.com/introduction/flow
@jbucaran thanks, will learn this.
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.
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); };