sass/libsass

Validated `or` css-operator usage does not compile in media query when included in SCSS

vadimkantorov opened this issue · 5 comments

vadimkantorov commented

I'm probably missing something simple:

Fails: python3 -c "import sass;print(sass.compile(string='@media (prefers-color-scheme: light) or (min-width: 0px) {}'))"

Passes: python3 -c "import sass;print(sass.compile(string='@media (prefers-color-scheme: light) and (min-width: 0px) {}'))"

Both snippets pass OK in https://jigsaw.w3.org/css-validator

The error message:

Traceback (most recent call last):
  File "<string>", line 1, in <module>
  File "/home/vadimkantorov/.local/lib/python3.10/site-packages/sass.py", line 738, in compile
    raise CompileError(v)
sass.CompileError: Error: Invalid CSS after "@media screen": expected "{", was "or (min-width: 0px)"
        on line 1:8 of stdin
>> @media screen or (min-width: 0px) {}

Version (installed as python3 -m pip install libsass==0.23 --user):

>>> sass.__version__
'0.23.0'

Thank you!

connorskees commented

From what I can tell, support for the keyword "or" is a CSS media query level 4 feature. libsass wouldn't have support for media queries level 4, as Sass (the language) added support several years after libsass was EOL'd. As a workaround you should be able to use commas (e.g. @media (prefers-color-scheme: light), (min-width: 0px) {}).

Also see sass/sass#2538

vadimkantorov commented

Oh, I never realized that libsass was deprecated :(

Are there any plans of Python bindings for the Sass-Dart?

I found it very nice to use SASS without any npm/webdev setup using https://sass.github.io/libsass-python/

As a workaround

Yeah, that's how I worked it around, yes. I managed to make a fully symmetrical auto/light/dark switches using some hacky media queries:

@charset "utf-8";

$colorscheme: "auto" !default;

$falsemediaquery: 1000000px;
$truemediaquery: 0px;

$forcelight: $falsemediaquery;
$forcedark: $falsemediaquery;

@if $colorscheme == "light" {
    $forcelight: $truemediaquery;
    $forcedark: $falsemediaquery;
}
@if $colorscheme == "dark" {
    $forcelight: $falsemediaquery;
    $forcedark: $truemediaquery;
}

@media (prefers-color-scheme: light) and (max-width: $forcedark), (min-width: $forcelight)  {
    :root { /* light mode blah */ }
}

@media (prefers-color-scheme: dark) and (max-width: $forcelight), (min-width: $forcedark) {
    :root { /* dark mode blah */ }
}
vadimkantorov commented

I found https://pypi.org/project/dart-sass/, but not sure if it's officially supported

connorskees commented

That project is not officially supported and hasn't been updated in 2 years. It looks like all it does it call into the precompiled dart-sass binary. You could probably write something similar pretty quickly, depending on your use case.

vadimkantorov commented

Thank you! I created a separate issue in https://github.com/sass/dart-sass !