wip: css

Author: hi-ogawa

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

@@ -563,7 +563,7 @@ export function cssPostPlugin(config: ResolvedConfig): RolldownPlugin {
           !inlined &&
           dataToEsm(modules, { namedExports: true, preferConst: true })
 
-        if (config.command === 'serve') {
+        if (config.command === 'serve' && !config.experimental.rolldownDev) {
           const getContentWithSourcemap = async (content: string) => {
             if (config.css?.devSourcemap) {
               const sourcemap = this.getCombinedSourcemap()

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

@@ -68,6 +68,7 @@ export function rolldownDevHandleConfig(
         // this is not "build" option any more (or is there a way to handle entry lazily?)
         build: {
           modulePreload: false,
+          cssCodeSplit: false,
           rollupOptions: {
             input:
               config.build?.rollupOptions?.input ??
@@ -182,10 +183,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,9 @@ import virtualTest from 'virtual:test'
 // @ts-expect-error no type
 import testAlias from 'test-alias'
 import { throwError } from './error'
+// TODO: hmr
+import './test-style.css'
+import testStyleInline from './test-style-inline.css?inline'
 
 export function App() {
   const [count, setCount] = React.useState(0)
@@ -17,8 +20,15 @@ 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>
+        <pre>
+          [css] <span className="test-style">orange</span>
+        </pre>
+        <style>{testStyleInline}</style>
+        <pre>
+          [css?inline] <span className="test-style-inline">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;
+}