This is a developer post. If you are not a developer, you will totally not enjoy it, so, run!
Boomla has had CSS namespacing features built-in for at least 8 years, I can’t tell you the exact date from the tip of my head. While most of the development efforts at Boomla went into building the platform side, the industry has caught up and it became widely known under the name of CSS modules. The idea is the same, with a slightly different implementation.
In the early days, we were not reusing CSS modules across applications. Each app had its own CSS module, and we copy-pasted code between them. Those modules lived in
.RequestStyle files, and the platform matched them to your application at runtime.
There are 3 problems with this approach:
copy-pasting is bad,
if the platform is matching them with apps, it is harder to learn,
you could not centralize and modularize your CSS modules, as you could have only used one CSS module at a time.
All the above problems are fixed with the release v0.9.1. While the
.RequestStyle files still work, it is now not the preferred approach any more. Instead, you should load CSS modules and inject namespaced class names yourself.
A new file method was introduced, named
.CssModule, which returns CSS module information, like classNames and a dependency list.
Two built-in types were added to the system which implmenet that interface.
css-2 allows loading CSS code as a CSS module and also serves it to clients.
Example code to store within a
It will be served like this (namespace and version hash will differ):
You can use it in an
sjs-3 app like this:
The above will print:
and will add the following to the
css-2-wrapper app does almost the same, but instead of loading the CSS from the file’s body, it calls the
.Request method of its only child file, and works with the result as the starting CSS. This allows you to dynamically generate CSS modules.
Ideally, you could use a SASS/SCSS interpreter for this, which Boomla doesn’t have yet. It will in the future, but so long, you can just as well generate CSS code with the