So I have been working on a way to take CSS and apply it to Roblox GUIs. After a few days of work I finally got it to work. Example:
How Does it Work
Parsing
It takes in a string (the CSS) and splits it based on the classes used (.foo for example). After it will determine the name of the class (foo in this case) by looping through the letters after “.” adding it to a string until it reaches a “{”. Once it reaches “{”, it will remove the brackets and split the string based on the end of line character “;”. Finally it will split each of the “rules” or lines inside of the brackets by “:” returning the property and value
Generating an Abstract Syntax Tree
Once the CSS has been parsed it will then be added to a table in the format:
{
[class_name] = {{[foo] = 1},{[bar] = rgb(255,255,255)}}
}
Then it will loop through the AST and find any functions such as rgb() or udim2() and convert them into tables representing their values ({"rgb", 255, 255, 255}).
Applying the CSS to the GUIs
The script loops through a given ScreenGUI and finds any GUIObjects (frames, textlabels, etc.). If found it will look for a string attribute called “class”. If a class matches to one found on the AST, it will loop through and apply the properties in that CSS class to the GUI.
If you have any questions or need any clarity let me know. I’m not the greatest at explaining things