ro-css
A CSS Parser made for Roblox that exposes the properties of UI elements to CSS. I made this as a personal project so it may be buggy but if you want to contribute feel free to add a PR on the Github linked below
How to Use
Either copy the source from ro-css.lua or add the toolbox model (RoCSS - Roblox) to your project. Then in a local script require the library and use this piece of code to parse any CSS code:
local module = require(MODULE_LOCATION)
module.ParseCSS(CSS_AS_STRING)
To apply the CSS to UI just add a string attribute called Class to whatever UI element you want (Make sure it’s placed in StarterGUI) and ro-css should automatically apply the CSS to it. For example if you created a CSS block of:
.foobar {
background-color: rgb(1,1,1);
}
ro-css will apply it to any element with the Class “foobar”
Here are the available properties:
{
["anchor-point"] = "AnchorPoint",
["background-color"] = "BackgroundColor3",
["transparency"] = "BackgroundTransparency",
["border-color"] = "BorderColor3",
["border-size"] = "BorderSizePixel",
["position"] = "Position",
["rotation"] = "Rotation",
["size"] = "Size",
["z-index"] = "ZIndex",
["text-color"] = "TextColor3",
["text-size"] = "TextSize",
["text-stroke-color"] = "TextStrokeColor3",
["text-stroke-transparency"] = "TextStrokeTransparency",
["text-transparency"] = "TextTransparency",
["image-color"] = "ImageColor3",
["image-offset"] = "ImageRectOffset",
["image-size"] = "ImageRectSize",
["placeholder-text-color"] = "PlaceholderColor3"
}
There are also functions that can be used for things like colour:
-
rgb(R,G,B)Creates a Color3 from an RGB value -
hsv(H,S,V)Creates a Color3 from an HSV value -
udim(POS, OFFSET)Creates a UDIM -
udim2(XPOS, XOFFSET, YPOS, YOFFSET)Creates a udim2
License
ro-css is licensed under the MIT license which you can read here