External classes → auto-populate classes from global stylesheets

[Araminta]

Moving @oppi’s suggestions to this feature request, to keep track of:

@oppi

Would it be possible to re-work the current way of integrating external CSS, so that we don’t have to paste the CSS twice, to have the class suggestions appearing in the appropriate modal?

@oppi

Let me clarify:

I learned to work with external CSS this way

1. Pasting the actual code in a new Global Stylesheet
2. Switch to “External Classes” and paste the code all over again, so the classes get visible in the class selector modal.

I can’t retrace this extra step and guess that you wanted to leave the choice up to the user to have the classes visible in the modal. I think this is a good option to have, but overcomplicated to use in the current state. Especially when adopting the folder logic.

A small UX suggestion for that could be to introduce a toggle button to allow for the automatic population of the class names in the “Class” modal.

Referring to your statement:
Incorporating static files into the system would be quite useful, but I can imagine that his could lead to a lot of effort on your side providing CRUD for these assets. Maybe a more global approach not restricted to user CSS alone would open up cwicly as well. Is there a thread for that already?

Thanks for getting back to me.

[StrangeTech]

As a follow up to this, I like the idea of being able to convert a global stylesheet to an external one, that seems very efficient and easy to manage.

One thing that would not be ideal is if the external stylesheets are enqueued outside of Cwicly and also defined in a Cwicly global stylesheet. So, if the External stylesheets were merged with Global for simplicity we would need to be able to toggle whether the classes are loaded by Cwicly or just selectable in the class selector.

[oppi]

I would love to see not only classes being autopopulated in the selector, but custom properties in the CSS as well. And therefore a whitelist of selectors could be set to scan for those CSS variables e.g. “:root”