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

Is it possible to use eyeglass with named parts of an SVG? #75

Closed
alanhogan opened this issue Nov 3, 2015 · 8 comments
Closed

Is it possible to use eyeglass with named parts of an SVG? #75

alanhogan opened this issue Nov 3, 2015 · 8 comments
Labels
Milestone

Comments

@alanhogan
Copy link
Contributor

With SVG, you can refer to a specific part of it using an id, which ends up looking like url(icons.svg#octogon).

However, this confuses Eyeglass and it says it can't find an asset named icons.svg#octogon

I will work around this by concat-ing the fragment onto the returned URL from asset-file(), but wanted to surface this issue.

@alanhogan
Copy link
Contributor Author

— and ask if there was a recommended way to do this, or if it’s a good potential area for a pull request

@chriseppstein
Copy link
Contributor

This is a bug.

@alanhogan
Copy link
Contributor Author

I tried this as a work-around, since it looked like there was an asset-path() helper available

      background-image: url("#{asset-path('z-editor/assets.svg')}#link");

Unfortunately this didn’t work, and produced this CSS:

.foo {
    background-image: url('asset-path("z-editor/assets.svg")#link'); }

@alanhogan
Copy link
Contributor Author

In case anyone else has this bug in the meantime: I was able to work around it like so:

// work-around for
// https://github.com/sass-eyeglass/eyeglass/issues/75
// TODO: Remove this when that bug is fixed
@function url-append($url-string, $append-string) {
  // note: in Sass, indices start at 1. it's a CSS thing.
  @return str-insert($url-string, $append-string, str-length($url-string));
}

// ...

.foo {
  background-image: url-append(asset-url('z-editor/assets.svg'), "#link");
}

This will compile to:

.foo {
  background-image: url(/agent/assets/z-editor/assets.svg#link); }

@eoneill
Copy link
Contributor

eoneill commented Nov 15, 2015

I have a test case and fix I'll PR once #72 is merged. Thanks for reporting.

@chriseppstein chriseppstein modified the milestone: 1.0 Nov 16, 2015
@chriseppstein
Copy link
Contributor

This is fixed now.

@alanhogan
Copy link
Contributor Author

alanhogan commented Jul 18, 2016

FYI, My above work-around code now seems to be invalid:

Functions may not be defined within control directives or other mixins.

Edit, actually, as posted above, my code works just fine. But it doesn’t if you wrap it in a @if function-exists(...) kind of a deal, as I did in practice

@eoneill
Copy link
Contributor

eoneill commented Jul 19, 2016

@alanhogan this was a change (fix) in libsass. You can't define functions within e.g. @mixin/@if etc. sass/libsass#1550
sass/libsass#1848

That said, you should no longer need a workaround for this as the fix for asset-url(...) is in the latest eyeglass release.

chriseppstein pushed a commit that referenced this issue Jan 29, 2019
Refactor test suite to use broccoli-test-helpers.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants