CSS @apply rule leads to parser error

[ricardobeat]

According to the draft specification (http://tabatkins.github.io/specs/css-apply-rule/), and as supported by postcss-apply, this is the correct syntax for the @apply rule:

.selector {
    @apply --my-custom-property-set;
}

Currently svelte chokes on it with:

Error: TypeError: TypeError: Cannot read property 'push' of undefined
    at preprocess.then.catch.err (/Users/rtomasi/workspace/project/node_modules/svelte-loader/index.js:59:12)

Even though there is a comment right above mentioning @apply support.

The error happens at

svelte/src/css/Stylesheet.ts

Line 296 in a8eaa7e

currentAtrule.children.push(atrule);

I'm sending a PR that fixes this by checking for .children - though I'm not sure it is the right way to solve it, and I don't understand why svelte is parsing the CSS before applying the styles transform; I may be doing something wrong?

I'm using sapper and set the preprocessor through options.style in the webpack client config:

style: ({ content, attributes }) => {
    return postcss([
            require('postcss-import')(),
            require('postcss-custom-properties')(),
            require('postcss-apply')()
        ])
        .process(content, { from: 'src', map: { inline: false }})
        .then(code => ({
            code: code.css.toString(),
            map: code.map.toString()
        }))
}

[Conduitry]

Can you make a small repo showing what you're seeing? Is your style function getting called?

[Conduitry]

style is an option to svelte.preprocess and not svelte.compile. Afaik, there is currently no built-in support for preprocess in Sapper. If what you're doing results in style being passed as an option to svelte-loader/svelte.compile, that isn't going to work. I suspect this is not actually a bug.

[Rich-Harris]

Afaik, there is currently no built-in support for preprocess in Sapper

This is up to the version of svelte-loader being used — it was added in 2.3.0. But it should be used as options.preprocess.style, not options.style Huh, it looks like options.style is being used directly. That's wrong. An oversight on my part, I misread the PR that implemented it.

I'm also curious about whether or not the style function is getting called. FWIW Svelte by itself is fine with @apply: https://svelte.technology/repl?version=1.51.1&gist=25eb9b48c9eb669c80d5d6b9e51daad4

[Conduitry]

@ricardobeat Any updates on this?

[tlgreg]

Running into a very similar issue.
The compiler throws an error when @apply used in more then one declaration block.

TypeError: Cannot read property 'push' of undefined at Object.enter (...\node_modules\svelte\compiler.js:20594:54)

Using [email protected], [email protected] with emitCss: true option and with rollup-plugin-postcss

[marcograhl]

I would love to use @apply with svelte components. Has anyone an idea how to fix it?

[maxmilton]

Please don't comment on old threads with new issues. Instead consider opening a new issue and add a link back referencing old issues. Or for general support questions you're better off posting your question to https://stackoverflow.com/questions/tagged/svelte.

For @apply to work, you'll need to set up:

1. A Svelte preprocessor like svelte-preprocess-postcss or svelte-preprocess (to use it in components).
2. A bundler plugin like postcss-loader for Webpack or rollup-plugin-postcss for Rollup (to use it in global styles).
3. Configure PostCSS with a plugin like postcss-apply or postcss-extend-rule.