Minifiziertes CSS wird in den Browsertools vom Firefox im Gegensatz zum WSC 5.5 nicht mehr strukturiert dargestellt

Offenbar kann der CSS-Parser bestimmte Formatierungen nicht korrekt umschreiben, sodass die Zeilenumbrüche bei diesen weiterhin drin stehen. Dies wirkt sich als Abbruchbedingung für die implizite Formatierung in Firefox auf. Andere Browser (u.a. Chrome) weisen keine derartige Abbruchbedingung auf und führen unabhängig davon eine Formatierung durch.

SoftCreatR Nein, das verwechselst du gerade mit den Source-Maps für TypeScript/JavaScript.

Wir setzen für die Formatierung von CSS und TypeScript auf Prettier und dies führt Änderungen am Inhalt von CSS-Variablen durch. Das ist in mehrerlei Hinsicht sehr problematisch, denn Änderungen an den Whitespaces können Auswirkungen auf die Semantik haben. Der von uns genutzte SCSS-Compiler erkennt CSS-Variablen korrekt und schließt dessen Inhalt von einer Verarbeitung aus, weil Änderungen dort per Definition „unsicher“ sind. So kommt es zu den (von uns nicht beabsichtigten) Zeilenumbrüchen, die wiederum vom SCSS-Compiler nicht entfernt werden.

Mangling of Sass Custom Properties or CSS variables · Issue #8604 · prettier/prettier

As a refresher, here's what custom properties are Their syntax is very permissive: CSS custom properties, also known as CSS variables, have an unusual…

github.com

Das Problem ist nicht trivial und ist das Resultat einer Verkettung von Umständen. Prettier verhält sich hier inkorrekt, weil es Änderungen durchführt, die potentiell nicht korrekt sind. Der SCSS-Parser, der am Ende für die Erzeugung der CSS-Datei verantwortlich ist, handelt gleichzeitig sehr defensiv und entfernt damit keine Leerzeilen.

Dessen ungeachtet erachte ich die Abbruchbedingung von Firefox als ziemlich unglücklich. Whitespace in CSS-Variablen hat potentiell eine semantische Bedeutung, die durch eine Umformatierung verloren gehen könnte. Hier bevorzuge ich den Ansatz von Chrome, der zum einen eine deutlich komplexere Entscheidungslogik aufweist und zum anderen auch immer die Möglichkeiten einer erzwungenen Formatierung anbietet. Genau dies fehlt in Firefox, sodass der Nutzer nicht selbst diese Entscheidung treffen kann.

Hallo,

oder anhand eines konkreten Beispiels:

.foo {
  --foo: bar    baz;
}
// ist etwas anderes als:
.foo {
  --foo: bar baz;
}

Siehe: https://jsfiddle.net/tkwdeLys/