feat(css): add cssExtract option to build config (#4345)

[marcelobotega]

Description

Add cssExtract option.
It will be used mainly on lib mode. You can set it to false so you do not need to import the style.css.
It follows the same principle as css.extract from vue-cli.

Fixes #4345 #1579

Additional context

There is a PR #6569 by @JackFGreen, but it is not updated since july 2022. I just followed the same idea that he had, and I hope we can review this and improve the feature.

---

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 PR Title 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.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[jrson83]

This is hot!

[YonatanKra]

Any chance this will be merged?

[jhdm]

This is great, and we eagerly await it.
But I got build error with it in a component library that I am using for testing:
https://github.com/IsraelDCastro/my-library-vue-ts

$ pnpm run build

> [email protected] build C:\Source\my-library-vue-ts
> vue-tsc && vite build

vite v4.4.0-beta.3 building for production...
✓ 9 modules transformed.
[vite:esbuild-transpile] Transform failed with 1 error:
my-library-vue-ts.es.js:1:12: ERROR: Expected "as" but found "__vite_style__"

Expected "as" but found "__vite_style__"
1  |  import {var __vite_style__ = document.createElement('style');__vite_style__.textContent = ".read-the-docs[data-v-8fe7e3eb]{color:#888}button[data-v-df630c6a]{padding:.6rem 1.25rem;background-color:#747bff;border:0}button[data-v-df630c6a]:hover{background-color:#535bf2}\n";document.head.appendChild(__vite_style__); defineComponent, ref, openBlock, createElementBlock, Fragment, createElementVNode, toDisplayString, pushScopeId, popScopeId, createTextVNode, reactive, normalizeClass, unref, renderSlot } from 'vue';    
   |              ^
2  |
3  |  const _withScopeId = (n) => (pushScopeId("data-v-8fe7e3eb"), n = n(), popScopeId(), n);


[vite:dts] Start generate declaration files...
✓ built in 263ms
[vite:dts] Declaration files built in 926ms.

error during build:
Error: Transform failed with 1 error:
my-library-vue-ts.es.js:1:12: ERROR: Expected "as" but found "__vite_style__"
    at failureErrorWithLog (C:\Source\my-library-vue-ts\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1649:15)
    at C:\Source\my-library-vue-ts\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:847:29
    at responseCallbacks.<computed> (C:\Source\my-library-vue-ts\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:703:9)
    at handleIncomingPacket (C:\Source\my-library-vue-ts\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:762:9)
    at Socket.readFromStdout (C:\Source\my-library-vue-ts\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:679:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
 ELIFECYCLE  Command failed with exit code 1.

Reproducer

git clone https://github.com/IsraelDCastro/my-library-vue-ts
cd my-library-vue-ts
pnpm install

Replace installed vite by this PR's package.
In vite.config.ts, add:

 cssExtract: false,

Then build:

pnpm run build

[tibineagu]

I can also confirm this is happening.

[tibineagu]

@marcelobotega - in order to reproduce i just cloned your repo, built the resources in packages/vite/ with pnpm run build then linked that package using yarn link and used it in my own library with yarn link vite.

[receter]

The only problem that I can see (with the general solution of injecting CSS in a library that will be used in a bundler downstream) is that the consumer loses control over the CSS styles.

For example the browserslist from the consumer will have no effect on the libraries styles.

While this might be a minor issue, it is something to keep in mind.

[renan-f]

Great functionality, waiting for release

[nocive]

bump