feat(webpack): bring back postcss and postcss-loader (#532)

packages/kit/src/config/schema/build.ts

@@ -456,14 +456,19 @@ export default {
 
   /**
    * Customize PostCSS Loader plugins.
+   * Sames options as https://github.com/webpack-contrib/postcss-loader#options
    * @version 2
    * @version 3 webpack only
    */
   postcss: {
-    preset: {
+    execute: undefined,
-      // https://cssdb.org/#staging-process
+    postcssOptions: {
-      stage: 2
+      config: undefined,
-    }
+      plugins: undefined
+    },
+    sourceMap: undefined,
+    implementation: undefined,
+    order: ''
   },
 
   /** @version 2 */

packages/webpack/package.json

@@ -16,10 +16,12 @@
     "@nuxt/kit": "^0.10.0",
     "@vue/babel-preset-jsx": "^1.2.4",
     "@vue/compiler-sfc": "^3.2.11",
+    "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "consola": "^2.15.3",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
+    "cssnano": "^5.0.8",
     "esbuild-loader": "^2.15.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
@@ -32,6 +34,7 @@
     "postcss": "^8.3.6",
     "postcss-import-resolver": "^2.0.0",
     "postcss-loader": "^6.1.1",
+    "postcss-url": "^10.1.3",
     "style-resources-loader": "^1.4.1",
     "time-fix-plugin": "^2.0.7",
     "ufo": "^0.7.9",

packages/webpack/src/presets/style.ts

@@ -2,6 +2,7 @@ import path from 'upath'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
 import { fileName, WebpackConfigContext, applyPresets } from '../utils/config'
+import { PostcssConfig } from '../utils/postcss'
 
 export function style (ctx: WebpackConfigContext) {
   applyPresets(ctx, [
@@ -63,6 +64,7 @@ function createdStyleRule (lang: string, test: RegExp, processorLoader, ctx: Web
   const { options } = ctx
 
   const styleLoaders = [
+    createPostcssLoadersRule(ctx),
     processorLoader,
     createStyleResourcesLoaderRule(lang, options.build.styleResources, options.rootDir)
   ].filter(Boolean)
@@ -133,3 +135,23 @@ function createStyleResourcesLoaderRule (styleLang, styleResources, rootDir) {
     }
   }
 }
+
+function createPostcssLoadersRule (ctx: WebpackConfigContext) {
+  const { options, nuxt } = ctx
+
+  if (!options.build.postcss) {
+    return
+  }
+
+  const postcssConfig = new PostcssConfig(nuxt)
+  const config = postcssConfig.config()
+
+  if (!config) {
+    return
+  }
+
+  return {
+    loader: 'postcss-loader',
+    options: config
+  }
+}

packages/webpack/src/utils/postcss.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import fs from 'fs'
 import path from 'upath'
 import consola from 'consola'
@@ -16,15 +15,15 @@ export const orderPresets = {
     }
     return names
   },
-  presetEnvLast (names) {
+  autoprefixerLast (names) {
-    const nanoIndex = names.indexOf('postcss-preset-env')
+    const nanoIndex = names.indexOf('autoprefixer')
     if (nanoIndex !== names.length - 1) {
       names.push(names.splice(nanoIndex, 1)[0])
     }
     return names
   },
-  presetEnvAndCssnanoLast (names) {
+  autoprefixerAndCssnanoLast (names) {
-    return orderPresets.cssnanoLast(orderPresets.presetEnvLast(names))
+    return orderPresets.cssnanoLast(orderPresets.autoprefixerLast(names))
   }
 }
 
@@ -37,7 +36,7 @@ function postcssConfigFileWarning () {
   _postcssConfigFileWarningShown = true
 }
 
-export default class PostcssConfig {
+export class PostcssConfig {
   nuxt: Nuxt
   options: Nuxt['options']
 
@@ -47,7 +46,7 @@ export default class PostcssConfig {
   }
 
   get postcssOptions () {
-    return this.options.build.postcss
+    return this.options.build.postcss.postcssOptions
   }
 
   get postcssImportAlias () {
@@ -82,12 +81,20 @@ export default class PostcssConfig {
         // https://github.com/postcss/postcss-url
         'postcss-url': {},
 
-        // https://github.com/csstools/postcss-preset-env
+        autoprefixer: {},
-        'postcss-preset-env': this.preset || {},
+
-        cssnano: dev ? false : { preset: 'default' }
+        cssnano: dev
+          ? false
+          : {
+              preset: ['default', {
+                // Keep quotes in font values to prevent from HEX conversion
+                // https://github.com/nuxt/nuxt.js/issues/6306
+                minifyFontValues: { removeQuotes: false }
+              }]
+            }
       },
       // Array, String or Function
-      order: 'presetEnvAndCssnanoLast'
+      order: 'autoprefixerAndCssnanoLast'
     }
   }
 
@@ -113,27 +120,14 @@ export default class PostcssConfig {
     }
   }
 
-  configFromFile () {
+  getConfigFile () {
     const loaderConfig = (this.postcssOptions && this.postcssOptions.config) || {}
-    loaderConfig.path = loaderConfig.path || this.searchConfigFile()
+    const postcssConfigFile = loaderConfig || this.searchConfigFile()
 
-    if (loaderConfig.path) {
+    if (typeof postcssConfigFile === 'string') {
-      return {
+      return postcssConfigFile
-        sourceMap: this.options.build.cssSourceMap,
-        config: loaderConfig
     }
   }
-  }
-
-  normalize (config) {
-    // TODO: Remove in Nuxt 3
-    if (Array.isArray(config)) {
-      consola.warn('Using an Array as `build.postcss` will be deprecated in Nuxt 3. Please switch to the object' +
-        ' declaration')
-      config = { plugins: config }
-    }
-    return config
-  }
 
   sortPlugins ({ plugins, order }) {
     const names = Object.keys(plugins)
@@ -162,31 +156,39 @@ export default class PostcssConfig {
 
   config () {
     /* istanbul ignore if */
-    if (!this.postcssOptions) {
+    if (!this.options.build.postcss) {
       return false
     }
 
-    let config = this.configFromFile()
+    const configFile = this.getConfigFile()
-    if (config) {
+    if (configFile) {
-      return config
+      return {
+        postcssOptions: {
+          config: configFile
+        },
+        sourceMap: this.options.build.cssSourceMap
+      }
     }
 
-    config = this.normalize(cloneDeep(this.postcssOptions))
+    let postcssOptions = cloneDeep(this.postcssOptions)
 
     // Apply default plugins
-    if (isPureObject(config)) {
+    if (isPureObject(postcssOptions)) {
-      if (config.preset) {
+      if (Array.isArray(postcssOptions.plugins)) {
-        this.preset = config.preset
+        defaults(postcssOptions, this.defaultConfig)
-        delete config.preset
-      }
-      if (Array.isArray(config.plugins)) {
-        defaults(config, this.defaultConfig)
       } else {
         // Keep the order of default plugins
-        config = merge({}, this.defaultConfig, config)
+        postcssOptions = merge({}, this.defaultConfig, postcssOptions)
-        this.loadPlugins(config)
+        this.loadPlugins(postcssOptions)
+      }
+
+      delete this.options.build.postcss.order
+
+      return {
+        sourceMap: this.options.build.cssSourceMap,
+        ...this.options.build.postcss,
+        postcssOptions
       }
-      return config
     }
   }
 }

yarn.lock

@@ -1599,10 +1599,12 @@ __metadata:
     "@types/webpack-virtual-modules": ^0
     "@vue/babel-preset-jsx": ^1.2.4
     "@vue/compiler-sfc": ^3.2.11
+    autoprefixer: ^10.3.4
     babel-loader: ^8.2.2
     consola: ^2.15.3
     css-loader: ^6.2.0
     css-minimizer-webpack-plugin: ^3.0.2
+    cssnano: ^5.0.8
     esbuild-loader: ^2.15.1
     file-loader: ^6.2.0
     fs-extra: ^10.0.0
@@ -1615,6 +1617,7 @@ __metadata:
     postcss: ^8.3.6
     postcss-import-resolver: ^2.0.0
     postcss-loader: ^6.1.1
+    postcss-url: ^10.1.3
     style-resources-loader: ^1.4.1
     time-fix-plugin: ^2.0.7
     ufo: ^0.7.9
@@ -3516,7 +3519,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.2.5":
+"autoprefixer@npm:^10.2.5, autoprefixer@npm:^10.3.4":
   version: 10.3.4
   resolution: "autoprefixer@npm:10.3.4"
   dependencies:
@@ -5301,7 +5304,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssnano@npm:^5.0.6":
+"cssnano@npm:^5.0.6, cssnano@npm:^5.0.8":
   version: 5.0.8
   resolution: "cssnano@npm:5.0.8"
   dependencies: