postcss-theme-variables

A postcss plugin to override variables specified in options. An unobtrusive way to create themes.

Usage

yarn add postcss postcss-theme-variables --dev
 
{
  plugins: [require('postcss-theme-variables')(/* options */)]
}
 
# And in your postcss source files, use variables as you wish. 

⚠️ Plugin orders are important in postcss, make sure this plugin comes after any import related plugins(like postcss-easy-import) and before any other plugins(like precss).

Example Usage with postcss-easy-import and precss

// PostCSS config
const themeVariables = require('postcss-theme-variables');
const easyImport = require('postcss-easy-import');
const precss = require('precss');
 
const vars = {
  'padding-size': '10px'
};
 
postcss([
  easyImport({ prefix: '_' }),
  themeVariables({ vars, prefix: '$' }),
 
  // Imports are inlined by postcss-easy-import so precss won't see them
  precss()
])
.process(...);

/* _colors.css */
$padding-size: 5px;
 
/* in.css */
@import './_colors.css';
 
ul li {
  padding: $padding-size;
}

/* out.css */
 
ul li {
  padding: 10px;
}

Example Usage with precss

// PostCSS config
const themeVariables = require('postcss-theme-variables');
const precss = require('precss');
 
const vars = {
  'padding-size': '10px'
};
 
postcss([
  themeVariables({ vars, prefix: '$' }),
  precss({
    import: {
      // This is required to process any variables inside dependencies
      plugins: [themeVariables({ vars })]
    }
  })
])
.process(...);

/* in.css */
$padding-size: 5px;
 
ul li {
  padding: $padding-size;
}

/* out.css */
 
ul li {
  padding: 10px;
}

Options

Option	Type	Description	Default Value	Required
vars	Object	Variables to override	{}	No
prefix	string	Variable prefix, it's '$' if you use SCSS. You can omit prefix in vars map.	''	No

License

MIT license.