@liutsing/postcss-theme-colors v0.0.1

PostCSS Theme Colors

PostCSS plugin to auto inject ligth/dark theme color.

a {
  color: cc(G01);
}

will be processed to:

a {
  color: #fff;
}
html[data-theme='dark'] a {
  color: #eee;
}

Usage

Step 1: Install plugin:

npm install --save-dev postcss @liutsing/postcss-theme-colors

or

yarn add postcss @liutsing/postcss-theme-colors --save-dev

or

pnpm install --save-dev postcss @liutsing/postcss-theme-colors

Step 2: Check your project for existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

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

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('@liutsing/postcss-theme-colors')({
+      groups: {
+       G01: ['C01', 'C02'],
+     },
+     colors: {
+       C01: 'red',
+       C02: 'blue',
+     },
+   }),
    require('autoprefixer')
  ]
}

see more options

example

cd example
yarn
yarn dev