Fix CSS pseudo-elements not recognized issue

[donho]

Update CSS keywords and add new styles.

Fix #10425

[ArkadiuszMichalski]

@donho
IDENTIFIER2, IDENTIFIER3, EXTENDED_IDENTIFIER, EXTENDED_PSEUDOCLASS, EXTENDED_PSEUDOELEMENT will not work without coresponding list for them: LIST_2, LIST_3, LIST_5, LIST_6,, LIST_7 setting by setLexer() as above.
https://github.com/notepad-plus-plus/notepad-plus-plus/blob/master/scintilla/lexers/LexCSS.cxx#L75

Could be listed all of them in this fix, then in future it will be easier to add something in the langs.model.xml itself, without asking you to add some missing list again in ScintillaEditView.h.

[donho]

For CSS2 & CSS3 (IDENTIFIER2 & IDENTIFIER3 respectively) are in current existing list, so I don't think we will add (separate) them in the future. Anyway, I will comment all not used keyword lists for the eventual future added.
Thank you for your review.

[ArkadiuszMichalski]

@donho
What about with this old notation : for pseudoelement? Should be recognized as pseudoclass because after before first-letter first-line are still listed in pseudoclasses (instre2)? Also selection was listed, but these can be removed.

[donho]

@ArkadiuszMichalski
I removed after from instre2 (by keeping after in type3), here's the result:

[ArkadiuszMichalski]

And it's correct, because :after is a pseudo-element (in old notation) and shouldn't use the pseudo-class colors, now it just has a color from UNKNOWN_PSEUDOCLASS. New notation ::after use PSEUDOELEMENT style.

Like I wrote here #10425 (comment), there is a trick to handle :after with the same colors as ::after, without changing the lexer. An additional list EXTENDED_PSEUDOCLASS (LIST_6) can be used.

setLexer(SCLEX_CSS, L_CSS, LIST_0 | LIST_1 | LIST_4 | LIST_6);

<Keywords name="type5">after before first-letter first-line</Keywords>

<WordsStyle name="PSEUDOELEMENT" styleID="18" fgColor="FF8000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
<WordsStyle name="EXTENDED_PSEUDOCLASS" styleID="20" fgColor="FF8000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />

Now bot :after and ::after will use same style. Unfortunately, the style configurator will show EXTENDED_PSEUDOCLASS, which can be confusing for others (because it will cover these 4 pseudoelement cases and not everyone has to know about it).

[donho]

You have mentioned in #10425 (comment) :

@donho
:after is also pseudoelement (notation with : comes from old specs). In new specs only :: should be used for pseudoelement (browsers still support old notation for compatibility reasons).

So I suppose :after should be recognized. Now my question is: if :after (and the other :*) is (are) valid in the most of browsers, should we make it valid as well ?

[ArkadiuszMichalski]

So I suppose :after should be recognized.

It would be most appropriate, but the lexer does not understand it now (it can only consider them as pseudo-classes or use abve trick).

Now my question is: if :after (and the other :*) is (are) valid in the most of browsers, should we make it valid as well?

Yes, for sure these 4 old ones are valid in the browser (here nobody wants to break backwards compatibility), I did not check the rest (because it is possible that all pseudo-elements with ":" are supported in browsers). I'll check it out later.

should we make it valid as well?

It would be most appropriate, then the question is how? Some options:

• recognize them as pseudoclass
• not recognize so treat as UNKNOWN_PSEUDOCLASS
• use EXTENDED_PSEUDOCLASS list for them and use same style as for pseudoelement
• open issue in Lexilla to recognize this old notation

Edit: I checked this and browsers recognize only this 4 pseudoelement with old notation (after before first-letter first-line). All others works only with new notation :: .

I would also add marker to the <Keywords name="type3"> because browsers also support it widely.

[donho]

OK, I'll do the following:

• after before first-letter first-line will added into LIST_6 (EXTENDED_PSEUDOCLASS 20)
• marker will be added into the "type3" Keywords

Which keywords should I remove from PsudoClass besides of after before first-letter first-line ?

[ArkadiuszMichalski]

Which keywords should I remove from PsudoClass besides of after before first-letter first-line ?

also selection

[donho]

BTW, since :after :before :first-letter :first-line are psudo-element, why don't we add them rather into EXTENDED_PSEUDOELEMENT (21) ?

[ArkadiuszMichalski]

PSEUDOELEMENT and EXTENDED_PSEUDOELEMENT (21) and thieir coresponding list recognize only "::" notation, we need ":" so EXTENDED_PSEUDOCLASS may be the solution here (we don't use this list anyway).

You mean this?

<WordsStyle name="EXTENDED_PSEUDOELEMENT" styleID="21" fgColor="FF8000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" keywordClass="type5" />

This will work, can we point to any list using keywordClass attr? If so, it would be better.

Edit: no, it will not work. keywordClass only points to the list to be visible in the Style Configurator. To recognize ":" and stylize it as a pseudo-element it is necessary to use EXTENDED_PSEUDOCLASS (20).

Test:

:active{ /* pseudoclass */
	
}

::after{ /* pseudoelement */

}

::placeholder{ /* pseudoelement */
	
}

:after{ /* pseudoelement */

}

Efect (I changed the colors to make them different):

[ArkadiuszMichalski]

@donho

But we can do this:

<WordsStyle name="LEGACY_PSEUDOELEMENT" styleID="20" fgColor="FF8000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" keywordClass="type5" />  <!-- Original name is EXTENDED_PSEUDOCLASS -->

We can use any name="" so in Style Configurator won't be any confusing. And don't forget to add marker #10501 (comment).

[ArkadiuszMichalski]

Check last comment #10501 (comment).

[ArkadiuszMichalski]

Make analogous correct as in stylers.model.xml.

[ArkadiuszMichalski]

Add marker here.