Dès que le vent soufflera, je repartira.
Dès que les vents tourneront, nous nous en allerons.
Girouette is a grammar-based, generative approach to CSS.
CSS libraries like Tailwind and Tachyons provide quantities of predefined class names, hoping to cover most of the needs of their users. But because of combinatory explosion, they cannot provide all the class names users will ever need, in which case the users will have to hack their way with config files and/or handwritten CSS. When releasing for production, the unused CSS classes are removed from the CSS files using tools like PurgeCSS.
Girouette is taking the opposite approach where we first look at which class names are used, and from their names and a grammar associated with some generation rules, the corresponding CSS content is created.
This "on demand" generative approach allows to have any combination of parameters in a CSS class name, while opening the door to the most creative grammars which a human would want to use to communicate its intent.
Girouette is using the awesome Instaparse
library for parsing the class names, and is converting them into the
Garden format.
Its API mainly consists in the function class-name->garden which is pretty explicit.
(class-name->garden "top-42%")
;=> [".top-42\\%" {:top "42%"}]To have the CSS generated automatically during a build, the user needs to extract the
CSS class names used in his project and feed them to Girouette.
How to do this is up to the user, and varies between frontend frameworks. Some class name extractors and a better tooling integration will be added to the project at some point.
Any parameters can be combined in the class names without leaving your usual REPL workflow, as long as a supporting grammar was previously created.
No need to stop what you are doing and to modify some config files just because
mx-13 is not supported by default while mx-12 is.
Any color can be represented directly in class names like rgba-f59d, rgba-f05090d0,
or with any variant applied like rgba-f59d-10%-darker
It is possible to create grammars which support very long class names.
;; Example of class name:
"bg-gradient-to-right-red-orange-yellow-green-blue-purple"
;; Instaparse rule:
"bg-gradient = <'bg-gradient-to-'> gradient-direction (<'-'> color)+
gradient-direction = 'top' | 'right' | 'bottom' | 'left' | angle
color = ...
"We just started! Still a PoC at the moment.
Girouette can use any grammar. To help the community adoption,
an effort is currently being made to create a grammar which is compatible
with the class names used by Tailwind CSS.
Once compatibility is achieved, the goal is to leverage the approach of
Girouette and develop its grammar into a more expressive one.
If enough people are interested (and contribute), we may as well have a
separate grammar which is compatible with Tachyons.
This project is "contribution first", it means that it will only be completed if people contribute.
The initial codebase was made specifically to make contributing easy. Contributors are very welcome.
All contributions you make to this project have to be your own, and in agreement with the license terms below.
This project is distributed under the MIT License, which is available at
https://opensource.org/licenses/MIT
Copyright (c) Vincent Cantin and contributors.