CSS @apply Rule support

[marianoviola]

The @apply rule isn't currently supported by any browser but in my opinion it is a very useful feature in order to keep styles reusable by sharing global custom sets down to scoped styles.

To overcome the lack of support of custom sets, I tried to use cascading mechanism between components but I encountered several troubles to avoid unwanted style overrides with root level shared classes.

At the end I found a way to process styles with PostCSS/nextcss but when I try to use the @apply rule in a component I get the following error: Cannot read property 'toLowerCase' of undefined.

I was wondering if it is a known limitation of the parser and if there is a way to fix it.

[Rich-Harris]

My understanding is that @apply is effectively dead in the water, which is a shame as it would have been very useful. That notwithstanding, it'd probably be nice if we just disregarded constructs that Svelte doesn't know what to do with (as long as they're parseable by css-tree — beyond those cases, it's probably better to process the styles before Svelte gets to them).

Looking at the stack trace, it should be straightforward to fix it so that it just ignores @apply.

[marianoviola]

I agree, in that sense Svelte should adhere to the "robustness principle". Anyway thank you very much for the fix.

[Rich-Harris]

Released 1.40.2 with the fix

[marianoviola]

This is just to let you know you that my joy to finally see @apply working as expected, has been brutally interrupted by this sad message:

You are using @apply rule and custom property sets.
This feature won't be included in next the major release of postcss-cssnext.
This most likely won't get any more support from browser vendors as the spec is yet considered deprecated and alternative solutions are being discussed.
Read more about the reason here https://github.com/pascalduez/postcss-apply.

I hope that sooner or later, better times will come with the advent of CSS Shadow Parts.

[Rich-Harris]

I hope that sooner or later, better times will come with the advent of CSS Shadow Parts.

Me too!

[againksy]

@martinandert @Rich-Harris Hello what about this ? Still see this message.

    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.0.7",
    "postcss-reporter": "^6.0.0",