Add postcss-message to show postcss 4.1 message output ?

[MoOx]

Related to #64

What do you think about that as an option?

https://github.com/postcss/postcss-messages

[magsout]

:+1:

[MoOx]

I will go for a custom skin by default with the logo/color of cssnext. Do you think it's a good idea ?

[magsout]

I think yes. We will see that the error is raised by cssnext

[MoOx]

Also for cli https://github.com/davidtheclark/postcss-log-warnings

[MoOx]

How does it look ?

[magsout]

Woooot awesome.

[awayken]

Is cssnext actually parsing your error and suggesting an accurate fix for it? That's pretty cool.

Related to the error formatting: is it possible to use whitespace to better indicate the problem line and the corrected line?

Something like:

> cssnext:custom-selectors:missing-colon-fix: <css input>:1:30: Incorrect syntax for @custom-selector.

@custom-selector --h h1, h2;

Should be:

@custom-selector :--h h1, h2;

I also see the "Please adjust this..." sentence as maybe being unnecessary.

Anyway, those are just my 2¢ as a relative outsider who apparently has an opinion on this.

[MoOx]

My question was more for the design that the content itself.

That said, i will probably adjust messages with some newlines, that's a good idea.

For the record some plugin currently use console.log to talk to users (eg. postcss-custom-properties might warns you if you try to use an undefined var). Since it's not really users friendly (especially when you are using postcss in a verbose env like webpack) you might miss those log. That's why I asked this API for postcss.

This way we will be able to properly emit warnings in the appropriate way depending in the env (webpack, gulp, cli...) + in the css itself using the famous hack ::before/content.

[awayken]

That said, I really like the design. I know the blue complements the logo, but it has the side effect of being calming even in the midst of the potential frustrations of learning these new specs. Bonus!

[MoOx]

I think I will replace the logo by another icon: { ! }

[MoOx]

Is this any better ?

[MoOx]

Or with more space ?

[awayken]

I like them both. What's nice about the additional space is that it makes it easier to pick out individual issues if you miss the > cssnext:.

[MoOx]

Or with the icon in the top left corner

[awayken]

I like that better.

[MoOx]

I will go for a simpler icon

Which one ?

[madx]

I vote for the second one: being filled makes it more visible, and it keeps the shape of the {!} logo

[bloodyowl]

first one IMO

[madx]

The downside being that it looks like and information instead of a warning/error :/

[MoOx]

Note that we might have here info/debug message in the future.

[kud]

I prefer the third one, but the second one is quite ok and mostly efficient. So the 2nd one. The first one is "an error", not a notice.

[awayken]

I like the third one best. Second favorite is the second one.

[awayken]

Updated the project I'm using cssnext on to see how this works in practice, and I love this feature so much.

[MoOx]

Glad you enjoy it.