CSS modules
2017-09-17
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.
Fixed shortcomings
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 .InlineStyle and .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.
The new approach
All the above problems are fixed with the release v0.9.1. While the .InlineStyle and .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.
App: css-2
The css-2 allows loading CSS code as a CSS module and also serves it to clients.
Example code to store within a css-2 file:
color: red;
background: url(pattern.png);
}
It will be served like this (namespace and version hash will differ):
color: red;
background: url(/domain/relative/path/pattern.png?o1-cache=58757c621f283255d0710a38834c6b9f9592f1be);
}
You can use it in an sjs-3 app like this:
style = response.addCssModule(cssFile)
response.body('<div class="' + style.div + '">foo</div>')
The above will print:
and will add the following to the <head>:
App: css-2-wrapper
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 sjs-3 interpreter.
Read more
Best,