CSS class name competion has stopped
Using 2017.2.1 IntelliJ IDEA, typing into an HTML tag's class list, I used to see CSS class name suggestions. For example, I could type "fa-" and see Font Awesome's class names.
But I notice this morning that isn't working -- either at all, or very well. The project includes both Foundation and Font Awesome as wall as my own SCSS development.
Frankly I've always found it magical that the editor helps with this since my HTML files use server site includes for head, foot, etc. Those files in term reference Javascript and CSS files within the project.
Nonetheless, something's changed -- and not for the better.
Please sign in to leave a comment.
What does your HTML file look like? Is it a complete HTML5 document with <!DOCTYPE header, or a partial?
In the first case, only those CSS classes/IDs that are available in project .css files explicitly linked to HTML via <link> tag are available in completion.
For partials, normally completion is available for all selectors defined in project .css files unless the HTML file has a
<link>or<style>tag: in the latter case, only selectors defined in explicitly linked .css files/embedded stylesheet are shown in completionSame problem here! In HTML Files no suggestions for classes which are defined in SCCS Files.
"What does your HTML file look like? Is it a complete HTML5 document with <!DOCTYPE header, or a partial?" Are .scss files indicated as Elena explained?
I'm writing an Angular 4 App. In that case it's a partial html file, which get's SCSS/CSS file through its component.
Everything worked fine in IntelliJ IDEA 2016.3.6 until I installed 2017.2.1. Now it isn't working anymore, neither in 2016 nor in 2017. Sometimes it signals loading suggestions, sometimes it tells me that no seggestions are available.
Could you please provide a sample project where the issue can be reproduced?
I just tried another project where autocompletion still works. What can be the problem that IntelliJ is looking "too long" for suggestions in case of css/scss? There may be an endless loop or something?
IntelliJ should give me an error or at least a warning instead of searching the next three years for css class suggestions.
Unfortunately, we can't say what and why exactly is happening till we have more details and can reproduce the issue.
I understand, it's hard to reproduce the issue. After I'm trying to get a style suggestion IntelliJ logs the following:
2017-08-18 14:50:17,209 [4235830] ERROR - j.psi.css.impl.CssSelectorImpl - IntelliJ IDEA 2017.2.2 Build #IU-172.3757.52
2017-08-18 14:50:17,209 [4235830] ERROR - j.psi.css.impl.CssSelectorImpl - JDK: 1.8.0_152-release
2017-08-18 14:50:17,209 [4235830] ERROR - j.psi.css.impl.CssSelectorImpl - VM: OpenJDK 64-Bit Server VM
2017-08-18 14:50:17,209 [4235830] ERROR - j.psi.css.impl.CssSelectorImpl - Vendor: JetBrains s.r.o
2017-08-18 14:50:17,209 [4235830] ERROR - j.psi.css.impl.CssSelectorImpl - OS: Windows 7
2017-08-18 14:50:17,209 [4235830] ERROR - j.psi.css.impl.CssSelectorImpl - Last Action: CodeCompletion
2017-08-18 14:50:21,908 [4240529] ERROR - j.psi.css.impl.CssSelectorImpl - Cannot create ampersand selector for parent selector '100%' and child selector '&'
java.lang.Throwable
at com.intellij.openapi.diagnostic.Logger.error(Logger.java:132)
at com.intellij.psi.css.impl.CssSelectorImpl.processAmpersandEvaluatedSelectors(CssSelectorImpl.java:140)
at com.intellij.psi.css.impl.CssSelectorImpl.isMatch(CssSelectorImpl.java:160)
at com.intellij.psi.css.resolve.impl.CssResolverImpl.getMatchingSelector(CssResolverImpl.java:928)
at com.intellij.psi.css.resolve.impl.CssResolverImpl.access$000(CssResolverImpl.java:50)
[...]
Ok, I think that IntelliJ crashes in a sub process which parses CSS or SCSS. Instead of skipping over it retries in a loop or something like that. No parsing means no suggestion means no code completion for CSS classes - but it slows down the whole IDE drastically!
After deleting 3rd party css stuff the problem was solved. But I need that library soon.
IntelliJ shouldn't fall asleep even if 3rd party css contains invalid code.
If the problem is caused by a third-party plugin, you should contact its vendor and report the issue.
The problem isn't caused by a third-party IntelliJ plugin but by a simple imported third-party CSS file, which probably contains a typing mistake.
IntelliJ could highlight the syntax error for the developer but it shouldn't slow down itself and disturb the code completion.
Could you please provide a sample project with this problem and this "third-party CSS file"? We can't proceed with the investigation of the issue without this information.
Same issue, Angular 4 project code completion for class name from the css/scss loads really slow, have to wait for a long time. I switched back to 2016 version where it works fine. I am noticing many updates to 2017 version but this issue is not getting fixed. Create a Angular 4/5 project and check how the bootstrap style class names are loading. I wish this issue gets resolved soon.
@Murali Kuppoor
>Same issue
Why do you think it's the same? the original issue is caused by a broken syntax in inported third-party css - see https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000492390/comments/115000458070
What version do you actually use? There was an issue with CSS completion inside HTML files: https://youtrack.jetbrains.com/issue/WEB-30030 It's fixed in 2017.3.1
Please make sure to create new threads to report issues. adding comments to old threads that are hardly related to your problemt just makes these threads not manageable
This issue is in 2017.3.4 version. I think My issue is related to this thread. What do you mean my not related to this issue. I posted this issue in https://youtrack.jetbrains.com/issue/WEB-30030 as per your instruction.
Do you have any evidence that your problem is related to loading CSS file(s) with syntax errors?
Please provide a project that shows up the issue (as, according to you, it happens in any Angular project, this can be any sample Angular app you can reproduce the issue with)
BTW, just added bootstrap to Angular project
and CSS completion in .html templates is instant
Ok I agree with you Mr.Pogorelova, Why the same project, the css class code completion loads faster on Intelli J version 2017.2.6 and not on 2017.3.4
All I need is some help or work around.
No idea - to me, CSS completion is fast in 2017.3.4
Project + CPU snapshots (https://intellij-support.jetbrains.com/hc/en-us/articles/207241235-Reporting-performance-problems) taken when the issue occurs would be helpful
I was able to capture the css code completion slowness issue with screen recording. You can see the code completion time delay between versions 2017.3.4 and 2017.2.6
Sorry, but videos are not helpful here; please provide CPU snapshots
CPU snapshot is a zip file and it's in binary format. How do I attach it.
You need to upload it to some file server (you can use ftp://ftp.intellij.net/.uploads/ as it's mentioned in https://intellij-support.jetbrains.com/hc/en-us/articles/207241235-Reporting-performance-problems) and publish a link/file name
Thank you CPU snapshot file uploaded IU-173.4548.28_muralikuppoor_06.02.2018_13.06.25.zip
Thanks:) The issue is tracked as https://youtrack.jetbrains.com/issue/WEB-30965, please follow it for updates