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

Fix: Unquoted url() data URL values that contain + #2633

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

groenroos
Copy link
Collaborator

What: Closes #2597

Why: A value of url(data:image/svg+xml) without ' or " produces a parse error illegal unary "%", missing left-hand operand - however, unquoted style is acceptable CSS3 syntax, so it should work in Stylus as well.

How: Unlike the error message would suggest, the culprit is not the % in the URL, but instead it's the + in svg+xml - this makes Stylus think it's an expression, like in the bifs.url test:

background url('/images/' + img)
background url(dir'/foo.png')
background url(dir + '/foo.png')
background url(dir + '/' + img)

I modified the the urlchars method in the lexer to accept + as urlchars, but only when the current str begins with a + and letters (otherwise the BIF test above would fail). At this point of parsing, the str would look like +xml,... so it's a fair guess that we have been parsing a data URL mimetype.

However, this methodology isn't completely foolproof (i.e. it doesn't actually check that we're parsing a data: URL specifically), and although all the tests do currently pass, there is a chance this may cause other unintended edge case regressions.

Checklist:

  • Documentation
  • Unit Tests
  • Code complete

@@ -285,7 +285,7 @@ Lexer.prototype = {
urlchars: function() {
var captures;
if (!this.isURL) return;
if (captures = /^[\/:@.;?&=*!,<>#%0-9]+/.exec(this.str)) {
if (captures = /^\+[a-z]+/.exec(this.str) ? /^[\/:@.;?&+=*!,<>#%0-9]+/.exec(this.str) : /^[\/:@.;?&=*!,<>#%0-9]+/.exec(this.str)) {
Copy link
Member

Choose a reason for hiding this comment

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

Can we refact these code to be more clear ? (e.g add comments for Regex

Thanks for your great contribution, i invite you to mangage stylus'issues and pull requests

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'll see what I can do in terms of refactor, regex always looks messy IMO 😄 - but sure, I can definitely add comments!

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.

Can't resolve url(data:image/svg+xml) properly.
2 participants