Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom properties cannot be set in @keyframe rules #2399

Closed
sorvell opened this issue Sep 3, 2015 · 5 comments · Fixed by #3163
Closed

Custom properties cannot be set in @keyframe rules #2399

sorvell opened this issue Sep 3, 2015 · 5 comments · Fixed by #3163
Assignees
Labels

Comments

@sorvell
Copy link
Contributor

sorvell commented Sep 3, 2015

Polymer's property system currently does not allow properties to be used within @Keyframe rules. These rules are ignored right now because they do not require selector modification. The custom property system should be made to account for this and allow properties to be consumed in @Keyframe rules.

Simple repro: http://jsbin.com/mopuwe/edit?html,output

@notwaldorf
Copy link
Contributor

Note for future-Monica and future-Steve: when this is resolved, we can fix PolymerElements/paper-checkbox#59 (/cc @samccone)

@samccone
Copy link
Contributor

🙇 🎳

@traviskaufman
Copy link

bump. This is blocking me from a paper-progress revamp.

@traviskaufman
Copy link

} else if (node.type === this.ruleTypes.KEYFRAMES_RULE ||
node.type === this.ruleTypes.MIXIN_RULE) {
skipRules = true;

What the reasoning for skipRule = true when the style is a keyframe rule? No support yet for parsing keyframe blocks?

@cdata
Copy link
Contributor

cdata commented Dec 5, 2015

@traviskaufman Currently the parser is not distinguishing between keyframes such as

@keyframes foo {
  /** Keyframe of the foo animation **/
  from {
    left: 0px;
  }
}

and standard selectors such as:

@media all {
  /** Selector that matches <from> elements **/
  from {
    left: 0px;
  }
}

the side effect of which is that a keyframe will be transformed into something appropriate for a selector, but inappropriate for a keyframe block, such as:

@keyframes foo {
  /** Keyframe of the foo animation **/
  from:not([style-scope]):not(.style-scope) {
    left: 0px;
  }
}

I'm investigating a potential quick fix to address this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants