How to remove class selector css rule

It makes sense, now I just have to find a way to add this feature to my builder. Thank you @Ju99ernaut!

Hello,

For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be.

Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close this issue).

Thank you for your understanding.

Hi @ltenti-eventboost I'm not sure If I understand exactly where is your issue. When you're editing with componentFirst enabled, the editor applies style changes on a component-specific CSS rule (eg. #cmp-id { color: red }). When you hit the "Sync" button, all the styles are moved to the current class selector and those inside the component-specific rule are removed .selected-class { color: red } #cmp-id {}. So, from what you've described seems legit to me but maybe I'm missing something.

Thanks for reporting this, @ltenti-eventboost.

Great question about [QUESTION] How to remove class selector css rule. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!