Improper message on missing csslint

[mikebronner]

I get this error displayed in the linter tooltip when linting the following CSS:

@import url('./fonts/stylesheet.css');
@import url('https://fonts.googleapis.com/css?family=Raleway');

h1,
h2,
h3,
h4,
h5,
h6,
.widget,
.page-template-template-homepage-php .type-page
{
    font-family: "headings", serif;
}

body,
button,
input,
select,
textarea,
.footer-widgets .widget,
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a,
.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6,
.sph-hero h1,
.storefront-product-categories ul.products li.product .bistro-category-title-description-wrap h2 mark,
.storefront-product-categories ul.products li.product .bistro-category-title-description-wrap h3 mark,
.storefront-product-categories ul.products li.product .bistro-category-title-description-wrap .woocommerce-loop-product__title mark,
.storefront-product-categories ul.products li.product .bistro-category-title-description-wrap .woocommerce-loop-category__title mark,
.page-template-template-homepage-php .type-page h1,
.page-template-template-homepage-php .type-page h2,
.page-template-template-homepage-php .type-page h3,
.page-template-template-homepage-php .type-page h4,
.page-template-template-homepage-php .type-page h5,
.page-template-template-homepage-php .type-page h6
{
    font-family: "Raleway", sans-serif;
}

I checked the developer console, but there were no errors listed there. I ran csslint manually from the command-line on the file and received normal output (no error visible):

csslint: There are 31 problems in /Users/mike/Developer/Sites/mt-redesign/public/app/plugins/theme-customizations/style.css.

style.css
1: warning at line 1, col 1
@import prevents parallel downloads, use <link> instead.
@import url('./fonts/stylesheet.css');

style.css
2: warning at line 2, col 1
@import prevents parallel downloads, use <link> instead.
@import url('https://fonts.googleapis.com/css?family=Raleway');

style.css
3: warning at line 24, col 9
Heading (h1) has already been defined.
.widget h1,

style.css
4: warning at line 24, col 9
Heading (h1) should not be qualified.
.widget h1,

style.css
5: warning at line 25, col 9
Heading (h2) has already been defined.
.widget h2,

style.css
6: warning at line 25, col 9
Heading (h2) should not be qualified.
.widget h2,

style.css
7: warning at line 26, col 9
Heading (h3) should not be qualified.
.widget h3,

style.css
8: warning at line 26, col 9
Heading (h3) has already been defined.
.widget h3,

style.css
9: warning at line 27, col 9
Heading (h4) has already been defined.
.widget h4,

style.css
10: warning at line 27, col 9
Heading (h4) should not be qualified.
.widget h4,

style.css
11: warning at line 28, col 9
Heading (h5) has already been defined.
.widget h5,

style.css
12: warning at line 28, col 9
Heading (h5) should not be qualified.
.widget h5,

style.css
13: warning at line 29, col 9
Heading (h6) should not be qualified.
.widget h6,

style.css
14: warning at line 29, col 9
Heading (h6) has already been defined.
.widget h6,

style.css
15: warning at line 30, col 11
Heading (h1) should not be qualified.
.sph-hero h1,

style.css
16: warning at line 30, col 11
Heading (h1) has already been defined.
.sph-hero h1,

style.css
17: warning at line 31, col 95
Heading (h2) should not be qualified.
.storefront-product-categories ul.products li.product .bistro-category-title-description-wrap h2 mark,

style.css
18: warning at line 32, col 95
Heading (h3) should not be qualified.
.storefront-product-categories ul.products li.product .bistro-category-title-description-wrap h3 mark,

style.css
19: warning at line 35, col 49
Heading (h1) should not be qualified.
.page-template-template-homepage-php .type-page h1,

style.css
20: warning at line 35, col 49
Heading (h1) has already been defined.
.page-template-template-homepage-php .type-page h1,

style.css
21: warning at line 36, col 49
Heading (h2) should not be qualified.
.page-template-template-homepage-php .type-page h2,

