Version 12 Grid CSS

[mbsouth]

Subject of the issue

After upgrading to the latest version 12, the value specified in the “margin” attribute is applied to CSS variables. The output in the HTML appears to be incorrect:
style="--gs-item-margin-top: 1px; --gs-item-margin-bottom: 1px; --gs-item-margin-right: 1px; --gs-item-margin-left: 1px; --gs-column-width: 33.333333333333336%; --gs-cell-height: 24px; min-height: 48px;"

Expected behavior

style="margin-top:var(--gs-item-margin-top, 1px); margin-bottom:var(--gs-item-margin-bottomm, 1px); margin-right:var(--gs-item-margin-right, 1px); margin-left:var(--gs-item-margin-left, 1px); width:var(--gs-column-width, 33.333333333333336%); height:var(--gs-cell-height, 24px); min-height: 48px;"

or better

style="margin:var(--gs-item-margin-top, 1px) var(--gs-item-margin-right, 1px) var(--gs-item-margin-bottom, 1px); var(--gs-item-margin-left, 1px); width:var(--gs-column-width, 33.333333333333336%); height:var(--gs-cell-height, 24px); min-height: 48px;"

Your environment

Gridstack: v12
WordPress: 7.0.1 - custom plugin
PHP: 8.4
Previous version: v11.5
Browser: Chromium v149, FF v152
OS: Debian 13

Notes

What did I miss? I didn't find any further instructions in the documentation. Is the “margin” parameter obsolete, and should I use only CSS?

Thank you for the great library!

[mbsouth]

I don't think this is possible starting from line 2026 (gridstack.js):

style.setProperty('--gs-item-margin-top', `${this.opts.marginTop}${this.opts.marginUnit}`);
style.setProperty('--gs-item-margin-bottom', `${this.opts.marginBottom}${this.opts.marginUnit}`);
style.setProperty('--gs-item-margin-right', `${this.opts.marginRight}${this.opts.marginUnit}`);
style.setProperty('--gs-item-margin-left', `${this.opts.marginLeft}${this.opts.marginUnit}`);

or this within gridstack-all.js starting from from column 72555 ....

o.setProperty("--gs-item-margin-top", ....

But I could be wrong.