Stylus: Verhindern, dass Media-Tags Strings interpretieren

Question

Wir haben ein interessantes Dilemma.

Ich habe eine PR offen für die rupture project Namespace die Funktionen, die es exportiert, um einen No-Konfliktmodus hinzuzufügen.

Zuerst werden die Schauspieler

Es gibt zwei Funktionen (oder Mixins), die landscape und portrait benannt sind. Die PR Namespaces sie rupture-landscape und rupture-portrait. Das @media Mixin wird durchgehend verwendet.

Und jetzt die Szene.

Mit einigen der durch Ruptur erzeugten Funktionen wird eine Zeichenkette zur Verwendung mit dem Medien-Tag zusammengestellt. Das Endergebnis sollte eine normale CSS-Medienabfrage sein.

Das Problem liegt mit dem Stift @media Mixin. Es scheint automatisch zu versuchen, die Zeichenfolge zu interpretieren und alle Schlüsselwörter zu erweitern, die möglicherweise in dem Bereich vorhanden sind.

Da sowohl Quer- und Hochformat innerhalb des Bereichs ist, wenn sie nicht nicht-Konflikt-Modus verwenden, wann immer der @media-Tag mit einem composed string und orientation: portrait oder orientation: landscape das Ergebnis wird als Präfix verwendet wird, sowohl die Worte portrait und landscape mit rupture.

Ich habe ein triviales Beispiel mit ein paar Versuchen erstellt, das Problem auf Codepen here zu beheben. Hier

ist der Code auch:

Stylus

$landscape = 'notlandscape' 
$string = "only screen and (orientation landscape)" 
$unquote = unquote($string) 
$s = s($string) 

.foo 
    // this is the main issue 
    @media $string 
    color: blue 
    These two are attempts to fix the issue 
    @media $unquote 
    color: blue 
    @media $s 
    color: blue 

und das kompilierte Ergebnis in CSS

@media only screen and (orientation: 'notlandscape') { 
    .foo { 
    color: #00f; 
    } 
} 
@media only screen and (orientation: 'notlandscape') { 
    .foo { 
    color: #00f; 
    } 
} 
@media only screen and (orientation: 'notlandscape') { 
    .foo { 
    color: #00f; 
    } 
} 

Die tatsächliche gewünschte Ausgabe:

@media only screen and (orientation: landscape) { 
    .foo { 
    color: #00f; 
    } 
} 

Gibt es Weg um dieses Verhalten zu verhindern oder zu umgehen?

Answer 1

Sie können versuchen interpolation. Die referenzierte @media Seite hat auch einen Abschnitt über Interpolations and variables, der mehr Informationen und Beispiele zur Verfügung stellen wird.

landscape = 'notlandscape' 
$string = "only screen and (orientation landscape)" 

.foo 
    @media ({$string}) 
    color: blue 

Live @codepen

Parenthesis sind hier unerlässlich. So ist es nicht genau gewünschte Ausgabe, aber es ist immer noch gültig CSS. Wie man das vermeidet (oder wenn es nötig ist), hängt vom Anwendungsfall ab. Eine Idee:

landscape = 'notlandscape' 
$string = "orientation: landscape" 

.foo 
    @media only screen and ({$string}) 
    color: blue 

Live @codepen