setStyle() expands shorthand CSS properties, causing Style Manager values to lose their preselected state #6816

Not intentional, and not GrapesJS doing it. It's the browser.

setStyle doesn't expand anything. A string goes through ParserHtml.parseStyle (ParserHtml.ts:134) which is a plain split on ; and :, and __normalizeStyle is identity on the base model. So component.getStyle() right after your call should still give you { border: '1px solid #000' }.

The expansion is in the CSS parser, which is the real CSSOM:

const el = document.createElement('style');
el.innerHTML = str;
document.head.appendChild(el);
const sheet = el.sheet;      // BrowserParserCss.ts:277

then it reads back by index:

for (var i = 0, len = stl.length; i < len; i++) {
  const propName = stl[i];   // :102

Numeric iteration of a CSSStyleDeclaration only yields longhands. The browser expanded border on assignment.

So the trigger is a CSS round-trip, not setStyle: project load, editor.setStyle(cssString), a <style> block in components, or avoidInlineStyle pushing it into a CssRule. Compare getStyle() right after setStyle vs after a save/load to see which side you're on.

Style Manager side: border is a composite over width/style/color (PropertyFactory.ts:323). It can read those three back but has no path from border-top etc, so the field goes blank. Recomposing from four sides is ambiguous since they can differ.

If you want shorthands preserved, parserCss is a config hook. ParserCss.ts:31 does parserCss ? parserCss(input, editor!) : BrowserCssParser(input), so swap in postcss.

This is due the the browser’s CSS parser as mentioned, it’s worth noting that there’s already a plugin for replacing it with postCSS which should solve your issue https://github.com/GrapesJS/parser-postcss