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 csslint@1.0.4 through linter-csslint@2.0.0.

[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.