svelte: цепочка s css и post css дают неожиданные результаты в svelte-preprocess

Question

При использовании scss и postcss внутри preprocess массива rollup-plugin-svelte Post CSS, похоже, выполняет только некоторые, но не все желаемые преобразования. Я имел в виду, что, хотя, например, font-family: Inter, system-ui; правильно преобразуется в font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;, color: var(--color-text); не преобразуется в color: #fff;. Это приводит к тому, что приложение неправильно отображает в IE. См. https://int.agricontrol.app/svelte/.

Это мой rollup.config.js:

/* eslint-env node */

import svelte from 'rollup-plugin-svelte';
import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import browsersync from 'rollup-plugin-browsersync';
import { scss, postcss, globalStyle } from 'svelte-preprocess';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import cssEnv from 'postcss-preset-env';

const dev = process.env['dev'] === 'true';
const buildOnly = process.env['build-only'] === 'true';

export default {
    input: 'src/app.js',
    output: {
        sourcemap: dev,
        format: 'iife',
        file: 'public/app.js'
    },
    plugins: [
        svelte({
            dev: dev,
            css: css => {
                css.write('public/app.css', dev)
            },
            preprocess: [
                globalStyle(),
                scss(),
                postcss({
                    plugins: [
                        cssEnv(),
                        !dev && autoprefixer(),
                        !dev && cssnano()
                    ].filter(plugin => plugin)
                }),
            ]
        }),
        !dev && babel({
            extensions: [ '.js', '.mjs', '.svelte' ],
            include: [ 'src/**', 'node_modules/svelte/**' ],
            presets: [
                ['@babel/preset-env', {
                    useBuiltIns: 'usage',
                    corejs: 3
                }]
            ]
        }),
        resolve(),
        commonjs(),
        !dev && terser(),
        !buildOnly && browsersync({
            server: 'public',
            notify: false,
            ui: false
        })
    ].filter(plugin => plugin)
};

Тогда, например, тег style моего основного Link.svelte:

<style lang="scss">

    a {
        display: inline-block;
        color: inherit;
    }

    .primary,
    .secondary,
    .ghost {
        color: var(--color-white);
        position: relative;
        border-radius: 10px;
        padding: 15px 25px;
        text-decoration: none;
        font-size: .8rem;
        font-weight: var(--font-weight-bold);
        text-shadow: none;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
            opacity: 0;
            transition: opacity .3s ease-in-out;
        }

        &:hover {
            &::after {
                opacity: 1;
            }
        }
    }

    .primary {
        background-color: var(--color-brand);
    }

    .ghost {
        background-color: var(--color-brand-muted);
    }

    .navigation {
        position: relative;
        padding: 30px;
        text-decoration: none;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: var(--color-brand-muted);
            transform: scaleY(0);
            transition: transform .3s ease-in-out;
            transform-origin: bottom;
        }

        &:hover {
            &::after {
                transform: scaleY(1);
            }
        }
    }

</style>

My package.json:

{
    "name": "agricontrol",
    "description": "Landing page for Agricontrol",
    "author": "Robin Löffel <hi@robinloeffel.ch> (https://robinloeffel.ch)",
    "license": "MIT",
    "homepage": "https://agricontrol.app",
    "repository": "rbnlffl/agricontrol",
    "scripts": {
        "start": "yarn cleanup && rollup -c -w --environment dev",
        "prod": "yarn cleanup && rollup -c -w",
        "dist": "yarn cleanup && rollup -c --environment build-only",
        "cleanup": "rm -rf public/app.*"
    },
    "devDependencies": {
        "@babel/core": "^7.8.4",
        "@babel/preset-env": "^7.8.4",
        "@rollup/plugin-commonjs": "^11.0.2",
        "@rollup/plugin-node-resolve": "^7.1.1",
        "autoprefixer": "^9.7.4",
        "core-js": "^3.6.4",
        "cssnano": "^4.1.10",
        "node-sass": "^4.13.1",
        "postcss": "^7.0.26",
        "postcss-preset-env": "^6.7.0",
        "regenerator-runtime": "^0.13.3",
        "rollup": "^1.31.0",
        "rollup-plugin-babel": "^4.3.3",
        "rollup-plugin-browsersync": "^1.1.0",
        "rollup-plugin-svelte": "^5.1.1",
        "rollup-plugin-terser": "^5.2.0",
        "svelte": "^3.18.1",
        "svelte-preprocess": "^3.4.0"
    },
    "browserslist": [
        ">1%",
        "not dead"
    ]
}

Я ожидаю, что scss выполнит преобразование, например, для разрешения вложений и т. Д., А затем для postcss выполнить полифинирование.