Please add support for Embedded Ruby (.html.erb)

[viktorija]

[Vuneu]

This doesn't seem to work for me on a Rails project.

A vanilla HTML project works just fine, but I don't get any suggestions when I'm on a Rails one.

OS: Ubuntu 16.04 (elementaryOS Loki)
VSCode Version: 1.15.0
Intellisense for CSS Version: 1.8.0
Ruby Extension Version: 0.14.0

Should I file a separate issue?

[zignd]

@Vuneu do you have this extension installed? https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby

It's a requirement as stated in the README.md, because it adds Embedded Ruby language support to Visual Studio Code. Once you do so my extension will properly provide the suggestions for you.

Let me know if it's something else.

[Vuneu]

Yeah, I have that installed that's what I meant by "Ruby Extension Version: 0.14.0", sorry for not being more explicit.

[zignd]

That's weird, I just tried it with a clone of the Discourse repository and it worked. I opened this file discourse/app/views/about/index.html.erb, defined a div and once I reached the <div class=" the suggestions popped up displaying CSS classes defined in CSS files in this project. Could it be that you don't the classes defined in CSS files?

[Vuneu]

I cloned the repository and you're right, some suggestions do show up, but I noticed classes defined in .scss files are omitted. I guess that means sass is not supported?

Anyways, even if sass is not supported I'm not defining my classes on .scss files, I'm using plain CSS.

I created a brand new Rails project and copied over my CSS file, and no relevant suggestions are showing up. You can check the project here.

[zignd]

Just figured out the problem, the CSS abstract syntax tree parser I'm using in the extension is not very flexible and failed to understand your cssTest/app/assets/stylesheets/application.css. The point in it that invalidates it to the parser is in this section:

.nested-fields {
  display: block;
  width: 100%;
    /*justify-content: space-between;*/;
}

As you can see there's a semicolon ; after the commented out rule. Removing it and click the lighting button to recache the classes will successfully parse this file.

You can debug those issues by opening the VS Code Developer Tools and checking the log messages outputted by the extension. Here's an example of the one pointing that there was something wrong with the file mentioned above:

[Extension Host] Summary:
[Extension Host] 4 parseable documents found
[Extension Host] 24 CSS class definitions found
[Extension Host] 2 unique CSS class definitions found
[Extension Host] 1 failed attempts to parse. List of the documents:
[Extension Host] /home/zignd/Documents/Git/cssTest/app/assets/stylesheets/application.css

Sorry for any inconvenience. And about the Sass support, it's currently not supported, and unfortunately, I don't really have time to work on it right now, but there's an issue opened requesting it and contributions are welcomed.

[Vuneu]

Thanks for your quick responses, and for pointing out the Developer Tools.

I noticed the Console messages don't mention an specific line to check for the point where the parser breaks. Would I have to check manually through my code, or is there a better way?

I tried running my CSS file through some CSS validators/linters but none of them mentioned the misplaced semicolon.

[zignd]

No problem. :)

Yup, at the time I decided to add them I did not think about it as something the users should rely on because VS Code already lints CSS files. And because if I were to show that kind of information, it would be better somewhere else with better visibility, like the "Problems" or "Output" views.

I tried to do the same, and none caught the error, just like you did. It might be a bug, I just checked the package repo on GitHub, it's abandoned, and there's an issue in which a user is recommending an alternative with considerably more stars.

I opened an issue #74 here so I can keep track and remember to replace the package once I have some free time.