[Question]: How update style manager panel using few devices and custom css class

[liudmyla-schastlyvets]

There is a custom class added to simple grapesjs project:

editor.StyleManager.addProperty('settings', {
     name: 'Size*',
     property: 'font-size',
     type: 'select',
     options: [
        { name: 'default', value:'1.5rem'},
        { name: 'small', value:'1rem'},
        { name: 'large', value:'2rem'}],
        defaults: '1.5rem',
   });
const cc = editor.CssComposer;
cc.setRule('.class', { 'font-size': '2rem' });

If there is no devices and user adds the class into the selectors field Settings sector is updated its font-size property correctly.

If there are few devices (one of them set like)

        editor.setDevice('Tablet')

and user adds the class into selectors field Settings sector isn't updated its font-size property correctly.

Could you please help me to solve this problem?

[artf]

Unfortunately, this is due to how getComputedStyle works, which returns resolved values, so by using rem instead of px "confuses" the value. At the moment I don't have any plan on fixing this issue but I'd really appreciate a PR or at least an idea on how to solve this

[artf]

This should be fixed in the latest release https://github.com/artf/grapesjs/releases/tag/v0.18.1