Warnings when parsing/inlining @rules in css

[sn3p]

I get these warnings in the console:

14:51:44.763 [warn] Unknown token '@'. Ignoring.
14:51:44.763 [warn] Unknown token '('. Ignoring.
14:51:44.763 [warn] Unknown token ':'. Ignoring.
14:51:44.763 [warn] Unknown token '}'. Ignoring.
14:51:44.804 [warn] Unknown token '@'. Ignoring.
14:51:44.804 [warn] Unknown token '('. Ignoring.
14:51:44.804 [warn] Unknown token ':'. Ignoring.
14:51:44.804 [warn] Unknown token '}'. Ignoring.
14:51:44.831 [warn] Unknown token '@'. Ignoring.
14:51:44.831 [warn] Unknown token '('. Ignoring.
14:51:44.831 [warn] Unknown token ':'. Ignoring.
14:51:44.831 [warn] Unknown token '}'. Ignoring.
14:51:44.845 [warn] Unknown token '@'. Ignoring.
14:51:44.845 [warn] Unknown token '('. Ignoring.
14:51:44.845 [warn] Unknown token ':'. Ignoring.
14:51:44.845 [warn] Unknown token '}'. Ignoring.

When I'm inlining the CSS below:

<style type="text/css">

body {
  width: 100%;
}

@media screen and (max-width: 600px) {
  body {
    width: auto;
  }
}

</style>

When I remove the @media query the warnings are gone.
Doesn't seem to be harmful though, styling seems to be inlined just fine.

[sn3p]

Related issue in premailer for Ruby: premailer/premailer#9

[danschultzer]

Yeah, it's because the regex for the CSSParser doesn't parse @media query correctly. The selector gets parsed into "@media screen and (max-width: 600px)" which the HTML parser can't understand.

I'll see if I can fix this by stripping media queries from parsing. In the end though, regex is wrong and I really should build a proper tokenizer for it 😄

[sn3p]

Maybe it's not a big deal, if it's just warnings and they rules are just skipped. But it would be nice if it's possible to suppress these warnings, as they are polluting the console and test results.

I was fiddling with regex to strip all at-rules before parsing, but not fan of regex in this case either.

[danschultzer]

I've been looking into building a CSS lexer and parser, and checked how Jason decodes JSON.

This ruby library is interesting too: https://github.com/rgrove/crass/blob/master/lib/crass/tokenizer.rb

And there's also this erlang project: https://github.com/acammack-r7/erlang-css

The way Jason does it is probably the better option, but it'll require time to get working. Not sure if I'll have the time available to fix this anytime soon. Any help/suggestions would be welcome.

I wouldn't suppress the warnings just in case there may be some unrelated errors that actually needs fixing. The warnings comes from Floki.

[danschultzer]

I just added #29 to strip media queries with RegEx. If it works, I'll just push that out for now.

[sn3p]

I just added #29 to strip media queries with RegEx. If it works, I'll just push that out for now.

Awesome, looks good!

[danschultzer]

v0.3.3 released, thanks!