No color suggestion in .css and .less files

Using PhpStorm EAP 126.339 I'm no more able to have color suggestions (and color preview on the left bar) on css and less files.
I tred with file -> invalidate caches but nothing changes.
What can I do?

Hope it helps to improve next phpstorm release.

13 comments

Hi Diego,


does ther problem concern to colors only - is completion available for other properties? What about error highlighting/inspections - do they work? Is the problem specific to certain css/less files?

Best regards,
Lena

0

concern to colors only, others completions are available (in css, php, js files ecc...), the error inspection work properly, the problem isn't specific to certains files or certains projects...

0

so there's no way to solve it?

0

As I understand you have "rule in single line" sort of format, right? If so -- IDE thinks that your file is compressed and disables some functionality. If you "uncompress" it (each property on separate line) and invalidate caches, it should work just fine (at least such fiels are not affected in my case).

Other than that -- just wait for next build.

0

thanks for the explanations... I'll wait for the next build to solve it cause the previous build was right :)

0

I am not seeing any color previews in the gutter of CSS files either (though they appear in HTML files). I'm using PHPStorm 7.1 (Build 133.326) on Linux. Is this still an issue?

0

Hi there,

Please show a screenshot of such file .. or better -- attach file itself.

Possibly file is considered "minified" where such color icons are not shown indeed.

0

Hi,

I've attached the file - thanks.



Attachment(s):
global.css
0

Well ...

  • If I open your file -- it has no color markers
  • If I copy-paste it into another css file -- it shows them just fine
  • If I then close and re-open that file -- it has no colors markers again


The reason is in line #2 -- it's too long (282 characters) and IDE thinks that this file in minified. If you shorten it (split into 3-4 lines; similar length to lines #3-4, which are about 85-90 characters long). If you then copy-paste that content into new css file it will have keep markers (restarting IDE instead of copy-paste into new file may also work).

In next major version (v8) this "minified file detection" algorithm will be improved (it is done already) so your file should work just fine as is.

"Working" file (everything is the same, just line #2 is splitted into 3 lines):

/* reset browser styles */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.2;
}

ol {
    padding-left: 1.4em;
    list-style: decimal;
}

ul {
    padding-left: 1.4em;
    list-style: square;
}

/* end reset browser styles */

body {
    width: 760px;
    margin: 0 auto;
    background-color: rgb(0, 51, 102);
    color: rgb(255, 255, 255);
}

h1 {
    font-size: 2em;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    border-bottom: dotted 2px rgba(255, 255, 255, .5);
    padding-bottom: 4px;
    margin: 25px 0;
}

p {
    margin-bottom: 25px;
}

0

Thanks for the explanation! I tried splitting the line and restarting the IDE and it worked.

0

I'm still having this problem with PhpStorm 9 after the SCSS watcher is run.



Attachment(s):
style.css
0

this is by design. Generated files (the ones that are created by tools set up as file watchers) have inspections, syntax highlighting and color preview turned off. You can enable them using Hector icon in the lower right corner of the file - just set the 'Highlighting level' to either 'Syntax' or 'Inspections'

0

Please sign in to leave a comment.