PostCSS @custom-media - Unexpected character '@'

[daarxwalker]

Describe the bug
Can't compile app when importing .pcss file, which have defined custom-media

Logs

$ sapper dev
✗ server
Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
1: @custom-media --vw-md (max-width: 991px);
   ^
2:
3: body {
✔ client (5.5s)
internal/modules/cjs/loader.js:783
    throw err;
    ^

Error: Cannot find module '/Users/daar/Documents/Projects/swtp-platform/__sapper__/dev/server/server.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:780:15)
    at Function.Module._load (internal/modules/cjs/loader.js:685:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1014:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
> Server crashed
✔ service worker (23ms)
✔ service worker (11ms)

To Reproduce
postcss.config.js

const mode = process.env.NODE_ENV
const dev = mode === 'development'

module.exports = {
	plugins: [
		require('postcss-import')(),
		require('postcss-preset-env')({
			autoprefixer: { grid: true },
			features: {
				'nesting-rules': true,
				'custom-media-queries': true,
			},
		}),

		!dev &&
			require('cssnano')({
				preset: ['default', { discardComments: { removeAll: true } }],
			}),
	],
}

global.pcss - only for test purpose

@custom-media --vw-md (max-width: 991px);

body {
	background-color: blue;

	@media (--vw-md) {
		background-color: #2f0000;
	}
}

global.pcss file imported in _layout.svelte ->

<style global>
	@import "./global.pcss";
</style>

Expected behavior
PostCSS should work, with .pcss file or .css file and in component, too.

Information about your project:

• Your browser and the version: Chrome latest

• Your operating system: macOS Catalina 10.15.5

• svelte-preprocess version 4.0.8

• Rollup

[kaisermann]

Hey, @daarxwalker 👋

I've copied your css code into a repro and got it working without any issues. Do you still have a problem with it?