From 5b75e11e85f7ac580965744a4e8443e175ec1c8b Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 14 Oct 2021 04:08:26 +0800
Subject: [PATCH] feat(vite): postcss support (#818)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
---
 packages/vite/package.json |  5 ++++
 packages/vite/src/css.ts   | 50 ++++++++++++++++++++++++++++++++++++++
 packages/vite/src/dirs.ts  |  5 ++++
 packages/vite/src/vite.ts  |  3 ++-
 yarn.lock                  |  5 ++++
 5 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 packages/vite/src/css.ts
 create mode 100644 packages/vite/src/dirs.ts

diff --git a/packages/vite/package.json b/packages/vite/package.json
index 3e2e21d853..7b1fc3acea 100644
--- a/packages/vite/package.json
+++ b/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"
diff --git a/packages/vite/src/css.ts b/packages/vite/src/css.ts
new file mode 100644
index 0000000000..8c98f585bc
--- /dev/null
+++ b/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
+}
diff --git a/packages/vite/src/dirs.ts b/packages/vite/src/dirs.ts
new file mode 100644
index 0000000000..af0ffb33a2
--- /dev/null
+++ b/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, '..')
diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts
index ca12a76651..9df36347bc 100644
--- a/packages/vite/src/vite.ts
+++ b/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: [
diff --git a/yarn.lock b/yarn.lock
index 136871920f..de8625a6dd 100644
--- a/yarn.lock
+++ b/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