Prevent auto CSS cleanup

[glaprida]

I noticed that if I remove from canvas the last instance of an element with a given class, said class is removed from the styles.

If I then want to apply that class to another element, it no longer has its previous styles.

Is there a way to prevent this?

Indeed what I would like is to have a separate view of all the classes as a list, where each of them shows how many times it's being used. There I can clean up manually each styles that shows 0 uses.

[artf]

Try to create a reproducible demo, this is not expected by default

[glaprida]

Sorry, my mistake. It doesn't work as I described it.
Manually applied classes don't get cleaned up when the last component using it is deleted.... BUT

but it does happen with Component classes.
This is what I mean:

export const TitleH1 = {
    isComponent: el => el.tagName === 'H1',
    extend: 'text',
    model: {
      defaults: {
        tagName: 'h1',
        classes: ['heading-1'],  // <-- THIS CLASS, WHICH IS ALSO SET TO PRIVATE IN THE SELECTOR MANAGER
        styles:`
        .heading-1{
          margin:25px 0 15px;
          font-size: 61px;
        }`,
      }
    }
}

Those classes (which are also set as private in my selectorManager) DO get cleaned up when the last instance is deleted.
I have basically one of those classes per component, and it happens to all of them...

Is it because it's associated with a component?
It's not because of being private because I've tried making it not-private and it still happens.

Is there a way to prevent it?

Here's the demo: https://codepen.io/glaprida/pen/vYwraBV
The way to check it is:

• add my custom title component to canvas. (you will see on the style manager that styles are applied correctly)
• inspect element using dev tools, and select the h1 element. On the css inspector you'll the following rule.

• if you click on the <style> on the top right corner, dev tools will take you to the corresponding <style> tag.
• then delete the H1 element, and you'll see how the <style> is cleared as well.

[glaprida]

The problem I'm having with this is that new classes are apparently always added at the bottom.

This way, if I have a Title (with its component class) , add a custom class and then delete the last Title, the <style> containing its component class is deleted.

Then, if I add back again another title, the component class is added back, to the very bottom. If I then apply the same custom class I added before, it has no effect (even though it has not been removed) because it's the same specificity as the component class (0,1,0) but the component class is now further down the cascade.

[artf]

Is it because it's associated with a component?

Correct, component-specific styles are removed once all the instances of that specific type are deleted from the project, which is quite useful to avoid bloating the project with unused styles. More about it here.

Is there a way to prevent it?

You can avoid that automatic cleanup by moving the styles as components:

defaults: {
        tagName: 'h1',
       // ...
      components: '<style>....</style>'
}