22

In a Lightning Component, I have the following markup which I have to comment in and out for testing purpose

<force:inputField value="{!v.account.Name}" class="form-control uiInput--input input" />

now when I try to comment it out like this

<!--<force:inputField value="{!v.account.Name}" class="form-control uiInput--input input" />-->

the API tells me

markup://c:elfL1:6,81: ParseError at [row,col]:[7,81] Message: The string "--" is not permitted within comments.

Since I didn't figure out that fancy class name uiInput--input (Salesforce did so...) it would be nice to be able to toggle that om/off OR avoid to use class names like this...

  • 2
    Thank you for making us aware of this issue. We are escalating this internally to see what resolution we can come to. Cheers! (And I heard you met my husband, Greg today. :)) – Stephanie Rewis Mar 17 '16 at 0:51
  • I feel your pain! – Doug Ayers Nov 14 '16 at 22:18
  • @DougAyers there seems to be no viable workaround for this as far as I know. – Uwe Heim Nov 17 '16 at 19:00
  • @StephanieRewis - Why did you delete your answer as it seems like a good interim fix...Can i undelete it? – Eric Nov 20 '16 at 23:44
  • Hi @Eric I'm clearly not very good with notifications here. So sorry. I deleted my answer because it was what we WERE going to provide. Then there was some overriding of that, reversing, and the choice was to change the BEM syntax instead of providing a non-standard workaround for comments. That said, I don't believe the ignore directive ever got removed from Aura, so if anyone is working with the old syntax, it would likely work to use as a comment. But this is so old now, it may no longer matter? :) Your call on undelete... – Stephanie Rewis Feb 8 at 1:48
12

The use of double dashes/hyphens inside comments is invalid in HTML, XML, and XHTML:

The Importance of Correct HTML Commenting

Lightning Component markup is XML, and the generated markup on the client is HTML. The Lightning markup might generate something such as:

<!-- <input class="my-invalid--class-name" value="Foo"/> -->

I do not know where the -- trend in style classes comes from, but clearly they weren't thinking about this clearly!

  • Thanks Skip, now I see the backgrounds. Any chance to get all the -- out of the framework again soon or should we prepare ourselves to live with them for a longer time? – Uwe Heim Oct 24 '15 at 21:40
  • Now looking at SLDS, it seems full of --, e. g. slds-p-bottom--small, slds-p-top--large, slds-table--bordered, slds-max-medium-table--stacked-horizontal, etc. - Not being able to toggle markup containing it on/off without pain feels like a big burden. It would be great to know, if we need to figure workarounds on our own, or if Salesforce has this on the roadmap. – Uwe Heim Oct 26 '15 at 9:12
  • yes, having difficulties adding comment.Not able to save for comment like : <!-- <table class="slds-table slds-table--bordered"> --> it prompt an error not permitted -- – unidha Nov 24 '15 at 6:40
  • @Skipsauls Salesforce Lightning Design System is completely based on BEM syntax (-- hyphens) lightningdesignsystem.com/…. Does your answer mean the Lightning Components will not support it in near feature? And we need to replicate SLDS classes with double hyphens with our own? – steals Nov 30 '15 at 12:53
  • 1
    @SkipSauls - there is not really a viable workaround. This is unfortunately an ongoing pain. – Uwe Heim Dec 2 '15 at 1:37
6

I don't think it would be anyone's ideal workaround, but if you really need SLDS class names in your lightning component, and you really need to comment out the tag where the class is being used, this works.

Replace at least one of the hyphens in the double hyphen grouping with either the Unicode or ASCII character codes (Unicode: &#x002d; ASCII: &#45;)

Example:

<!-- <input class="slds-button slds-button-&#45;neutral" value="Foo"/> -->

<input class="slds-button slds-button-&#45;neutral" value="Foo"/>

When uncommented, the character code is correctly parsed, and the class will be applied correctly.

Not pretty, but again, if you really need this capability, this will unblock you.

4

Seems that the latest version of the Lightning Design System no longer uses the -- variant (in most places).

Most if not all of the selectors that used -- have been replaced by _

See the updated grid documentation as an example

  • 1
    There's still a few of them left, like slds-p-horizontal--small though. It'll probably be fully realized over the next few months. – sfdcfox May 19 '17 at 21:47
2

First I changed the markup to

<force:inputField value="{!v.account.Name}" class="form-control elfUiInput" />

which is toggelable...

then in the controller I tried this

init : function(component, event, helper) {
        console.log('elfL1.init()');
        var action2 = component.get("c.getAccount");        
        action2.setCallback(this, function(response) {
            console.log(response.getReturnValue());
            component.set("v.account", response.getReturnValue());
            $('select.elfForceEditable').removeAttr('disabled');
            $('.elfUiInput').addClass('input');
            $('.elfUiInput').addClass("uiInput--input");
        $A.enqueueAction(action2);
}, 

which surprisingly does not work. First I blamed jQuery - but it's something else because this does work:

init : function(component, event, helper) {
        console.log('elfL1.init()');
        var action2 = component.get("c.getAccount");        
        action2.setCallback(this, function(response) {
            console.log(response.getReturnValue());
            component.set("v.account", response.getReturnValue());
            $('select.elfForceEditable').removeAttr('disabled');
            $('.elfUiInput').addClass('input');
            // $('.elfUiInput').addClass("uiInput--input");
            window.setTimeout( function(){ $('.elfUiInput').addClass("uiInput--input"); },200 )
        });
        $A.enqueueAction(action2);
}, 

so I need a workaround for the workaround of the workaround... :-(

  • I think the easiest workaround is replicating(copying) uiInput--input SLDS class with your own. And use it instead of SLDS class. – steals Nov 30 '15 at 12:56
-1

Not allowed because "--" IS already somewhere in your code

For Example

<a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">

Replace with (remove link--reset replace linkreset)

<!--<a href="javascript:void(0);" class="slds-th__action slds-text-linkreset">-->

Thanks

  • This is not a correct solution. The current version of this Lightning Design System class is slds-text-link_reset. Lightning now uses _, as discussed in other answers. – David Reed Apr 1 '18 at 15:21
  • @DavidReed, Yes you are right. BTW i was using that comment for visualforce page not for lightning component. We are only commenting out. Thanks, – Navin Dayama Apr 19 '18 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.