postcss-theme-fold v1.10.0

postcss-theme-fold

Install

npm i -D postcss-theme-fold

Usage

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

postcss([
  themeFold({
    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'),
      ],
    ],
  }),
])
  .process(css, { from: cssPath })
  .then(result => result.css)

Example content

input:

/* 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;
}

output:

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;
}

Know issues