#LR16: Stolperfalle Buildscript

Die weitere Entwicklung des Blog-Themes dümpelt so vor sich hin, was vor allem damit zu tun hat, dass ich in den letzten 14 Tagen „mal eben“ eine relativ komplexe, mehrsprachige Website von einem CMS auf das andere migriert habe, u.A. ohne einen Importer für alte Inhalte zu haben. Was man halt so macht.

Was sich getan hat

Mehr Kleinkram – bisschen mehr padding hier, leicht andere font-size da, eine Runde Flexbox im Archiv; nichts, was einen Blogeintrag rechtfertigen würde.

Ich musste leider a11y-toggle wieder entfernen und durch eine eigene JavaScript-Lösung ersetzen, weil es die Vorschau von Artikeln im s9y-Backend insofern kaputt macht, als dass es dort ausgeführt werden möchte, das Ziel dort aber nicht existiert. Das Plugin wirft deshalb nicht nur einen Fehler, es bricht vielmehr die Ausführung des restlichen JS des Theme komplett ab. Ergebnis: Man sieht in der Artikelvorschau im Backend kein Syntax-Highlighting. Pfui.

Nix als Ärger mit dem Buildscript

Vorweg: Ich liebe Buildscripte. Automatisierung von lästigen, langweiligen Aufgaben, die aber einfach gemacht werden müssen und die ich ansonsten gerne mal vergessen würde? Hell, yes! Gleichzeitig aber sage ich aber auch immer wieder:

@czillgens Nur lass Dir nicht einreden, es würde Dir Zeit sparen. Die investierst Du direkt wieder in die Pflege von Build-Skripten etc. ;)

— Matthias Mees (@yellowled) April 6, 2016

Nun stellte ich neulich – in einem anderen Projekt, das aber einen ähnlichen Buildprozess wie das Blog-Theme nutzt – fest, dass für alte Browser, die die Einheit rem nicht beherrschen, teilweise kein Fallback erzeugt wurde. Dafür ist im Buildscript das PostCSS-Plugin pixrem zuständig, also lag die Vermutung nahe, dass vielleicht pixrem kaputt oder falsch konfiguriert sei.

(Was PostCSS ist und was es tut, erkläre ich vielleicht ein anderes Mal.)

Und genau in der Konfiguration lag auch das Problem: Man muss pixrem nämlich ausdrücklich über die Option atRules anweisen, auch innerhalb von @media-Anweisungen ein Fallback in px zu erzeugen; zumindest, wenn man (was ich hier im Blog nicht tue) für die alten IE aus den Media-Queries ein extra Stylesheet erzeugt oder ihnen mit Respond auf die Sprünge hilft. Ansonsten geht pixrem – soweit ich sehe völlig zurecht – davon aus, dass Browser, die @media können, auch rem können. Was eigentlich ziemlich smart ist.