nDmitry / grunt-postcss

Apply several post-processors to your CSS using PostCSS.
MIT License
419 stars 57 forks source link

Dont run one postcss instance parallel #122

Open tholewebgods opened 5 years ago

tholewebgods commented 5 years ago

When configuring multiple files for processing (depending on the plugin) the resulting files might be garbage since they share the same processor instance and do not wait until the processing finished.

Example config when using the processor postcss-preset-env:

files: [{
    src: "input/foo.css",
    dest: "target/foo.css"
},
{
    src: "input/bar.css",
    dest: "target/bar.css"
}]

input/foo.css

:root {
    --foo: #333;
}

.moo {
    color: var(--foo);
}

input/bar.css

:root {
    --foo: #666;
}

target/foo.css

:root {
    --foo: #333;
}

.moo {
    color: #666;
    color: var(--foo);
}

Note the "fallback" "color" style is "#666", originated from the bar.css file.

This is probably due to the fact that an internal variables dictionary changed due to the second file while processing the first was not complete yet.

The current implementation calls process() in a loop while not waiting for their returned promise to fullfill.

The new implementation uses a reducer to chain the promises together.

A warning was added too to inform the developers if they've configured multiple source files with one destination (in place editing), which is not sensible.

tholewebgods commented 5 years ago

Note: removed regression test case from the original bugfix commit since it's failing in Node 4 due to missing features and it might not be reliable anyway. See commit ec4087d4818f98b7fb47d95c36c9637fccc5b1da (from fix/dont-run-one-postcss-parallel-with-basic-tests) and its commit message.