postcss и simple-vars — используйте переменные, находящиеся внутри объекта

TL;DR: Если у меня есть такой объект и я использую postcss-simple-vars:

default: {
  white: '#ffffff'
}

как я могу использовать переменную $white в моем css?

ДЛИННАЯ ВЕРСИЯ:

У меня есть два проекта, один из которых содержит все мои реагирующие компоненты, а другой — приложение, использующее эти компоненты. (ПРИМЕЧАНИЕ: приведенный ниже код является урезанной версией, а не полным кодом, который не имеет отношения к этому делу) У меня есть экспортированная тема:

const theme = {
  ...some other stuff, not relevant to this question,
  variables: {
    colors: {
      white: '#ffffff',
      black: '#000000',
      ...
    }
  }
}
export default theme;

и в моем проекте приложения я импортирую это как тему импорта из '../node_modules/components/theme.js'; Если захожу в тему, то все правильно.

Теперь внутри файла postcss.config.js я использую это, чтобы определить, откуда postcss-simple-vars должен получить переменные:

'postcss-simple-vars': {
  variables: require('./node_modules/components/theme.js'),
  onVariables: (variables) => {console.log(variables}
},

журнал консоли внутри метода onVariables распечатывает все мои переменные в следующем формате:

default: {
 colors: {
   white: '#ffffff',
   black: '#000000'
 }
}

поэтому в моем css я пытался использовать их несколькими способами:

html, body {
 background-color: $white;
 background-color: $default.colors.white;
 background-color: $default['colors']['white'];
}

но ничего из вышеперечисленного не сработало (в основном это отображается как background-color: [object,object];

Как я могу использовать переменные в этом сценарии? это вообще возможно?

Спасибо за любые советы и предложения