feat: support postcss sugarss

[vitalybaev]

Description

Hi, this PR adds support for handling SugarSS - Indent-based CSS syntax for PostCSS.

Additional context

At first, I had taken a look at #2436, but I've chosen a different approach. Instead of providing additional context and use it in postcss.config.js, I think it's better to treat .sss files as regular PostCSS case, but automatically change parser to sugarss.

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[patak-dev]

Thanks for the PR, IMO the added complexity is ok given how popular SugarSS is. We'll be discussing the feat in our next team meeting.

[vitalybaev]

@patak-dev any updates on this?

[patak-dev]

Sorry, we got a bit backlogged for new features. I hope we can get to it soon.

[ksevelyar]

@vitalybaev sorry if I ask something obvious, does this pr allow to use <style lang="sss"></style> inside .vue files?

https://github.com/vitejs/vite/pull/6705/files#diff-2cfbd4f4d8c32727cd8e1a561cffbde0b384a3ce0789340440e144f9d64c10f6R88

[vitalybaev]

@ksevelyar I don't know Vue.js well actually and how it resolves types of content from its files. But it seems that the answer is yes - this PR should work with <style lang="sss"></style>

I can test it locally and share the result

[Shinigami92]

@vitalybaev would you be so kind and rebase this PR?
In today's meeting we discussed this and might want to merge it

[patak-dev]

@vitalybaev to add a bit more context, the PR looks good to move forward but the team doesn't have experience with sugars. So let's merge it after it is rebased and we can include it in Vite 3.2, we may ping you if there are issues related to sugarss moving forward if that sounds good. Sorry it took us this long to get back to you.

[vitalybaev]

@patak-dev @Shinigami92 glad to hear that!

I've rebased my PR, and it now fails only on test-serve, not only for SugarSS but also for other CSS tests.
But test-build works fine and running playground/css as dev also works fine 🤔
I'll try to find an issue

[vitalybaev]

I need more time since something has changed in Vite itself. Maybe you could help.

So, the main idea behind my PR is to trait .sss as PostCSS files but with explicit parser: "sugarss" option set. Everything works fine (if you run pnpm run dev in playground/css you'll see correct processing of SugarSS files). Building also works fine.
But tests work differ - test-build passes successfully, but test-serve failed. Moreover, importing sugarss.sss in main.js entry point inplayground/css breaks not only SugarSS tests, but some other tests in css.spec.ts.

So, I'm going to deep dive and debug what causes these problems.

[Shinigami92]

If you want to create a new PR and close this one, please link the new one here, so I can keep track

[vitalybaev]

@Shinigami92 I believe it's not due to the conflicts or wrong rebase. But I tried to replicate these changes onto the latest main but to no avail.

What I can confirm:

1. compileCSS works fine. At least if you pass .sss file there, you'll get correctly transpiled CSS.
2. pnpm run test-build passes all tests successfully, but
3. pnpm run test-serve fails with a bunch of failed tests. Not only regarding SugarSS, but to other CSS tests.
4. But if you serve CSS playground via pnpm run dev from playground/css directory - you'll see correct styles applied.
5. I also can confirm that importing .sss file breaks tests.
6. Some tests (for example, SugarSS tests) pass successfully when they are executed separately.

So, I need to deep dive more. There must be some side effects that break things.

🤯🤯🤯

[vitalybaev]

Oh well, the cause of the problem was updating parser option in the PostCSS options config, which is indeed just a mutation of the original config that can be used with other files.

So, I've updated resolvePostcssConfig implementation to distinguish cached configs also by dialect. IDK whether this is an appropriate way to solve this, but it works correctly.

[vitalybaev]

But there is an issue with DX for pnpm users - due to the fact that sugarss has postcss as a peer dependency, we have to encourage users to install not only sugarss package but also postcss despite having postcss already in Vite itself (it's a transitive dependency, so pnpm doesn't allow us to use it).

So it should be noticed in the docs.

[vitalybaev]

@Shinigami92 @patak-dev Have you found time to take a look at my latest fixes?

[vitalybaev]

@Shinigami92 I've rebased this PR again, could you please review it when you'll have time

[vitalybaev]

@patak-dev @Shinigami92 is there anything to be done here? It also still has needs rebase label

[patak-dev]

Thanks for your patience @vitalybaev! Let's release this one as part of Vite 3.2