feat(css): export preprocessCSS API

[bluwy]

Description

Export preprocessCSS(), which is calling compileCSS() without the urlReplacer function.

The urlReplacer is not ran as it uses the this context of Rollup, and it isn't necessary as the preprocessed CSS can run through Vite's pipeline to get it's URL replaced later.

This is helpful for template compilers like Svelte and Astro that can only parse pure CSS, so style tags need to be preprocessed.

Additional context

I'm currently testing this API in:

• https://github.com/sveltejs/vite-plugin-svelte/tree/vite-preprocess-css-api
• https://github.com/withastro/astro/tree/vite-preprocess-css-api

---

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.

[sapphi-red]

This looks good to me since we already export transformWithEsbuild.

[thilinadinith]

how to use this ? no documentation ?

[qodesmith]

How do we use this feature?

[patricknelson]

Is there no documentation for this? Took me a while to end up at #8687. I’m happy to see this is implemented though… how do I use it? 😄

[patricknelson]

Hmm, this usage in https://github.com/withastro/astro/blob/97f876abba31438ae4cc41fdbae276fbbc78e98b/packages/astro/src/core/compile/style.ts#L21 seems pretty low level.

I’m assuming @GrayYoung was looking for a method of telling Vite to compile separate .scss files to .css (actively during development, not just on build)* without having to import them in a .js file by using the configuration exposed in the main vite.config.js file. Does this change do that? If not, should #8687 be reopened?

Or (maybe better) does anyone know of alternative plugins available yet for Vite which can accomplish this? Just seems to make sense to me that this should be available to configure in this location (if not officially by Vite itself of course, then hopefully via a simple dedicated plugin).

Edit: Then again, maybe I’m being old fashioned 😅. Vite focuses primarily on intercepting and transforming for dev (I’m coming from ancient world of gulp/grunt). Seems Vite might already do something like this using something akin to <link rel="stylesheet" href="./style.scss" /> (c.f. https://slinkity.dev/docs/styling/#load-stylesheets). My use case is slightly different anyway, so continuing with sass --watch … during dev (continuing to reference the build .css for now, due to my complex project) then use rollup during prod build might be all I need anyway.

[patak-dev]

Starting a discussion to gather feedback so we can move this feature out of experimental:

• Stabilizing `preprocessCSS()` #13815