CSSRewriter should support rewriting @import

[humphd]

We support some, but not all the possible ways of doing URL imports in CSS (see https://developer.mozilla.org/en/docs/Web/CSS/@import):

@import url;                      or
@import url list-of-media-queries;

/* examples */
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

The ones that don't use url() aren't going to work with our parsing, see https://github.com/humphd/brackets/blob/bramble/src/filesystem/impls/filer/lib/CSSRewriter.js#L19-L72.

@Pomax, if you get bored, this would be something you could help with.

[Pomax]

http://bramble-staging.s3-website-us-east-1.amazonaws.com/monkeymagic/254/ ?

[humphd]

Someone should confirm whether I'm right or wrong on these, and let's close or fix. @Pomax I can't remix your thing above, so I'm not sure what it is.

[Pomax]

yeah this project no longer seems to exist. Older Thimble maybe?

[aayushsanghavi]

@humphd I tried importing a css file using import url("file name") <name of the element with media query> and it didn't work but when I tried import url("<name_here>") the media query worked.
So I take it that, this is still an issue. Can I work on this?

[humphd]

@aayushsanghavi sure, if you want to give it a try. The code in question is here: https://github.com/mozilla/brackets/blob/master/src/filesystem/impls/filer/lib/CSSRewriter.js#L20-L89. That should find and rewrite all relative file paths in a url(...) to use a Blob URL.

Further, we need to deal with the special case of there being no url( prefix at all, and just the filename in quotes.

[aayushsanghavi]

Yes I tried that too, the @import "file name" and it didn't work.
I'll look into the code soon, Wednesday mostly. Thanks for assigning it.

[aayushsanghavi]

@humphd I started work on this issue and I've added functionality of using @import "cssfile.css". For the others could you suggest to me how I should proceed? I'd like to have a clear picture of the steps I would have to follow in order to implement it.
The way I see it, this will involve use of regex for extracting the names of media-queries and then replacing the content of the media-queries with its actual css content from that file.

[aayushsanghavi]

Sorry, that this issue has been kept waiting for quite some time. I went out of town for a couple of weeks. I just got back 2 days ago so I'll be working on this again. @humphd regarding my previous comment, what do you think is the best way to go ahead with the css imports? What I had suggested earlier looks quite complicated.

[humphd]

You're going to need to do one of two things. Either:

1. Alter the regex var urlRegex = new RegExp('url\\([\\\'\\"]?([^\\\'\\"\\)]+)[\\\'\\"]?\\)', 'g'); to include an optional @import prefix (might be hard or impossible)
2. Write a new regex specifically for the @import <string | url> case, and duplicate this section using this second regex. This would find and accumulate all URLs that are not caught by the first, and you might choose to focus solely on the @import <string> case, since the @import url(...) case will be caught by 1. If it were me, I'd probably do this option.

You don't need to do anything other than that, since the existing code will handle everything else: you just need to find all these URLs.

@Pomax is the best regex'er I know, so you might get his advice here.

[aayushsanghavi]

Thanks @humphd. I'll get onto it then. I'll let you know if I have doubts or if I'm stuck somewhere.