postcss-themes v1.0.3

PostCSS Themes

PostCSS plugin to add themes in CSS file.

Note about at-rules: Except for Conditional Group At-rules, others will simply be ignored because of irrelevance. @keyframes may contain css varialbe, but it's not feasible to deduce their scope values at build time.

Usage

npm install postcss-themes -D

module.exports = {
  plugins: [
    'postcss-themes': {
      themes: {
        filePath: 'theme-aaa.css',
      }
    },
  ]
}

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Input CSS

:root {
  --main-color: green;
}
.foo {
  font-size: 16px;
  color: var(--main-color);
}

theme-aaa.css

:root {
  --main-color: red;
}

Output CSS

:root {
  --main-color: green;
}
.foo {
  font-size: 16px;
  color: var(--main-color);
}
.theme-aaa {
  --main-color: red;
}
.theme-aaa .foo {
  color: var(--main-color);
}

Change Theme

document.body.className = document.body.className + ' theme-aaa'

Work With Other Postcss Plugins

module.exports = {
  plugins: [
    'postcss-themes': {
      themes: {
        filePath: 'theme-aaa.css',
      }
    },
    'postcss-css-variables': {},
    'postcss-preset-env': {
      ...
    }
  ]
}

Attribute

ThemeObject