CSS For Roblox - RSML

Resources Community Resources
, , , ,
1

image
image2548×684 55.5 KB

Docs ​ ​ ​ ​ ​ | ​ ​ ​ ​ ​ Github ​ ​ ​ ​ ​ | ​ ​ ​ ​ ​ Discord

RSML (Roblox Style Management Language) is a text based language for defining Roblox StyleSheets.

Example

image
image1372×392 35.8 KB

Advantages

RSML is text based which means it can be used in workflows involving version control tools such as git.

The language also builds on the foundations made by StyleSheets and includes extra features which StyleSheets don’t natively have, such as: Macros, Static Tokens, and OkLab and Oklch Color Spaces.

Macros (docs)

Macros allow you to insert pre-defined snippets into your code which can help speed up development. For example, the macro below makes it easier to apply a corner radius to a UI element:

image
image1372×436 26.6 KB

RSML has some macros built-in to further aid in speeding up development: Padding, CornerRadius (seen in the example above), and Scale. An up to date list can be found here.

Static Tokens (docs)

Static Tokens are like Tokens except they are resolved during compilation. This means their value can’t be changed dynamically during runtime, but unlike regular tokens mathematical operations can be performed on them and intermediate data types can be assigned to them.

They are written with a $! prefix as follows:

image

OkLab & OkLch Color Spaces (docs)

OkLab and OkLch are color spaces which provide more accurate and perceptually uniform color representation, making them better for accessibility and creating visually appealing designs.

They are currently implemented as intermediate data types as Roblox doesn’t natively support them. This means that they will turn into Color3’s when assigned to Properties or Tokens.

image
image1372×228 23.5 KB

Integrations

There are various ways to use RSML in your workflows. The recommended ways are below, however a full list can be viewed here.

RSML CLI

The best way to use RSML is via the CLI (command line interface). The CLI transforms .rsml files into .model.json files (a format that rojo can read), Installation instructions can be found here.

RSML Luau

You can parse RSML directly in Luau (and Typescript) via the integration found here.

At the time of this post the Luau version doesn’t support Macros, Skin Color Codes, Static Tokens, Some Data Type Modifiers, and OkLch and OKlab Color Spaces.

image
image1372×480 40.8 KB

Syntax Highlighting

The RSML Visual Studio Code Plugin can be used to enable syntax highlighting in .rsml, .luau and .ts files. It can be found here.

27 Likes
2

I really enjoy this! I don’t really like dealing with ui styling so it’s good to have this

1 Like
3

Hey there campbell, I used this instead of my rudimentary stylesheet system and it works great! Thanks for the awesome resource :+1:

2 Likes
4

RSML CLI v0.0.3

Fixes

  • Fixed issue where Vector2int16’s and Vector3int16’s could not be floored, ceiled, rounded, or absoluted.

Changes

  • You can now multiply A Rect with a Vector2 or a Vector2int16.

RSML CLI v0.0.2

Fixes

  • Fixed issue with udim2 when specifying 4 components of the tuple.

RSML CLI v0.0.1

Fixes

  • Fixed issues with certain property modifer tuples not working properly on all types
1 Like
5

RSML CLI v0.0.4

  • Fixed issue with a semi-colon appearing at the start of a selector after parsing a token or a static token.

  • In the udim2 tuple y_offset now defaults to x_offset instead of y_scale * 100.

  • The run command in the RSML CLI has been renamed to watch.

  • added a version command to the RSML CLI.

6

I’ve made a roadmap for this project.

Roadmap

AST (Abstract Syntax Tree) Parser

The AST will allow RSML code to be analyzed. It creates groundwork for more features later on.

Language Server (Relies on the AST)

The language server will analyze your code and warn you of any syntax errors and if a property is assigned the wrong datatype.

Formatter (Relies on the AST)

The formatter will reformat RSML code to conform to a specific style.

7

Thanks! As someone who does work with websites (most notably website design layout), this is a pretty neat system you have going on here. Love it!

1 Like
8

Just what I was thinking about! Love to see it!

2 Likes