Cssnano: mergeLonghand creates invalid border

[matanarbel-startapp]

I'm using [email protected] (with the latest postcss-merge-longhand fixes), and I'm getting invalid border CSS.
Original:

border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;

After processing:

border-color: #000 transparent currentColor;
border-style: solid solid none;
border-width: 4px 4px none;

The "none" in "border-width" is invalid and Chrome ignores the entire definition (and shows an error).
When I'm manually changing the "none" to 0 it works.

* When disabling mergeLonghand it works - but I don't want to do it.

[andyjansson]

Hi, thanks for reporting. Luckily, this issue is already fixed in master but we've yet to roll it out. This is what 4.0.6 will do to your snippet once released:

border: 4px solid transparent;
border-top-color: #000;
border-bottom: none;

[matanarbel-startapp]

Great, thanks!

[andyjansson]

If you update cssnano to 4.1.0, you should see that it has been fixed.

[matanarbel-startapp]

@andyjansson - I've updated to cssnano to 4.1.0, but I still got the same problem:

border-width: 4px 4px none;

[andyjansson]

Then you haven't upgraded the sub-dependencies.

Here's the output from the playground, which is running the latest version:

border:4px solid transparent;border-bottom:none;border-top-color:#000

I'd suggest you'd check your package.json and lockfile. Additionally, clear your cache. postcss-merge-longhand has been updated to 4.0.5.

[matanarbel-startapp]

You're right, postcss-merge-longhand wasn't updated...
It's working now. Thanks!