Custom property names in LessCSS

Question

I'm trying to implement a custom CSS property in my TinyMCE editor stylesheet for an EPiServer CMS project.

According to the EPiServer SDK, in order for me to add a custom style to the TinyMCE Styles dropdown, I need to use the EditMenuName property within the style class I'm planning to use.

Something like this:

.h1 {
    font-size: 2.5em;
    EditMenuName: Heading 1;
}

Adding the EditMenuName as a property name to my Less file generates a compile error.

Is this even possible at all?

Answer 1

Update: This issue will be resolved in the release of LESS 1.4.2

Your Issue is the Capital Letters

Since there seems to be no consensus to close this as a duplicate of this question, I'll give a similar answer here.

LESS (whether by intentional design, unintentional lack in a feature, or simply a bug, I do not know) currently (as of this posting) does not allow capital letters in property names. This is true even of standard properties, such that Color: will not work. So your...

EditMenuName: Heading 1; 

...would need to be some variation of these two...

editmenuname: Heading 1; 
edit-menu-name: Heading 1;

...none of which are likely to interface with your TinyMCE. To quote myself in that other answer:

I have not for certain isolated where in the actual LESS code itself this might be fixed (if it can be fixed for the way LESS handles the property rules). I suspect the cause is in the parser.js file lines 1578-1584 (as of this writing), which are:

property: function () {
  var name;

  if (name = $(/^(\*?-?[_a-z0-9-]+)\s*:/)) {
    return name[1];
  }
}

This seems to be filtering out allowing for capital letters. I don't know what the consequences would be if that regular expression was changed to allow for them.

So your only chances of making it interface as you want are either:

1. Fix LESS to allow capital letters (perhaps by tweaking the above code).
2. See if TinyMCE can have the property value changed to not have CamelCasing for the property name.