Postcss plugin for folding css-variables with using whitepaper design system in legacy browsers.

npm i -D postcss-theme-fold

const { resolve } = require('path')
const postcss = require('postcss')
const themeFold = require('postcss-theme-fold')

postcss([
  themeFold({
    mode: 'multi-themes',
    themes: [
      [
        resolve('src/components/Theme/_size/Theme_color_default.css'),
        resolve('src/components/Theme/_size/Theme_size_default.css'),
      ],
      [
        resolve('src/components/Theme/_size/Theme_color_brand.css'),
        resolve('src/components/Theme/_size/Theme_size_default.css'),
      ],
    ],
    globalSelectors: ['.utilityfocus'],
  }),
])
  .process(css, { from: cssPath })
  .then(result => result.css)

• themes (string[][]): List of themes with path to css files.
• globalSelectors (string[]): Global helper-selectors.
• mode ('single-theme' | 'multi-themes'): Method of theme folding, by default choice mode in relation from themes size. single-theme — don't accumulate cascade with theme selectors. multi-themes — accumulate cascade with theme selectors.
• shouldProcessVariable (declaration: Declaration) => boolean: Predicate for processing each nodes.
• disableWarnings: Disable warnings about missing values
• debug: Show original variables as comment
• preserve: Preserve original declaration

/* Theme/_color/Theme_color_default.css */
.Theme_color_default {
  --color: #fff;
}

/* Theme/_size/Theme_size_default.css */
.Theme_size_default {
  --size: 10px;
}

/* Button/Button.css */
.Button {
  color: var(--color);
  font-size: var(--size);
  box-sizing: border-box;
}

Split rules from other chunks of theme to extra selectors for order to reduce the specificity.

.Button {
  box-sizing: border-box;
}

.Theme_color_default .Button {
  color: #fff;
}

.Theme_size_default .Button {
  font-size: 10px;
}