Вопрос

Есть проект, который требует поддержки браузера без CSS vars (< Chrome/41) и использующий Spectrum CSS от Adobe. (https://opensource.adobe.com/spectrum-css/, https://github.com/adobe/spectrum-css/).

Необходимо собрать файлы Spectrum CSS (все цветовые схемы, размеры, компоненты), чтобы на выходе получить CSS файлы в которых не было бы CSS переменных (вместо переменных - фактические значения).

Например, компонент divider для среднего размера интерфейса и темной цветовой схемы.

Вместо обычного описания под s размер divider'а:

.spectrum-Divider--sizeS {
  background-color: var(--spectrum-divider-s-background-color, var(--spectrum-global-color-gray-300));
}

Должно быть, что-то вроде:

.spectrum.spectrum--medium.spectrum--darkest .spectrum-Divider.spectrum-Divider--sizeS {
     background-color: rgb(57, 57, 57);
}

Или подобное но, чтобы не требовалось использование CSS vars с возможностью менять на ходу (путем изменения классов CSS у элементов) цветовые схемы.

Цветовые схемы:

• light
• lightest
• dark
• darkest

Используемый "размер", один: medium

Что пробовал

postcss с следующим набором плагинов:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-varfallback'),
    require('postcss-dropunusedvars'),
    require('postcss-css-variables'),
    
  ],
};

Пробовал собрать покомпонентно, получилось "почти" хорошо. Некоторые компоненты отказываются корректно (в правильном порядке) загружать переменные и получается, что одна цветовая схема применяется ко всем "скомпилированным" (темная и светлая имеют одинаковые цвета в собранном файле).

Например index.css для сборки компонента typography

@import 'spectrum-css/vars/spectrum-light.css';
@import 'spectrum-css/vars/spectrum-lightest.css';
@import 'spectrum-css/vars/spectrum-dark.css';
@import 'spectrum-css/vars/spectrum-darkest.css';
@import 'spectrum-css/vars/spectrum-medium.css';
@import 'spectrum-css/vars/spectrum-global.css';
@import 'spectrum-css/typography/index-vars.css';

И запсукал так: npx postcss -o dist/typography.css index.css

Спасибо заранее, сильно надеюсь, что есть решение этого вопроса!