So I started. You can read my ideas in the README I added here:
https://github.com/apache/royale-asjs/tree/develop/frameworks/projects/Style > On Feb 10, 2026, at 10:50 AM, Harbs <[email protected]> wrote: > > I’m not sure exactly when I want to start on this, but I expect sometime in > the coming months... > >> On Feb 10, 2026, at 10:13 AM, Yishay Weiss <[email protected]> wrote: >> >> I don't know enough about the compiler part, but there's a chance that with >> the right ICSSImpl you could do that. Or maybe simpler to just add >> 'vertical' on another line and let the bead decide on the default behavior. >> ________________________________ >> From: Harbs <[email protected]> >> Sent: Monday, February 9, 2026 8:15 PM >> To: Apache Royale Development <[email protected]> >> Subject: Re: Utility classes >> >> There’s one thing I’m unsure of: >> >> In “Royale” css, is there any way to declare default properties to be >> assigned to bead classes? >> >> i.e. something like this (ignore the exact syntax) >> >> IBeadLayout: >> ClassReference("org.apache.royale.html.beads.layouts.FlexLayout”),vertical:true; >> >> The idea being it would create a FlexLayout, set the vertical property to >> true and add the bead. >> >> Being able to declare properties on beads would allow reusing beads for >> declaring CSS defaults with slight differences in different cases. >> >>> On Feb 9, 2026, at 8:09 PM, Harbs <[email protected]> wrote: >>> >>> I’ve been spending a lot of time thinking about how to improve styling >>> capabilities in Royale. I have some ideas and I wanted to get others’ >>> thoughts. >>> >>> Styling HTML is probably one of the big pain points. >>> >>> Tailwind CSS has solved the problem very nicely, but there’s some problems >>> with Tailwind: >>> >>> 1. Getting the Tailwind CSS generated for a Royale app. Tailwind is built >>> to read HTML, find the classes and populate CSS at build time. That doesn’t >>> fit perfectly with the Royale build process. >>> 2. You need to “know” Tailwind to specify the utilities. There’s no easy >>> way to get code completion in MXML etc. >>> 3. It doesn’t mesh perfectly with the Royale architecture of getting >>> functionality and styling. >>> >>> I was thinking: >>> >>> The big advantage of Tailwind is that it makes it very easy to compose CSS >>> functionality using a lot of small utility classes and only the classes >>> used will be used in the end result. >>> >>> We have a very similar concept in Royale: Beads. >>> >>> That set me thinking about how we can accomplish the same thing in Royale >>> and here’s what I’m thinking: >>> >>> - I want to create a new component set (I’m thinking of calling it “Style” >>> which would have a large set of styling beads. >>> - Each bead would encapsulate a specific function in CSS. >>> - We already have the ability to add CSS classes dynamically >>> - There would be a global utility class lookup >>> - Each time a utility class (in a bead) is applied, the class will be >>> checked against the lookup and dynamically added if it doesn’t exist. >>> - There would be a standard naming convention for the classes so each >>> utility which does a specific thing would be created exactly once. >>> >>> The end result would be that all the CSS would be completely dynamic and >>> would not be needed to be added to statically loaded CSS files. >>> - The actual code for creating the CSS should be quite concise and barely >>> add weight to the app. >>> - I have no done profiling on dynamically added CSS stylesheets, but I >>> think it’s very performant. >>> - CSS would be lazy loading which could further improve load times. >>> - It should certainly add less weight than constantly declaring inline >>> styling as is currently very common. >>> - Using stylesheets might be more performant. (Not sure about that.) >>> - Using stylesheets give much more flexibility for styling >>> - It addresses pain points like hover behavior. >>> >>> Thoughts? >> >
