Skip to content

Fix Parse error with @-webkit-keyframes at rule#6

Closed
dylanirlbeck wants to merge 2 commits intoastrada:masterfrom
dylanirlbeck:patch-1
Closed

Fix Parse error with @-webkit-keyframes at rule#6
dylanirlbeck wants to merge 2 commits intoastrada:masterfrom
dylanirlbeck:patch-1

Conversation

@dylanirlbeck
Copy link
Copy Markdown
Contributor

@dylanirlbeck dylanirlbeck commented May 21, 2020

@astrada A user for one of my projects reported the parser throwing an error for the following at rule:

@-webkit-keyframes hide {
  from {
    opacity: 0.8;
    visibility: visible;
  }

  to {
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
}

It seems like the change to support this rule would be trivial --- just update the at rule regexp, so I went ahead and made the change.

I edited this file from GH, so let me know if you want me to pull this down and format it. You're also more than welcome to close this PR and implement the changes yourself (and perhaps include a test?). Thanks in advance!

lib/lexer.ml Outdated
let at_rule_without_body = [%sedlex.regexp? "@", ("charset" | "import" | "namespace")]

let nested_at_rule = [%sedlex.regexp? "@", ("document" | "keyframes" | "media" | "supports" | "scope")]
let nested_at_rule = [%sedlex.regexp? "@", ("document" | "keyframes" | "media" | "supports" | "scope" | "-webkit-keyframes" )]
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering, should we add all the possible rules here, or only the most common ones?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a great point! I'll cc @astrada so he sees this comment.

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Feel free to add all the rules you need. When you are done, I will publish a new version on opam.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaku-sei How many possible rules are out there? Adding the most common ones (at least to start) might be our best bet. If you can point me to a list of the ones you think I should add that'd be great!

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I could find a list on mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule but it doesn't contain the vendor prefixes 😕

I tried them all on https://autoprefixer.github.io/:

/* input */
@charset {}
@import {}
@namespace {}
@media {}
@supports {}
@document {}
@page {}
@font-face {}
@keyframes {}
@viewport {}
@counter-style {}
@font-feature-values {}

/* output */
@charset {}
@import {}
@namespace {}
@media {}
@supports {}
@document {}
@page {}
@font-face {}
@-webkit-keyframes {}
@keyframes {}
@-ms-viewport {}
@-o-viewport {}
@viewport {}
@counter-style {}
@font-feature-values {}

Notice that some are still experimental, like document, and viewport.

@dylanirlbeck dylanirlbeck requested a review from astrada May 22, 2020 21:00
@dylanirlbeck
Copy link
Copy Markdown
Contributor Author

dylanirlbeck commented May 22, 2020

@astrada I'm having trouble building the project locally, but I just added the full list of at rules that I'll need for my project (you may want to try and pull down my branch and test on your machine). Let me know if you need anything else from me!

On a side note, I think it'd be a good idea to try and add a CI integration that runs on pull requests, if you have time, but no worries.

EDIT: I can confirm the projects builds! I just had to remove the css-parser.opam file (for reasons I do not know)

@astrada
Copy link
Copy Markdown
Owner

astrada commented May 23, 2020

I've rebased your patch on master reformatted with ocamlformat (I thought that github would consider this PR as merged, but it isn't so). I also cleaned the nested_at_rule list, because there were rules already specified in at_rule_without_body, and, I know it's not clear, but the at-rules that should be inserted there are only a subset of at-rules. Basically there you should insert at-rules whose body has the structure of a stylesheet, E.g.:

@scope div {
  span {
    color: blue;
  }
}

As you can see, inside @scope body, you can specify selectors. Otherwise, rules like

@page {
  margin: 1cm;
}

don't need a special treatment because their body can contain just a set of declaration, and so they are treated as standard rules. If you check the tests, you should see that all the at-rules supported have their own test. The only missing ones are the vendor prefixed rules.

@astrada
Copy link
Copy Markdown
Owner

astrada commented May 23, 2020

I'm publishing the patched version to opam. Let me know if it fixes your issues.

@dylanirlbeck
Copy link
Copy Markdown
Contributor Author

@astrada I guess I'm a bit confused, are the vendor prefixed rules not supposed to be recognized by the parser? I'm worried one of my project's users will run into future issues because not all the vendor prefixes are included in the parser (and thus will throw an error).

Can you elaborate a bit more on the differences between the at rules and how they relate to the parser? I might just be missing something... thanks!

@astrada
Copy link
Copy Markdown
Owner

astrada commented May 24, 2020

No, generally, the parser doesn't care if the rules are prefixed or not. But there are some rules that are implemented with special casing and these rules are the at-rules listed in: at_rule_without_body and nested_at_rule. For example if you need to handle @-moz-keyframes or @-o-keyframes you need to add that to nested_at_rule. if https://autoprefixer.github.io/ is exaustive, only @keyframes and @viewport (that is not a special case) have vendor prefix. I can add them, the only thing is that I don't know if there are other prefixed at-rules used in the wild.

@astrada
Copy link
Copy Markdown
Owner

astrada commented May 24, 2020

So to sum it up, according to https://autoprefixer.github.io/, the only rule that needs special casing is @keyframes. In version 0.2.4, I'm publishing on opam, I've added all the vendor prefixes (-webkit-, -moz-, -o-, -ms-).

@dylanirlbeck
Copy link
Copy Markdown
Contributor Author

@astrada Gotcha, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants