@salesforce-ux/postcss-css-variable-value

PostCSS plugin to parse CSS variable `var(...)` functions to their static fallback value.

Usage no npm install needed!

<script type="module">
  import salesforceUxPostcssCssVariableValue from 'https://cdn.skypack.dev/@salesforce-ux/postcss-css-variable-value';
</script>

README

PostCSS CSS variable fallback value Parser

NOTICE: This plugin is provided as-is without support, implied or otherwise.

PostCSS plugin to parse CSS variable var(...) functions to their static fallback value

.foo {
    /* Input example */

    border-radius: var(--sds-g-radius-border, 12%);
}

.foo {
  /* Output example */

  border-radius: 12%;
  border-radius: var(--sds-g-radius-border, 12%);
}

Usage

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-css-variable-value'),
    require('autoprefixer')
  ]
}

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

Options

  • preserve: if set to false the plugin will not preserve the existing declaration and overwrite instead