WCSS: Neuer CSS-Prozessor in womodo

17. Februar 2023

Um CSS in Kundenprojekten zu erzeugen, verwenden wir in womodo derzeit entweder SASS/SCSS oder LESS.

Beide CSS-Prozessoren haben aber leider eine eher mäßige Java-Unterstützung.

SCSS basiert auf Jruby und das Ruby Team hat leider entschieden, den Support für SCSS einzustellen. So können neuere Versionen von Fontawesome-6-SCSS beispielsweise mit womodo bereits nicht mehr verwendet werden. Zudem benötigt der Jruby-SCSS-Prozessor einiges an Resourcen des Servers und ist eher langsam.

Tatsächlich benötigen wir im Produkt und in Projekten nur einen relativ kleinen Subset von SCSS.

Aus diesem Grunde haben wir uns entschlossen, einen eigenen "SCSS-inspired" CSS-Prozessor zu entwickeln, der die wirklich wichtigen Grundfunktionen von SCSS abbildet:

  • Verschachtelte Klassendefinitionen (wie in SCSS)
  • @import anderer Resourcen zur besseren Code-Strukturierung (wie in SCSS)
  • Custom Funktionen (z. B. wga_file_url(...) für den Zugriff auf womodo Images)
  • Variablen per $var syntax (wie in SCSS)
  • @mixin / @include (wie in SCSS)
  • @if / @else / @unless (ähnlich wie in SCSS)

Dieser neue CSS-Prozessor steht damit wirklich unter Kontrolle von Innovation Gate und ist nicht mehr von fremden Bibliotheken abhängig.

Erste Erfahrungen zeigen, daß die meisten bestehenden SCSS Resourcen in Projekten ohne Probleme mit dem neuen Prozessor verwendet werden können. Bestehende Projekt brauchen also nicht oder nur minimal geändert werden.

Der neue Prozessor wird verwendet bei Dateien mit der Extension .wcss (für womodo css). Alles was zum Umstieg auf unseren womodo-CSS-Prozessor notwendig ist, ist also, die .scss Dateien in .wcss Dateien umzubenennen.

Da dieser WCSS-Prozessor keine Ruby-Engine mehr benötigt, ist er wesentlich schneller und resourenschonender als SCSS.

Im  womodo Content Manager der nächsten Version werden wir SCSS komplett durch WCSS ersetzen. Auch weitere Produktelemente wie z. B. Inhaltsmodule werden zukünftig nun WCSS verwenden.

Dabei bleibt die bestehende Unterstützung von SCSS und LESS natürlich Bestandteil von womodo. Niemand ist gezwungen, etwas zu ändern. Intern werden wir aber auf WCSS umstellen.