игнорировать фолбеки css-переменных

стили написаны на scss. После прогонки через postcss накидываются фолбеки на css-переменные. На входе: Стили:

    :root {
      --white: #ffffff;
      --white-1: #E2E6E8;
      --white-2: #F3F5F5;
      --white-3: #E3E7EA;
      --black: #212429;
      --pink: #F784AD;
      --purple: #7048E8;
      --blue: #4263EB;
    }
.btn {
    padding: 15px 10px;
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    background-color: var(--white);
    cursor: pointer;
    text-align: center;

    &--large {
        width: 100%;
    }
  
    &--small {
        width: 15%;

        @media (max-width: 768px) {
            width: auto;
        }
    }
  
    &--preview {
        padding: 7px 10px;
    }
  
    &--primary {
        background-color: var(--primary);
        transition: background-color .2s linear;

        &:hover {
            background-color: var(--blueHover);
        }
    }
  
    &--secondary {
        background-color: var(--secondary);
        transition: background-color .2s linear;

        &:hover {
            background-color: var(--purpleHover);
        }
    }
  
    &--disabled {
        opacity: 50%;
        pointer-events: none;
        cursor: default;
    }
  
    &--alternate {
        background-color: var(--white);
        border: 1px solid var(--grey-3);
        color: #495057;
        transition: border .2s linear;
    
        &-disabled {
            opacity: 50%;
            pointer-events: none;
            cursor: default;
        }

        &:hover {
            border: 1px solid var(--black); 
        }
    }
}

На выходе:

.btn{
    background-color:#fff;
    background-color:var(--white);
    border:none;
    border-radius:8px;
    color:#fff;
    color:var(--white);
    cursor:pointer;
    font-family:Roboto,sans-serif;
    font-size:16px;
    font-weight:500;
    padding:15px 10px;
    text-align:center;
}
.btn--large{
        width:100%;
    }
.btn--small{
        width:15%
    }
@media (max-width:768px){
  
    .btn--small{
            width:auto
    }
        }
.btn--preview{
        padding:7px 10px;
    }
.btn--primary{
        background-color:#4263eb;
        background-color:var(--primary);
        transition:background-color .2s linear
    }
.btn--primary:hover{
            background-color:#2342c0;
            background-color:var(--blueHover);
        }
.btn--secondary{
        background-color:#7048e8;
        background-color:var(--secondary);
        transition:background-color .2s linear
    }
.btn--secondary:hover{
            background-color:#5028c6;
            background-color:var(--purpleHover);
        }
.btn--disabled{
        cursor:default;
        opacity:50%;
        pointer-events:none;
    }
.btn--alternate{
        background-color:#fff;
        background-color:var(--white);
        border:1px solid #acb5bd;
        border:1px solid var(--grey-3);
        color:#495057;
        transition:border .2s linear;
    }
.btn--alternate-disabled{
            cursor:default;
            opacity:50%;
            pointer-events:none;
        }
.btn--alternate:hover{
            border:1px solid #212429;
            border:1px solid var(--black); 
        }

Конфиг postcss.config.js

module.exports = {
  syntax: 'postcss-scss',
    map: { inline: true },
    plugins: [
      require('precss')({
        lookup: { disable: true },
        properties: {
            disable: true,
            preserve: true,
        },
    }),
        require('postcss-import'),
        require('postcss-mixins'),
        require('postcss-nested'),
        require('autoprefixer'),
        require('cssnano')({
          preset: ['default', {
              discardComments: {
                  removeAll: true,
              },
              normalizeWhitespace: false,
          }]
      }),
    ],
}

Webpack/gulp не использую.

.browserslistrc

last 3 version
not dead
not ie > 0

Ответы (1 шт):

Автор решения: ndjs19

решение проблемы с фолбеками найдено - как тут писали, что autoprefixer не тянет фолбеки - спасибо, тк упустила этот момент в документации. Тянет эти полифилы precss, у которого в зависимостях есть postcss-preset-env. Проставив stage: false, фолбеки ушли

require('precss')({
        lookup: { disable: true },\
        stage: false,
        properties: {
            disable: true,
            preserve: true,
        },
    }),
→ Ссылка