Warnings when parsing/inlining @rules in css

sn3p commented 5 years ago

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 commented 5 years ago

Related issue in premailer for Ruby: https://github.com/premailer/premailer/issues/9

danschultzer commented 5 years ago

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 :smile:

sn3p commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

sn3p commented 5 years ago

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 commented 5 years ago

v0.3.3 released, thanks!

danschultzer / premailex

Warnings when parsing/inlining @rules in css #28