style.css
22: warning at line 36, col 49
Heading (h2) has already been defined.
.page-template-template-homepage-php .type-page h2,

style.css
23: warning at line 37, col 49
Heading (h3) should not be qualified.
.page-template-template-homepage-php .type-page h3,

style.css
24: warning at line 37, col 49
Heading (h3) has already been defined.
.page-template-template-homepage-php .type-page h3,

style.css
25: warning at line 38, col 49
Heading (h4) has already been defined.
.page-template-template-homepage-php .type-page h4,

style.css
26: warning at line 38, col 49
Heading (h4) should not be qualified.
.page-template-template-homepage-php .type-page h4,

style.css
27: warning at line 39, col 49
Heading (h5) has already been defined.
.page-template-template-homepage-php .type-page h5,

style.css
28: warning at line 39, col 49
Heading (h5) should not be qualified.
.page-template-template-homepage-php .type-page h5,

style.css
29: warning at line 40, col 49
Heading (h6) should not be qualified.
.page-template-template-homepage-php .type-page h6

style.css
30: warning at line 40, col 49
Heading (h6) has already been defined.
.page-template-template-homepage-php .type-page h6

style.css
31: warning
You have 4 h1s, 3 h2s, 3 h3s, 3 h4s, 3 h5s, 3 h6s defined in this stylesheet.

Any thoughts on what might be going on? Thanks! :)

[Arcanemagus]

Hmmm, I'm unable to replicate as it works fine for me on that file unfortunately. Are you still seeing this?

[basbebe]

+1
I'm also having the same problem.
There always is only one error shown in the linter UI and it it Invalid response received from CSSLint, check your console for more details.
Nothing in the console…

[Arcanemagus]

@bax- Can you share a file that consistently reproduces this?

[basbebe]

Here is an example:

body {
  -webkit-text-size-adjust: none;
  min-width: 100%;
  width: auto !important;
  min-height: 100%;
  height: auto !important;
  font-size: 10px;
  font-size: 15px;
}

nav,
header,
#contact,
article {
  width: auto !important;
  min-width: 100% !important;
}

nav,
#contact,
article {
  /* height: auto !important; */
  /* min-height: 100% !important; */
}

.center {
  /* top: 50%; */
  /* left: 0; */
}

nav {
  /* display: none; */
  /* padding-top: 60px !important; */
  min-width: 100% !important;
  /* width: 100% !important; */
  max-width: 100% !important;
  flex-flow: column;
  justify-content: space-around !important
}

nav .logo {
  /* position: absolute !important; */
  /* margin: 0 !important; */
  /* max-width: 100% !important; */
  /* left: 0 !important; */
  /* top: 5px !important; */
  /* height: 40% !important; */
}

nav.big {
  height: 100px !important;
}

nav>div {
  padding: 0 !important;
  width: auto !important;
  align-self: center !important;
  /* display: flex; */
  /* flex-flow: column wrap; */
  /* align-items: stretch; */
}

nav>div a {
  /* padding: 0 !important; */
  /* align-self: center; */
  /* height: 100%; */
  /* width: 100%; */
  /* display: flex; */
  /* flex-flow: row nowrap; */
  /* align-items: center; */
  /* align-self: center !important; */
}

nav #menu {
  /* width: 30% !important; */
  /* left: 0 !important; */
  /* font-size: 7px; */
}
header {
  text-indent: 30px;
}

header .logo {
  width: 24px;
  margin-left: 10px;
  background-position: left center;
  background-size: cover;
}

header>a:nth-child(2) {
  display: none;
}

The problem is gone when I e.g. delete any of the following lines:

2 -webkit-text-size-adjust: none;
15 width: auto !important;
34 min-width: 100% !important;
36 min-width: 100% !important;
38 justify-content: space-around !important
41-48
49-52
57 align-self: center !important

[Arcanemagus]

