Namespaced selectors and & include the '|' in the result

[nuFaqtz]

Version 2.04 When using namespaced selectors like:

ui|dock {
    &.explorer {
       float: none;
    }
}

the result is:

ui|dock|.explorer {
    float: none;
}

Notice the extra '|' In version 2.02 this worked correctly.

[ai]

You expect ui.explorer|dock.explorer? Do you want to send PR?

[nuFaqtz]

Expect ui|dock.explorer

[ai]

OK. I will look on Friday.

Can you give me some link about | in selectors?

[nuFaqtz]

Thnx, https://developer.mozilla.org/nl/docs/Web/CSS/@namespace

Again, it did work as expected in 2.0.2

[ai]

I added you case to tests and got:

ui|dock.explorer {
  float: none;
}

Maybe |. came from other tools? Can you create some small project to reproduce the error?

Also try to update postcss-selector-parser to latest version.

[nuFaqtz]

Thnx for checking it and I ran the test and indeed the result was as you say. However, I checked my css to see why I created this issue in the first place and found out that the provided test was not complete. The actual css that fails is

ui|dock {
    &.explorer {
        ui|docktab {
            float: none;
        }
    }
}

Notice the nested namespaced item and this will result in:

ui|dockui|.explorer ui|docktab { 
    float: none; 
}

[ai]

Standard environment test:

1. Remove all other CSS tools. Left only PostCSS. One-by-one, to find the source.
2. Remove all PostCSS plugins.
3. Then remove all non-CSS code.
4. If error still reproduces on only PostCSS with one plugin and some really small CSS input — create git project and send link here.

[nuFaqtz]

Just add the following to index.test.js:

it('nested namespaced selectors processed the wrong way, with a copied | character', () => {
    return run(
        'ui|dock { &.explorer { ui|docktab {} } }',
        'ui|dockui|.explorer ui|docktab {}');
});

it('nested namespaced selectors processed the right way', () => {
    return run(
        'ui|dock { &.explorer { ui|docktab {} } }',
        'ui|dockui.explorer ui|docktab {}');
});

The first on validates - while it test against the wrong result (with the |) The second one fails as the correct output is not precessed.

[ai]

Thanks.

I will try to fix it today, so it will pass this test (check that it is correct test):

it('supports namespaced selectors', () => {
    return run(
        'ui|dock { &.explorer { ui|docktab {} } }',
        'ui|dock.explorer ui|docktab {}');
});

[nuFaqtz]

Yep, that's the correct one. Mucho thanks for taking the time. Keep up the good work!

JamBo

[ai]

The problem is inside selector parser. I opened a issue: https://github.com/postcss/postcss-selector-parser/issues/114

[ai]

Issue was fixed in selector parser, but we are waiting for next 3.0 release.

There is blocking issue with Stylelint.

[ai]

Selector parser 3.0 was released and I updated dependency https://github.com/postcss/postcss-nested/commit/d76950cd2673093b0497f4dc8f7a3a34abea3c5e

[ai]

Released in 3.0