🔗 Missing a Tool for Importing CSS Classes and Variables from external stylesheets (Duplicate)

[nickdgreen]

Description

I'm just having a play with Elementor V4, and while the new class-based styling is okay, it has a significant drawback for me in that it doesn't "pull in" any custom CSS, and there doesn't appear to be a way to add a custom CSS class to an element. So the "Standard" Custom CSS that I put on all sites, like Font clamp styles, etc., would all have to be added manually on every site unless there is going to be a way to import them. It would be preferable if I could just paste my Custom CSS styles in as I do now, and for those styles to appear in the Style Manager. If this isn't possible, then having gone through the laborious process of manually adding all my Custom CSS into the Style Manager (through a page), there must be an option for users to export the styles (json file) that can be imported into another site.

Agreement

• I confirm I have read and followed the Editor V4 Discussion Form guidelines, and agree this discussion may be closed without warning.

[charles-emes]

So I have been doing exactly this - exploring how I can import my variables and existing classes from a CSS file into the Editor v4 because I am sure as hell not going to do it manually. I have a solution with a lot of help from Chat GPT. What it does is to convert variables and classes into the JSON format the Elementor developers are using. It then (wait for the howl of disapproval...) updates the database. Let me explain. My workflow is I have a CSS Framework (I'm using Core Framework) which holds all the classes and variables that I reuse on projects. For a new project, I modify the colors and then copy out the CSS. Until now this has been copied into Additional CSS in either Site Settings or the theme. This is always done right at the start - before any pages are created and is a one-off process. Adding the variables is pretty straightforward as the JSON schema is pretty simple, though of course, incomplete because they have yet to support more than just color and font variables. The classes are more difficult and there are restrictions - some of which are because they aren't implemented yet. Things you can't import are: # classes that target an id , classes that target an element like body or H1, psuedo classes like ::before and ::after, media queries. My CSS avoids the shorthand properties like border: 5px solid red; and background and I changed them to be explicit i.e. border-color: var(--primary); border-width: var( --border-width-s) etc. Hover, focus and active are supported provided they immediately follow the class (normal practice?). I am holding off from shadow and gradients to see how they are implemented with variables. The point of starting this journey now is I want to use Editor v4, and I am willing to amend my CSS so its easy to import. I have over 100 classes imported now on my development machine and it all works fine. It's obviously a work in progress. The JSON schema is going to change but I have learnt alot and think its worth pursuing. I can't believe we are the only two developers who think the Import of CSS is important - I created a discussion on the topic but it's only got 3 votes!

[charles-emes]

I left out the best feature - it organises all the classes in alphabetical order. How cool is that? BTW you mentioned clamp for font-size and other properties - that already works. I can import this class which will size the font nicely for different screen widths provided I put the variables in Advanced CSS either in the theme or Site Settings.
.title-4xl {
font-size: var(--title-4xl);
line-height: var(--line-height-xs);
color: var(--primary-d-3); // gets mapped to a global color variable if there is one
}
Once the Elementor team have implemented variables for size, it will be easy to add the clamp variables into their global variables.
Going back to the shorthand properties like border - it you see how border is currently implemented in the UI, I really don't think it will be possible to implement this class using the Editor v4 interface as it currently stands
.border-m {
border: var(--border-m);
}
where the variable is declared as
--border-m: solid 1px #CCCCCC
It's more likely you will need separate variables for each part - but that's not a bad thing anyway. Then again this could change in a future release.

[nicholaszein]

Hey @nickdgreen! Thank you for taking the time to share your feedback here, and for the additional tests and detailed investigation.

I'll answer you appropriately soon, especially regarding Custom CSS.

Kind regards 🙏

[charles-emes]

There is a 50 class limit on the global class manager. That's a severe limitation for me - many of my classes are generated by my CSS Framework tool. I have 8 classes for title sizes, 8 for padding, 8 for margin and so on. "Just add what you need" is not an option - I need the ability to make adjustments by switching from one class to another to fine tune the layout

[ellipertzov]

Hi @charles-emes we updated the limit to 100 classes at the moment. i am really interested to hear from you how many classes you think you going to have in the website you build :)

[charles-emes]

I am using utility classes in Core Framework and have 73 so far. I have been using them with the existing editor for the last two years. I have switched off a lot of Core Framework classes so I would imagine other CF users will have more than that. I think the limit of 100 will be exceeded. I have written a code snippet to import variables and classes into Elementor global variables and classes. https://xms-services.com/resources/ it is still in beta!

[charles-emes]

Hi @nickdgreen
I now have a Code Snippet that will import CSS into Editor v4 global variables and classes. It's available here Note there are limitations which I have documented. It will do until Core Framework create their add-on but it will be awhile because they have only just started working on it.

[Anserics]

Really would be a great feuture!