Hmmm, what version of csslint are you using? I'm unable to reproduce this with [email protected] through [email protected].

[basbebe]

I'm using linter-csslint 2.0.0 for Atom

[Arcanemagus]

Yes, but that's just a wrapper around csslint, what version of csslint are you using? You can find this by running csslint --version in a CLI.

[basbebe]

I never installed csslint itself – so it must be the one that came with `linter-csslint

[Arcanemagus]

Oh wow, I bet that's the entire problem. It's catching the "failed to find csslint" message and just assuming that it was csslint throwing an invalid point.

Since nobody wanted to take on maintaining this package it was moved from the fork of csslint that was outdated but made it usable, to wrapping csslint on your system in #170.

You are required to install CSSLint on your system to use this now.

[basbebe]

OK – I didn't get that / thought the information said otherwise.
But as I said – without certain lines I'm getting proper linter messages.

[Arcanemagus]

You would have to have some version of CSSLint installed in order to get anything, so either you do have it installed or those aren't coming from linter-csslint (or you are on an older version than v2.0.0).

[basbebe]

I just installed csslint (npm install -g csslint) and added the absolute path to the config.
I'm still getting the same error…

~ ❯❯❯ csslint --version
v1.0.4
~ ❯❯❯ which csslint
/usr/local/bin/csslint

[SmiVan]

I'm having exactly the same problem here.

~$ csslint --version
v1.0.4
~$ which csslint
/usr/local/bin/csslint

The executable path is set to /usr/local/bin/csslint, but I get "Invalid response received from CSSLint, check your console for more details.", despite the console csslint working just fine.

[Arcanemagus]

Can you place a breakpoint here in Atom's developer tools and see what output it is getting back from csslint?

[basbebe]

@Arcanemagus that seems to do the trick…

[delfuego]

I'm seeing the exact same behavior. csslint is installed (same version/output as @bax- and @SmiVan), but same error output.

@Arcanemagus, breaking the main.js where you say, the output looks to legitimately be csslint output; standard filename/messages/etc. output. But copying it out of the devtools and into a text editor, it looks like its truncated — it's 8195 characters long, but truncates in the middle of the JSON. I'm happy to share it with you outside this thread (since it contains filenames and whatnot, and don't want to worry about sanitizing it for public consumption); just let me know how.

[Arcanemagus]

it looks like its truncated — it's 8195 characters long, but truncates in the middle of the JSON.

Ah ha! It sounds like csslint is calling process.exit() directly instead of setting process.exitCode and letting the program terminate normally. This unfortunately causes buffered output to terminate early. You often don't see this in a normal terminal, but it's been an issue in several CLI tools.

Unfortunately there is nothing that can be done about that here, since the bug is on csslint's side. The only way to solve this would be to use the Node.js API, but as csslint still doesn't support the needed options and nobody stepped up to maintain this package and the required fork of csslint, that's not a viable option.

[delfuego]

@Arcanemagus So my guess is that it's here:

https://github.com/CSSLint/csslint/blob/78d218d591387783c8c62579974618b69e1d92bb/src/cli/node.js#L22

yes? More or less, all the calls in csslint to process files are wrapped in a call to this... is it worth filing an issue with the project so it wouldn't be a form, but rather a fix at the source?

[Arcanemagus]

The problem with moving away from process.exit is that often the projects using that are written relying on the "quit (somewhat)immediately" aspect of it, as in it interrupts whatever is going on and exits then. Setting process.exitCode is a passive way of setting the exit code, you then need to simply let the main function finish and the process will then close itself.

You can file an issue there, but development is very slow, when it happens at all. It took almost 1.5 years to get basic JSON output merged there...

[Arcanemagus]

🎉 This issue has been resolved in version 2.0.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[Arcanemagus]

Note, the above PR only fixes the "no error shown even though it says there is an error" bug. The fact that CSSLint is calling process.exit() early and truncating the output isn't something that can be fixed here.