Postcss: Custom property sets invalid syntax in 7.0.15

[hudochenkov]

Latest release fixed custom properties, but broke unofficial custom property sets support.

111 tests in stylelint related to custom property sets are broken because of syntax error for constructions like this:

:root { --custom-property-set: {} }

:root {
 --x { color: pink; } ; 
 --y { color: red; };
 }

Also, I believe, postcss-apply is now broken as well. It has more than 400 000 dowloads per week. Though @apply was rejected, and it'll never be a standard syntax.

Technically, PostCSS not doing anything wrong. I'm happy to remove broken tests from stylelint, as it's non-standard syntax.

Just wanted to bring your attention to this situation.

Related stylelint issue: https://github.com/stylelint/stylelint/issues/4067

[ai]

Thanks for the report. I will try to fix it in next few days (it has middle priority because it break unofficial syntax).

@isolovev can I ask you to improve parser to support both cases? (You can put test case into postcss/test; we do not need to add it it postcss-parser-tests some it is unofficial syntax).

[gosolivs]

Of course. I'll fix that bug!

[ai]

@hudochenkov what do you think if we will parse --a: { b: 1 } as --a declaration with { b: 1 } value. It will require to rewrite postcss-apply, but at least --a { b: 1 } syntax will continue to work even with current postcss-apply.

[ai]

The current popularity of postcss-apply happens because it is in cssnext dependencies. I think we have much smaller users number and it is OK to force them to use --a { b: 1} syntax.

Another reason to do it is that cssnext was deprecated as postcss-apply plugin. We need only to parse these cases without throwing an error.

[ai]

Fix: 80c1e21

@hudochenkov if you agree with the plan, I will release it.

[ai]

Seems like postcss-apply can be more popular than I thought. It can be used in Angular.

https://github.com/postcss/postcss/issues/1261

[ai]

@apply was used in Polymer https://polymer-library.polymer-project.org/1.0/docs/devguide/styling

We can’t parse it correctly.

[ai]

I will revert 7.0.15 until 8.0

[hudochenkov]

Thank you for a quick fix!

It's a shame that non-standard syntax causing reverting support for standard syntax :(

[jquense]

@ai trying to figure out what is supposed to be supported here. It appears like the the valid case of --foo: {g} doesn't parse at all in postcss? Is that because the older @apply syntax precludes do it correctly? It seems like both could be supported at the same time or what detail am i missing

[ai]

The problem is that according to the CSS spec --foo: { a: b } should be parser as a { a: b } string, but we parse it as a --foo: rules with a: b declaration inside.

So, after the PostCSS 8.0 release, we will need to update postcss-apply plugin. Maybe it should re-parse --foo content.

[jquense]

ah this is b/c postcss-apply expects it to be parsed as a Rule, not a declaration value. Boo, ok that is annoying but makes sense.