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

[PedroAugustoRamalhoDuarte]

@patricknelson I have a similar problem, I need to use plain .css to insert into wkhtmltopdf in development.
I search a lot and cannot found a solution, i have to sticky with saas --watch

[patricknelson]

FWIW @PedroAugustoRamalhoDuarte, over the past year or so, I've found plain scripts in package.json to continue to work well when compiling/building separate .scss files. files to .css files.

It helps to also have a design pattern to include vite alongside those scripts as well so that you can just have one main build script that then delegates to other "sub" scripts like build:vite or build:sass (which you could run directly as well).

e.g. (untested, but simple enough to get the idea)

{
  "scripts": {
    "build": "npm run build:vite && npm run build:sass",
    "build:vite": "vite build",
    "build:sass": "npx sass ...",
    "dev": "concurrently --kill-others 'npm run dev:vite' 'npm run dev:sass'",
    "dev:vite": "vite",
    "dev:sass": "npx sass --watch ...",
  }
}