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

How to @import remote css url? #177

Open
NinoFloris opened this issue Feb 2, 2018 · 5 comments
Open

How to @import remote css url? #177

NinoFloris opened this issue Feb 2, 2018 · 5 comments
Labels
package:eyeglass Related to the core eyeglass package in this monorepo.

Comments

@NinoFloris
Copy link

So trying to do this but each normal url gets converted into a local module lookup

@ArmorDarks
Copy link

ArmorDarks commented Feb 2, 2018

I'm not sure there is a way to do this natively, without writing an extension.

In case of node-sass (libsass) you can use importer method to override the behaviour of the imports. There you should check if import looks like remote import, read remote resource with Node and return it to Sass.

@NinoFloris
Copy link
Author

NinoFloris commented Feb 2, 2018

Well I basically want to pass it through as a normal css import, but any syntax I try still gets picked up, other sass compiler plugins don't have this problem so it seems eyeglass is responsible in some way

Sadly node also hangs when I try to add a simple importer, not sure what's going on there.

@NinoFloris
Copy link
Author

NinoFloris commented Feb 2, 2018

Right so, there are quite a few things that go wrong. Eyeglass itself uses importers heavily and wrongly prenormalize urls via uri = URI.web(uri); in ImportUtilities before any of the importers (including your own) get the uri. That URI.web function only handles paths not schemes and so borks full urls.

Next thing that's not really neat is eyeglasses exclusive use of the import callback, this isn't documented anywhere. Node-sass allows you to either call the callback or return the resolved import from your function. Eyeglass however only works on the callback and will happily hang until you've called that, it should allow returns just like node-sass does.

@stefanpenner @chriseppstein would you accept a PR for these changes?

@NinoFloris
Copy link
Author

Alright I've got no clue what I did wrong previous times but doing an @import url('#url#') now just works, it's not ideal as we use a few sass plugins that do actually rely on @import '#url#' not erroring but we'll be able to fix those by preprocessing or something like that.

Eyeglass should at least include something in the docs that using urls in import absolutely requires @import url(...)

@chriseppstein
Copy link
Contributor

From the Sass Reference:

@import takes a filename to import. By default, it looks for a Sass file to import directly,
but there are a few circumstances under which it will compile to a CSS @import rule:

* If the file's extension is .css.
* If the filename begins with http://.
* If the filename is a url().
* If the @import has any media queries.

The aspect of requiring the url() in import statements is a general Sass language feature and it seems like libSass is not properly complying the the reference implementation's behavior.

I'd accept a PR for working around libSass's bugs to at least provide a better error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package:eyeglass Related to the core eyeglass package in this monorepo.
Projects
None yet
Development

No branches or pull requests

3 participants