feat(vite): postcss support (#818)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

packages/vite/package.json

@@ -19,12 +19,17 @@
     "@nuxt/kit": "3.0.0",
     "@vitejs/plugin-vue": "^1.9.3",
     "@vitejs/plugin-vue-jsx": "^1.2.0",
+    "autoprefixer": "^10.3.7",
     "chokidar": "^3.5.2",
     "consola": "^2.15.3",
+    "defu": "^5.0.0",
     "fs-extra": "^10.0.0",
     "magic-string": "^0.25.7",
     "p-debounce": "^4.0.0",
     "pathe": "^0.2.0",
+    "postcss-import": "^14.0.2",
+    "postcss-import-resolver": "^2.0.0",
+    "postcss-url": "^10.1.3",
     "ufo": "^0.7.9",
     "vite": "^2.6.7",
     "vue": "3.2.20"

packages/vite/src/css.ts

@@ -0,0 +1,50 @@
+import createResolver from 'postcss-import-resolver'
+import defu from 'defu'
+import { Nuxt, requireModule } from '@nuxt/kit'
+import { ViteOptions } from './vite'
+import { distDir } from './dirs'
+
+export function resolveCSSOptions (nuxt: Nuxt): ViteOptions['css'] {
+  const css: ViteOptions['css'] = {
+    postcss: {
+      plugins: []
+    }
+  }
+
+  const plugins = defu(nuxt.options.build.postcss.postcssOptions.plugins, {
+    // https://github.com/postcss/postcss-import
+    'postcss-import': {
+      resolve: createResolver({
+        alias: { ...nuxt.options.alias },
+        modules: [
+          nuxt.options.srcDir,
+          nuxt.options.rootDir,
+          ...nuxt.options.modulesDir
+        ]
+      })
+    },
+
+    // https://github.com/postcss/postcss-url
+    'postcss-url': {},
+
+    // https://github.com/postcss/autoprefixer
+    autoprefixer: {}
+  })
+
+  for (const name in plugins) {
+    const opts = plugins[name]
+    if (!opts) {
+      continue
+    }
+    const plugin = requireModule(name, {
+      paths: [
+        ...nuxt.options.modulesDir,
+        distDir
+      ]
+    })
+    // @ts-ignore
+    css.postcss.plugins.push(plugin(opts))
+  }
+
+  return css
+}

packages/vite/src/dirs.ts

@@ -0,0 +1,5 @@
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'pathe'
+
+export const distDir = dirname(fileURLToPath(import.meta.url))
+export const pkgDir = resolve(distDir, '..')

packages/vite/src/vite.ts

@@ -8,6 +8,7 @@ import { buildClient } from './client'
 import { buildServer } from './server'
 import virtual from './plugins/virtual'
 import { warmupViteServer } from './utils/warmup'
+import { resolveCSSOptions } from './css'
 
 export interface ViteOptions extends InlineConfig {
   vue?: Options
@@ -52,7 +53,7 @@ export async function bundle (nuxt: Nuxt) {
         },
         base: nuxt.options.build.publicPath,
         vue: {},
-        css: {},
+        css: resolveCSSOptions(nuxt),
         optimizeDeps: {
           exclude: [],
           entries: [

yarn.lock

@@ -2796,12 +2796,17 @@ __metadata:
     "@nuxt/kit": 3.0.0
     "@vitejs/plugin-vue": ^1.9.3
     "@vitejs/plugin-vue-jsx": ^1.2.0
+    autoprefixer: ^10.3.7
     chokidar: ^3.5.2
     consola: ^2.15.3
+    defu: ^5.0.0
     fs-extra: ^10.0.0
     magic-string: ^0.25.7
     p-debounce: ^4.0.0
     pathe: ^0.2.0
+    postcss-import: ^14.0.2
+    postcss-import-resolver: ^2.0.0
+    postcss-url: ^10.1.3
     ufo: ^0.7.9
     unbuild: latest
     vite: ^2.6.7