postcss-custom-properties-optimizer

PostCSS plugin for optimize custom properties

Purpose

This plugin can do these things:

• Remove unused custom properties
• Rename custom properties to shorter name (e.g. --color-fg-default to --0)

Because of things above are not safe, use it at your own risk.

Usage

Step 1: Install plugin:

pnpm install --D postcss postcss-custom-properties-optimizer

Step 2: 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 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('postcss-custom-properties-optimizer'),
    require('autoprefixer')
  ]
}

Options

type Options = OptionsWithExclude | OptionsWithInclude;

interface OptionsWithExclude extends OptionsBase {
    /**  Exclude custom properties with this prefix */
    excludePrefix?: string;
    /**  Exclude custom properties in this list */
    exclude?: string[];
}

interface OptionsWithInclude extends OptionsBase {
    /**  Include custom properties with this prefix */
    includePrefix?: string;
    /**  Include custom properties in this list */
    include?: string[];
}

interface OptionsBase {
    /**  Rename custom properties to shorter name (e.g. `--color-fg-default` to `--0`) */
    shortenName?: boolean;
}