0.0.1 • Published 3 years ago
@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
0.0.1
3 years ago