In den letzten Tagen habe ich meinen Profil-Build-Flow erweitert, und da kam mir der Gedanke, ob man gebündeltes CSS einbinden kann. Hier meine Learnings dazu.

Die Probleme

• CSS in HTML wird umso unübersichtlicher, je größer ein Stylesheet wird.
• Utility-Frameworks wie TailwindCSS erleichtern und beschleunigen das Styling. Ohne diese bastelt man sich seine eigenen Utility-Frameworks, was irgendwie nicht meinem Verständnis von Code-Effizienz entspricht.

Daher hatte ich das Bedürfnis nach SCSS und Frontend-Libraries wie TailwindCSS.

Auf der anderen Seite hoffte ich, dass wenn es so viele Browser-Versionen gibt und Tools, die CSS automatisiert optimieren, vielleicht auch PDFs davon profitieren könnten.

Quasi: Was für den Browser gut ist, sollte auch für das PDF gut sein.

Methode

• CSS mit einem Bundler bundlen.
• Mit DomPDF eine PDF ohne CSS rendern.
• Mit DomPDF eine PDF mit CSS rendern.
• Vergleichen.

Tech Stack

Backend:

• dompdf/dompdf v3.0
• twig/twig

Frontend:

• webpack (symfony/encore)
• postcss (autoprefixer, cssnano, oldi)
• tailwindcss (+daisyui)
• browserslists („ie 6-11“, „Firefox ESR“)

Ergebnis

Es ist okay.

Dateigrößen:

• Ohne CSS: 2,5 kb
• Mit TailwindCSS und DaisyUI: 13,7 kb

Die Dateien werden durch den Stack nicht unnötig aufgebläht.

Ein paar Dinge sehen immer noch schlecht aus:

• Buttons
• Forms
• Gestylte Pseudo-Elemente

Aber ich kann damit arbeiten.

Hier gibt es noch viel Optimierungspotenzial. Zum Beispiel könnte man „oldie“ und „autoprefixer“ rausnehmen und stattdessen „postcss-preset-env“ sehr fein definieren.

Grundsätzlich halte ich es für einen nützlichen Ansatz.

Man könnte nun darüber grübeln ob es ob es möglich und sinnvoll ist, die selben UI-Komponenten für Browser, Mobile, PDF und E-Mails zu nutzen.