SASS/.scss parser cannot parse filter property

Support
#1

Dear Jmix team,

When attempting to style using the CSS ‘filter’ property, the SASS parser throws a CSSParseException. This happens for most of the examples on Mozilla’s page about this property. At least the following structures seem not to be parsed:

  • A filter with arguments
.mydiv {
  filter: grayscale(50%);
}
  • A filter with an external SVG reference
.mydiv {
  filter: url(commonfilters.xml#large-blur);
}
  • A filter with an internal SVG reference
.target {
    filter: url(#c1);
}

The same problem exists in CUBA projects. A workaround is to add these styles in <style> tags inside a HtmlBoxLayout. This circumvents .scss parsing and just serves these styles to the browser, which handles them just fine. This is what we’ve resorted to doing for now. Is this a bug in the SASS parser?

Kind regards,
Pim

#2

Hi,

Unfortunately, SASS compiler can’t parse these CSS structures. You can workaround it using the unquote function, e.g.:

@mixin helium-ext {
  @include helium;

  .my-style {
    filter: grayscale(.5);
  }
}

@function grayscale($value) {
  @return unquote("grayscale(#{$value})");
}

Regards,
Gleb