Lightning design system CSS classes autocomplete

[Matej Pinter]

Hello,

with new lightning design system, we also got new CSS with long class names which are pretty annoying to type. Now I know (and I have tested) that IDEA have CSS class auto-complete function in normal web projects, but in salesforce project with this plugin this function doesn't work at all. Is there some settings we have to manually set to have this functionality or plugin doesn't allow this to work? This would be great to have since new class names can get pretty long to type.

[Scott Wells]

Hi, Majej. Yes, I'm going to try to address this in 1.7 as part of full lightning support. If I find a way to auto-import the Lightning Design System CSS/JS files before then, I'll see if I can get that part out earlier. Thanks for the report!

[Matej Pinter]

Please keep in mind, that lightning design is constantly updating so if it is possible make it dynamic so we don't need to wait on plugin update.

[Scott Wells]

Good point. I definitely don't want to own the constant updates for that! I'll try to make it something that can be configured with defaults for the current version. I'll probably have my head wrapped around it more when I get to that task.

[Matej Pinter]

If it helps, stylesheet is included with this statement in head of the page: <apex:stylesheet value="{!URLFOR($Resource.SLDS0101, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> Maybe we could have some setting in plugin settings to point to some offline copy of that CSS file just for reference.

This might be hard nut to crack. Well if it helps I have also found that cloud9 now also have salesforce support and I have gave it a go today and it has this feature for CSS. For now, IDEA is much better to write apex code and cloud9 for pages. :)

[Scott Wells]

Yeah, that's actually more in line with the way that IntelliJ IDEA works where you can correlate an included files (XSD, CSS, etc.) with their definitions either in the file system or retrieved from a remote server. That's the way I'd consider going with it.

[Scott Wells]

This is delivered for Community Edition in 1.7.1.4. I'm going to make sure that it works for Ultimate Edition as well (in conjunction with UE's own completion for JS/CSS) and will then resolve this.

[Matej Pinter]

I don't know, if this is connected to this plugin, but I noticed that in 2016.1 version of IDEA autocomplete for jquery selectors stopped working, while it is still working in 2015.0.x version(s). The rest of javascript libraries autocomplete (functions, variables,...) is working after importing correct library into IDEA. This feature is a great help for me, as I use jquery to reference items in html. Scott, can you please check about this as I can't get any result / information from IDEA forum / bug tracker. Thanks

[Scott Wells]

As of 1.7.1.5, this should be available in Community Edition and Ultimate Edition as long as you're actually using ltng:require to include the SLDS CSS.

[Scott Wells]

Matej, I'll take a look, but I'm not aware of anything I've done that would cause the behavior you're describing. You might disable the IC plugin and see if the problem still exists or not. If it does, it's mine to fix; if it doesn't, it's an issue with IntelliJ 2016.

[Matej Pinter]

I don't know if I can test this properly. If I disable plugin, then all .page files goes into "blank" state so no html or javascript is detected (whole code is in one single gray color). Problem is with file association and .page files are not detected as files containing html and javascript. Now I could change file file type in preferences, but the last time I did changing references in settings, whole projects went wrong and I had to make hard reinstall of IDEA, meaning whole uninstall including all my settings.

But I did one more test that could tell you maybe something: I created normal html file and pasted inside some html and javascript with jquery. When I tried edit it, everything worked as it should - all javascript, html, css and jquery selector autocomplete. Of course I made this file in some other offline project, but looks like functionality for jquery selectors is still in IDEA and working. Also there would probably be some bugs reported if IDEA would stop working with jquery, but I can't find any. I'm not directly blaming your plugin or saying it is your fault, but there could be some internal change inside IDEA from 2015 to 2016 and plugin is maybe not initialising everything correctly? Or to be more specific: is there any easy quick way for you to check about this? You doesn't need to put it on highest priority, take few days I can still use 2015 version meanwhile, but in some near future I would like to go to 2016 and this jquery autocompletion is helping me in bigger projects a lot. :)

[Scott Wells]

Actually that is quite helpful. Knowing that it works in standard HTML indicates that I'm doing something that's keeping it from working in Visualforce/Lightning. Let me do a little investigation and I'll let you know what I find. Thanks for the quick update!

[Scott Wells]

One more thing...can you give me an example of what you're trying to complete that works properly in 15 but not 16? I want to be specific when trying to reproduce.

[Matej Pinter]

for example take this html code:

                                              <div class="slds-form-element">
                                                <label class="slds-form-element__label" for="collegueSearch1">Search for collegues:</label>
                                                <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right" id="searchReset">
                                                    <svg aria-hidden="true" class="slds-input__icon">
                                                        <use xlink:href="{!URLFOR($Resource.SLDS0121,'assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
                                                    </svg>
                                                    <input id="collegueSearch" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Start typing here..."/>
                                                </div>
                                            </div>

Then later in javascript code you can reference a DOM with jquery by ID, class, or atribute,... For example to reference input DOM by it's ID you would write: $("#collegueSearch") and after that method or property. For example to get value of input: $("#collegueSearch").val() In 2015 when I write $("#c I get autocomplete to give me all DOM elements that id starts with c. In 2016 I can write $("#c and I get red popup with "no suggestions".

As we get more and more into javascript on salesforce projects I really appreciate all the help I can get from IDE. It is not so easy searching for all names in 5000+ lines of code :)