find() selector that starts with double hyphen gives "Failed to parse selector" error

[TimTouchtribe]

I've tried to find an element with class --left in it with element.find('a.--left').
This however gives the error Error: Failed to parse selector: a.--left
When I remove the double hyphen in the component and the selector it does work.

[ljharb]

That seems like it’s because you can’t have a class name that starts with a hyphen - iow, it’s actually an invalid selector.

[TimTouchtribe]

Okay, you're right, my bad :)
Although I did come up with a solution: \--left
This however gives me the same error: Error: Failed to parse selector: a.\--left
according to https://jigsaw.w3.org/css-validator/validator this is valid CSS3, so the selector should work right? I did escape it in the find so it looks like this: element.find('a.\\--left')
Any idea why this doesn't work?
Thanks for your help so far :)

[ljharb]

I’m not sure about that validator, but the spec says it’s not valid: http:https://www.w3.org/TR/CSS21/syndata.html#characters

[ljharb]

(That link is for v2.1 but i don’t think it changed in css3)

[aweary]

document.querySelector('.--foo') seems to work in Chrome. I'm not exactly sure if its spec compliant (I'm assuming Chrome is), but we could look into allowing leading hyphens.

As for escaped characters, we're aware its an issue and we do want to support it. See #1218.

[TimTouchtribe]

my apologies for the wrong link, I did not test to see if it works.
Hereby the link to the actual css validator, which proofs that \--left is correct css3.
https://jigsaw.w3.org/css-validator/#validate_by_input

[aweary]

This will be resolved by aweary/rst-selector-parser#11

[tyger]

The reality is that '--' prefix for class names is quite often used for BEM styled naming of modifiers (no namespace notation).

[kamranayub]

@aweary

Alright, I ran into this today but according to this issue and PRs it's fixed. I'm using [email protected] which should be using [email protected].

I'm getting this error when I try the following variations:

wrapper.find(".--active");
wrapper.find(".\\--active");

Neither seem to work, I get the Failed to parse selector error.

[ljharb]

@kamranayub you may need to rm -rf node_modules && npm install to get the update.

[opr]

Using enzyme 3.6.0 I'm getting the Failed to parse selector: div.hero-slide.\--initialised error
This is how I produce the error:

const divsWithInitialised = heroSlider(props).find('div.hero-slide.\\--initialised');

[ljharb]

What version of rst-selector-parser do you have? If it’s the latest, then please file a new issue.

[cmmash]

Guys would the square brackets in a className be valid? Example:
_test-field-secondaryConditions[0].sourceValue

[ljharb]

What does document.querySelector do with those?