Possible to add support for CSS3 grammar in the CSS lexer and parser?

[yasoob]

Hi!

Wonderful job with the CSS lexer and parser. I was looking for something similar for Elixir/Erlang and I fortunately came across them in Zotonic. I was able to use the lexer and parser via Elixir just fine but there are some issues. It doesn't currently support CSS3. For instance, this CSS is not correctly parsed:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

This results in the following error:

iex(72)> css = ~S"""
...(72)> @media only screen and (max-width: 600px) {
...(72)>   body {
...(72)>     background-color: lightblue;
...(72)>   }
...(72)> }
...(72)> """
"@media only screen and (max-width: 600px) {\n  body {\n    background-color: lightblue;\n  }\n}\n"
iex(73)> :z_css.parse(css)
{:error, {1, :z_css_parser, [~c"syntax error before: ", [~c"\"screen\""]]}}

My regex is not good enough for me to go about supporting it myself. So I thought maybe I can ask you if this is something you guys ever thought about including? It would be amazing if this is supported.

[DorienD]

Just out of curiosity what use case do you have for using the keyword "only" in your media query?

[yasoob]

This was just an example expression to showcase a scenario that is not covered by the current parser. The same happens with @keyframes. I am working on creating an email validator that also matches against CSS rules and declarations and figures out if they can be used in emails or not. For HTML parsing I can make use of mochiweb_html but I wasn't able to find a library/module that supports CSS3 parsing and hence I turned to Zotonic in my research.

An example of a similar tool is here: VMail

Let me know if this helps :)

Also, I am still fairly new to leex based parsers and Erlang. My current understanding is that this is also a strict parser. It will not gracefully handle malformed CSS. Is that correct?

[mworrell]

Hi, yes, we use a strict Yecc parser for the css.
This is on purpose, as we want to sanitize the css and throw it away if it is not considered to be safe.
We use it in the HTML sanitizer. Did you also see the HTML parser? That one is an enhanced version of the mochiweb code.

Having a strict parser might mean that we throw css away too often, but in the case of sanitization we considered that a good cause. We also didn't find a non-strict parser, so went with the LALR-1 grammar we use at the moment. It has served us well and is also used by Channel.me for their co-browsing product.

We can augment the grammar a bit with extra CSS3 options. Maybe do it with a case-by-case updates? As I am not sure where to start otherwise. This optional only keyword shouldn't be too hard on the grammar.

[mworrell]

BTW people are using CSS3 for emails? Didn't expect that, with Outlook et al being used so much.