postcss-nested-props breaks upon encountering :global or :local pseudo-selectors

[Jessidhia]

Note that I've encountered this in combination with sugarss, which encourages the use of this transform. css-modules uses the :global and :local pseudo-selectors to selectively disable/enable css-modules with the selectors nested within.

The following sugarss:

:global .selector
  prop: value
  another-prop: another-value

Gets transformed into the following CSS:

:global .selector {
  prop: value;
  another-prop: another-value
}

The previous CSS, after running by postcss-nested-props, is transformed into the following invalid CSS, even though no nested props are present:

: global .selector;
-prop: value;
-another-prop: another-value

It seems to understand :global as being a nesting of "empty string" with the "global .selector" property name, which... makes very little sense.

Is this intended to support a corner case where the caller specifies a prop value and nested props with the same prop declaration, without any whitespace? Perhaps it would be better to require whitespace before such a construct, specifically to prevent the syntactic ambiguity with pseudo-selectors and pseudo-elements. A regexp whitelist will always be a moving target, and will mysteriously cause breakages every time a new one is used.

[jednano]

@Kovensky, I've added a commit to #8 that should be published in a week or two, whenever TypeScript 2.0.1 is officially released (should be soon). I'll be unavailable this weekend, however, as I'll be flying to China during that time.

[TamsynUlthara]

Any chance this fix can get published? I'd like to use this plugin, but I'm using CSS Modules.

[jednano]

Gotta' wait a few more days for postcss/postcss#950. Sorry for the long wait. I lost track of this one somehow.

[TamsynUlthara]

No worries. Thanks!

[jednano]

@tomxtobin can you give v1.1.5 a try?

[TamsynUlthara]

Finally got a chance to test it out. It's still not working, unfortunately.

I'm getting invalid CSS that's a little different than before: : global(.some-class-name).

Instead, the final CSS output should be .some-class-name.

[jednano]

Do these two tests not represent the issue you have having? If not, can you write a failing test for me in the form of a PR?

[TamsynUlthara]

It needs to preserve all of these possible forms, in these contexts:

.zeroOrMoreSelectors :global .oneOrMoreSelectors
.zeroOrMoreSelectors :local .oneOrMoreSelectors
.zeroOrMoreSelectors :global(.oneOrMoreSelectors) .zeroOrMoreSelectors
.zeroOrMoreSelectors :local(.oneOrMoreSelectors) .zeroOrMoreSelectors

But sure, I can write a PR when I have a chance.

[jednano]

Excellent, please do. I think it would add clarity to the exact scenarios in question. Also, if/when you do write the failing tests, try to keep it as simple as possible with foo, bar, baz and the like.

[jednano]

@tomxtobin I've updated the dependencies, gutted gulp, introduced ava. It should be a bit easier for you to write tests now.

[jednano]

@Kovensky, I've written a test, but it passes, so I can't reproduce your issue. Here's my test:

test('preserves :global selector rule', scenario(
	`:global .a{b:c;d:e;}`,
	`:global .a{b:c;d:e;}`
));

Closing until I can get a breaking test. Otherwise, it might just be the order in which you're loading your PostCSS plugins.