Add test to reproduce warnings

[emmenko]

If I run this, I get warnings

$ npm test

> postcss-custom-selectors@2.1.0 test /Users/emmenko/dev/src/postcss-custom-selectors
> tape test

TAP version 13
# @custom-selector
ok 1 should transform heading
ok 2 should transform pseudo
ok 3 should transform multiline
ok 4 should transform some hyphen
ok 5 should transform matches selector
Warning: The selector ':--foo-bar' is undefined in CSS!
Warning: The selector ':--foo-baz' is undefined in CSS!
Warning: The selector ':--foo-bar-baz' is undefined in CSS!
Warning: The selector ':--foo-bar-baz' is undefined in CSS!
ok 6 should transform matches selector
ok 7 should transform local extensions

1..7
# tests 7
# pass  7

# ok

This is because of the way the selector is matched

rule.selector.indexOf(prop)

So if I have following selectors

@custom-selector :--foo .foo;
@custom-selector :--foo-bar .foo .bar;
@custom-selector :--foo-bar-baz .foo .bar .baz;

those are the matching results

> ':--foo'.indexOf(':--foo')
0 // <---- ok
> ':--foo'.indexOf(':--foo-bar')
-1 // <---- ok
> ':--foo'.indexOf(':--foo-bar-baz')
-1 // <---- ok
> ':--foo-bar'.indexOf(':--foo')
0 // <---- WRONG
> ':--foo-bar'.indexOf(':--foo-bar')
0 // <---- ok
> ':--foo-bar'.indexOf(':--foo-bar-baz')
-1 // <---- ok
> ':--foo-bar-baz'.indexOf(':--foo')
0 // <---- WRONG
> ':--foo-bar-baz'.indexOf(':--foo-bar')
0 // <---- WRONG
> ':--foo-bar-baz'.indexOf(':--foo-bar-baz')
0 // <---- ok

---

How is this suppose to work? Should I use camelcase selectors instead (e.g.: foo, fooBar, fooBarBaz)? Or the matching should be fixed?

Thanks

[yisibl]

Thank you very much.

[MoOx]

@yisibl I don't think this PR was made to be merged as is. Maybe we should do something to fix the matching ?

[emmenko]

Yes, fix first then merge :)

so what's your opinion on this?

[MoOx]

Looks like a bug that should be fixed.

[emmenko]

@MoOx ok, so what's the plan here? Do you guys look into it?

[MoOx]

@yisibl is the maintainer of this plugin, but if he is busy I can't take a look at it.

[emmenko]

Cool, thanks!

[yisibl]

I will fixed it.

[MoOx]

👍

[yisibl]

Fixed: c19ff8f

[emmenko]

Cool! 👍

Will this be released soon? - no pressure, just to get an idea when :)

[yisibl]

@emmenko Has been released.

[emmenko]

👍

[emmenko]

@yisibl @MoOx sorry to bother again, but I'm a bit confused now.
I see here that a warning is still generated.

So maybe let me do a step back and ask you something.
If I have those 2 selectors

@custom-selector :--foo h1;
@custom-selector :--foo-bar-baz h4 h5 h6;

:--foo { color: red; }
:--foo-bar-baz { color: blue; }

There is a warning saying 'The selector \':--foo-bar-baz\' is undefined'.

Why is that? Is it actually wrong to have those kind of selectors? The output is actually ok at the end...

[MoOx]

I guess it's another bug. I tried to fix it but it seems I didn't change enough code :/

[emmenko]

Hmm, well the test is lying then
https://github.com/postcss/postcss-custom-selectors/blob/master/test/index.js#L41

It should be ... === 0, or ?

[MoOx]

or what ?
If you feel that you can fix the bug, please make a PR 👍

[emmenko]

I'm just saying, what should be the correct behaviour? Is this the correct way to define selectors or is the warning incorrect?

I can make a PR, but I want to know first what should be the expected result...

[MoOx]

The warning does not make sense in this case, especially if, as you said, the output is "as expected".

[emmenko]

Ok, I will make a PR

[emmenko]

@MoOx btw, can you tell me what's wrong here? Is it related to this "bug"?

[MoOx]

I have to admit that I didn't write this plugin, so I have no idea what is the fuck here :/

[emmenko]

Ok. I will try to reproduce / fix it in the PR.

[MoOx]

awesome, thanks !