postcss-theme-variables

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: '
/* _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: '
/* 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.
 }),

  // Imports are inlined by postcss-easy-import so precss won't see them
  precss()
])
.process(...);
__CODE_BLOCK_2__
__CODE_BLOCK_3__
Example Usage with __INLINE_CODE_5__
__CODE_BLOCK_4__
__CODE_BLOCK_5__
__CODE_BLOCK_6__
Options



Option
Type
Description
Default Value
Required



vars
__INLINE_CODE_6__
Variables to override
__INLINE_CODE_7__
No


prefix
__INLINE_CODE_8__
Variable prefix, it's __INLINE_CODE_9__ if you use SCSS. You can omit prefix in vars map.
__INLINE_CODE_10__
No


License
MIT license.
 }),
  precss({
    import: {
      // This is required to process any variables inside dependencies
      plugins: [themeVariables({ vars })]
    }
  })
])
.process(...);

__CODE_BLOCK_5__ __CODE_BLOCK_6__

Options

Option	Type	Description	Default Value	Required
vars	__INLINE_CODE_6__	Variables to override	__INLINE_CODE_7__	No
prefix	__INLINE_CODE_8__	Variable prefix, it's __INLINE_CODE_9__ if you use SCSS. You can omit prefix in vars map.	__INLINE_CODE_10__	No

License

MIT license.

}), // Imports are inlined by postcss-easy-import so precss won't see them precss() ]) .process(...); __CODE_BLOCK_2__ __CODE_BLOCK_3__

Example Usage with __INLINE_CODE_5__

__CODE_BLOCK_4__ __CODE_BLOCK_5__ __CODE_BLOCK_6__

Options

Option	Type	Description	Default Value	Required
vars	__INLINE_CODE_6__	Variables to override	__INLINE_CODE_7__	No
prefix	__INLINE_CODE_8__	Variable prefix, it's __INLINE_CODE_9__ if you use SCSS. You can omit prefix in vars map.	__INLINE_CODE_10__	No

License

MIT license.

if you use SCSS. You can omit prefix in vars map. __INLINE_CODE_10__ No

License

MIT license.

}), // Imports are inlined by postcss-easy-import so precss won't see them precss() ]) .process(...); __CODE_BLOCK_2__ __CODE_BLOCK_3__

Example Usage with __INLINE_CODE_5__

__CODE_BLOCK_4__ __CODE_BLOCK_5__ __CODE_BLOCK_6__

Options

Option	Type	Description	Default Value	Required
vars	__INLINE_CODE_6__	Variables to override	__INLINE_CODE_7__	No
prefix	__INLINE_CODE_8__	Variable prefix, it's __INLINE_CODE_9__ if you use SCSS. You can omit prefix in vars map.	__INLINE_CODE_10__	No

License

MIT license.

}), precss({ import: { // This is required to process any variables inside dependencies plugins: [themeVariables({ vars })] } }) ]) .process(...); __CODE_BLOCK_5__ __CODE_BLOCK_6__

Options

Option	Type	Description	Default Value	Required
vars	__INLINE_CODE_6__	Variables to override	__INLINE_CODE_7__	No
prefix	__INLINE_CODE_8__	Variable prefix, it's __INLINE_CODE_9__ if you use SCSS. You can omit prefix in vars map.	__INLINE_CODE_10__	No

License

MIT license.

}), // Imports are inlined by postcss-easy-import so precss won't see them precss() ]) .process(...); __CODE_BLOCK_2__ __CODE_BLOCK_3__

Example Usage with __INLINE_CODE_5__

__CODE_BLOCK_4__ __CODE_BLOCK_5__ __CODE_BLOCK_6__

Options

Option	Type	Description	Default Value	Required
vars	__INLINE_CODE_6__	Variables to override	__INLINE_CODE_7__	No
prefix	__INLINE_CODE_8__	Variable prefix, it's __INLINE_CODE_9__ if you use SCSS. You can omit prefix in vars map.	__INLINE_CODE_10__	No

License

MIT license.