Configuration for PostCSS Plugins in NuxtJS doesn't work well with postcss-loader.

[Saggitarie]

Versions

• nuxt: v2.15.7
• node: v14.17.0

Reproduction

1. Inconsistency in the way of configuring postcss plugins for nuxtjs and postcss-loader causes this error:

[object Object] is not a PostCSS plugin

PostCSS loader recommends setting plugins in an array format and treats an object format as deprecation.

See this for reference: Postcss-loader doc

However, NuxtJS configures in object format. This causes inconsistency in the way we configure postcss plugins, so I think this needs to be either way.

2. Unable to configure plugins within nuxt.config.js

Please use build.postcss in your nuxt.config.js instead of an external config file. Support for such files will be removed in Nuxt 3 as they remove all defaults set by Nuxt and can cause severe problems with features like alias resolving inside your CSS.

According to this warning, NuxtJS recommends to use build.postcss to configure PostCSS plugin. However, postcss-loader uses the external file postcss.config.js to load postcss with parser like sugarss.

Additional Details

Steps to reproduce

This is the nuxt.config.js settings I'm using.

const postcssConfig = {
/ ... PostCSS Plugins Goes Here .../
}

export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,

// Global page headers: https://go.nuxtjs.dev/config-head
head: {
	title: 'AppName',
	htmlAttrs: {
		lang: 'en',
	},
	meta: [
		{ charset: 'utf-8' },
		{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
		{ hid: 'description', name: 'description', content: '' },
		{ name: 'format-detection', content: 'telephone=no' },
	],
	link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},

// Global CSS: https://go.nuxtjs.dev/config-css
css: [],

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],

// Auto import components: https://go.nuxtjs.dev/config-components
components: true,

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
	// https://go.nuxtjs.dev/typescript
	'@nuxt/typescript-build',
],

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
	// https://go.nuxtjs.dev/axios
	'@nuxtjs/axios',
	'@nuxt/postcss8'
],

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
	publicPath: '/nuxt/',
	babel: {
		cacheDirectory: false,
		configFile: true,
	},
	parser: 'sugarss',
	extractCSS: true,
	postcss: {
		plugins: postcssConfig,
	},
	extend(config) {
		const vueStyle = {
			loader: 'vue-style-loader',
			options: { sourceMap: true },
		}
		const css = {
			loader: 'css-loader',
			options: {
				sourceMap: true,
				importLoaders: 2,
				exportOnlyLocals: false,
			},
		}
		const postcss = {
			loader: 'postcss-loader',
			options: {
				parser: 'sugarss',
				sourceMap: true,
				plugins: postcssConfig,
				order: 'presetEnvAndCssnanoLast',
			},
		}
		const cssModule = {
			...css,
			options: {
				...css.options,
				localIdentName: '[local]_[hash:base64:5]',
				modules: true,
			},
		}

		config.module.rules.push({
			test: /\.sss$/,
			oneOf: [
				{ resourceQuery: /module/, use: [vueStyle, cssModule, postcss] },
				{ use: [vueStyle, css, postcss] },
			],
		})
	},
},

}

What is Expected?

Being able to parse css written in components levels or global scope levels with parser like sugarss.
Also make the way we specify plugins consistent for both postcss-loaders and nuxtjs.

What is actually happening?

Get this error

[object Object] is not a PostCSS plugin

Not able to work postcss properly like before with external file.

[danielroe]

It may be worth having a look at this PR: #9671

[Saggitarie]

@danielpost
Hey, thanks for the PR link.
It might be exactly a feature I was looking for! Just in time lol

Is this merged BTW? Doesn't look like it

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[SunnyAureliusRichard]

hi @Saggitarie . Is it working for you now, or have you migrated to nuxt 3 ? It's not possible for me to check the git history at the moment but I think this bug still exists.

[danielroe]

@SunnyAureliusRichard Would you check with the latest nuxt-edge@2.16.3-27983380.e86850a? We've just merged #19518 which I hope may improve things for you.