Add support for postCSS

[Jayphen]

The svelte-preprocess package includes support for preprocessing CSS with PostCSS. Style blocks can be identified with <style lang="postcss">. With plugins (such as postcss-nested), styles can be nested in the same way they are in SASS.

Alternatively, is there a way to identify a style block as SASS so that this plugin treats it as such, but without Svelte attempting to process it with that language? If so, I could mark my style blocks as SASS even though I actually use PostCSS.

[evanleck]

So you're trying to get styles in <style lang="postcss"> to highlight nested styles like Sass? Though the preprocessing pipeline is aware of what plugins you've configured, there's no good way (that I can think of) to make Vim or this plugin aware of that.

[Jayphen]

Yes, my goal is to highlight nested styles (or at least not have them result in warnings/errors in vim). I would like the behaviour I get (in vim) when setting lang="scss", but I don't want to actually use SCSS.

I'll need to look in to the source of this plugin deeper to understand how it works, but could a configuration option to add languages work? i.e. { 'name': 'postcss', 'tag': 'style', 'as': 'scss' }.

That may not be an appropriate solution - perhaps it's only useful for my particular problem. I don't know :D

[evanleck]

I think you're on to something. If I add the as option and merge the current list with a global list you could add whatever workarounds you want for yourself without committing anybody else to those changes. Give me a little time to work through that idea and I'll let you know when I've got something.

[evanleck]

@Jayphen give the latest in master in a shot, I think I've got it covered. You'll need to add the following to your vimrc:

let g:svelte_preprocessor_tags = [{ 'name': 'postcss', 'tag': 'style', 'as': 'scss' }]
let g:svelte_preprocessors = ['postcss']

[Jayphen]

Thanks! It looks like this should work.

In practice I am still having some issues, but I am not sure if it is this plugin or one of the others I am using (polyglot, coc-svelte). I've set lang="postcss", but the behaviour is the same as without it.

Also, I get some errors:

I actually get the "identifier is expected" error even with lang set to scss.

[evanleck]

When you say the behavior is the same as without, do you mean the syntax highlighting? Or are you referring to the linting messages?

[Jayphen]

Both. Here's some screenshots to illustrate:

[evanleck]

The syntax highlighting looks fine to me, is there something I'm missing? Also, you have something in your vimrc like what I mentioned here, right?

The linting issues aren't related to the syntax highlighting support I added recently, they're coming from other tools that may need additional configuration to support selector nesting. If you create a .css file with the same contents as your style tag here do you get the same linting errors?

[evanleck]

@Jayphen is this still an issue for you?

[evanleck]

Closing for inactivity, though I'm happy to reopen if it's still an issue.