CSS Var Expander for Bricks

A WordPress plugin for Bricks Builder that auto-expands CSS variables in input fields and code editor. This plugin only works with Bricks Builder.

Installation

1. Upload the plugin as usual.
2. Activate the plugin through the Plugins screen (Plugins > Installed Plugins).
3. Go to Settings > CSS Var Expander to enable the functionality (only works when the Bricks theme is active).

How it works

1. CSS Variable Expansion:

   • When you type a CSS variable shorthand like --foo in a Bricks panel input field or the custom CSS code editor, the plugin automatically converts it to var(--foo).
   • This works when you press the Enter key or the ; (semicolon) key in text input fields within the Bricks panel.
   • In the custom CSS code editor, it expands the variable before inserting a semicolon when you press ;.

2. Mathematical Expression Handling:

   • The plugin detects mathematical expressions (e.g., 100px + 50px, --foo * 2, or --foo / 3) and wraps them in calc() if they are not already wrapped.
   • For example, typing --foo + --bar becomes calc(var(--foo) + var(--bar)), and 100px * --foo becomes calc(100px * var(--foo)).