feat: wip css plugins

Author: hi-ogawa

packages/vite/src/node/plugins/index.ts

@@ -45,19 +45,20 @@ export async function resolvePlugins(
   normalPlugins: Plugin[],
   postPlugins: Plugin[],
 ): Promise<Plugin[]> {
+  const rolldownDev = config.experimental.rolldownDev
   const isBuild = config.command === 'build'
   const isWorker = config.isWorker
-  const buildPlugins = isBuild
-    ? await (await import('../build')).resolveBuildPlugins(config)
-    : { pre: [], post: [] }
+  const buildPlugins =
+    isBuild || rolldownDev
+      ? await (await import('../build')).resolveBuildPlugins(config)
+      : { pre: [], post: [] }
   const { modulePreload } = config.build
   const depOptimizationEnabled =
     !isBuild &&
     Object.values(config.environments).some(
       (environment) => !isDepOptimizationDisabled(environment.optimizeDeps),
     )
   const enableNativePlugin = config.experimental.enableNativePlugin
-  const rolldownDev = config.experimental.rolldownDev
 
   return [
     depOptimizationEnabled ? optimizedDepsPlugin() : null,

packages/vite/src/node/server/environments/rolldown.ts

@@ -182,10 +182,16 @@ class RolldownEnvironment extends DevEnvironment {
     plugins = plugins.filter(
       (p) =>
         !(typeof p.name === 'number' || p.name?.startsWith('vite:')) ||
-        ['vite:define', 'vite:build-html', 'vite:build-metadata'].includes(
-          p.name,
-        ) ||
-        ['AliasPlugin', 'TransformPlugin'].includes(p.constructor.name),
+        [
+          'vite:define',
+          'vite:build-html',
+          'vite:build-metadata',
+          'vite:css',
+          'vite:css-post',
+        ].includes(p.name) ||
+        ['AliasPlugin', 'TransformPlugin', 'LoadFallbackPlugin'].includes(
+          p.constructor.name,
+        ),
     )
     plugins = plugins.map((p) => injectEnvironmentToHooks(this as any, p))
 

playground/rolldown-dev-react/src/app.tsx

@@ -4,6 +4,8 @@ import virtualTest from 'virtual:test'
 // @ts-expect-error no type
 import testAlias from 'test-alias'
 import { throwError } from './error'
+import './test-style.css'
+import testStyleInline from './test-style-inline.css?inline'
 
 export function App() {
   const [count, setCount] = React.useState(0)
@@ -17,8 +19,16 @@ export function App() {
         </button>
         <pre>[virtual] {virtualTest}</pre>
         <pre>[alias] {testAlias}</pre>
-        {/* TODO: slightly broken probably due to patching rolldown:runtime during renderChunk */}
+        {/* TODO: source map is slightly broken probably due to patching rolldown:runtime during renderChunk */}
         <button onClick={() => throwError()}>stacktrace</button>
+        <style>{testStyleInline}</style>
+        <pre>
+          [css?inline] <span className="test-style-inline">orange</span>
+        </pre>
+        {/* TODO */}
+        <pre>
+          [css] <span className="test-style">orange</span>
+        </pre>
       </div>
     </div>
   )

playground/rolldown-dev-react/src/test-style-inline.css

@@ -0,0 +1,3 @@
+.test-style-inline {
+  color: orange;
+}

playground/rolldown-dev-react/src/test-style.css

@@ -0,0 +1,3 @@
+.test-style {
+  color: orange;
+}