search

greenlaw110 / greenscript

A tool help web developers manage javascript/css rendering, including minimize and dependence management
42 stars 24 forks source link

Relative URLs in CSS become wrong paths #24

Closed itsadok closed 12 years ago

itsadok commented 12 years ago

If I have a CSS rule like this:

background-image: url('bg.png')

it becomes:

background-image: url(/public/home/itsadok/code/project/test/public/stylesheets/bg.png')

From looking at the code, it seems that the problem is processRelativeUrl_() using the full path of the filename to convert the URLs from relative to absolute, which does not sound like the right way to go about it at all.

This issue seems to match Issue #18 in the symptoms, though I couldn't figure out how 82a4684b9 fixed it. I tried running the jquery-ui project, and the issue seems to persist there. (I had to make some changes to make the sample run under v1.2.3).

greenlaw110 commented 12 years ago

Converting relative url to absolute url is the designed feature. The reason is when css files get merged/compressed, they will be accessed from a different url path, most commonly from /public/stylesheet/xx.css to /public/gs/compressed.css. therefore the relative url pointing to the image will no longer be accessible.

When you say " which does not sound like the right way to go about it at all ", can you be more clear about what problem you've encountered, and what should be the right way to you.

On Tue, Nov 15, 2011 at 12:43 AM, Israel Tsadok < reply@reply.github.com

wrote:

If I have a CSS rule like this:

background-image: url('bg.png')

it becomes:

background-image: url(/public/home/itsadok/code/project/test/public/stylesheets/bg.png')

From looking at the code, it seems that the problem is processRelativeUrl_() using the full path of the filename to convert the URLs from relative to absolute, which does not sound like the right way to go about it at all.

This issue seems to match Issue #18 in the symptoms, though I couldn't figure out how 82a4684b9 fixed it. I tried running the jquery-ui project, and the issue seems to persist there. (I had to make some changes to make the sample run under v1.2.3).

Reply to this email directly or view it on GitHub: https://github.com/greenlaw110/greenscript/issues/24

itsadok commented 12 years ago

I created a pull request that I hope would make things a little more clear. It's possible that I'm just missing something here, but right now I'm having problems with jquery-ui that I wasn't able to resolve without changing your code.

I understand the idea behind converting the relative URL to absolute ones, but the way this is done right now is by using the path of the physical file as it sits on the server.

If I'm understanding this correctly, I can have a rule in the routes file like this:

GET /virtual/   staticDir:physical

and then a request like GET /virtual/style.css would retrieve a file from /physical/style.css, though any relative URL in that file needs to be resolved to /virtual/resource.png. Using the actual path in the filesystem would result in the relative URLs resolving to /physical/resource.png, and would cause 404s.

itsadok commented 12 years ago

Side note: this is all rather theoretical about the "best" way to handle this, but the reason I'm bothering you is because right now the conversion to absolute URLs doesn't work at all.

Like I said in my original comment, the full path in the filesystem gets added to any relative URL, which results in 404. There might be some kind of a difference between Windows and Linux that causes this problem. I'm not sure.

I did notice that you're checking if Fn starts with a slash, which would be true for Linux full paths, but false for Windows full paths.

greenlaw110 commented 12 years ago

Can you show me your route file?

On Tue, Nov 15, 2011 at 1:11 AM, Israel Tsadok < reply@reply.github.com

wrote:

I created a pull request that I hope would make things a little more clear. It's possible that I'm just missing something here, but right now I'm having problems with jquery-ui that I wasn't able to resolve without changing your code.

I understand the idea behind converting the relative URL to absolute ones, but the way this is done right now is by using the path of the physical file as it sits on the server.

If I'm understanding this correctly, I can have a rule in the routes file like this:

GET /virtual/ staticDir:physical

and then a request like GET /virtual/style.css would retrieve a file from /physical/style.css, though any relative URL in that file needs to be resolved to /virtual/resource.png. Using the actual path in the filesystem would result in the relative URLs resolving to /physical/resource.png, and would cause 404s.

Reply to this email directly or view it on GitHub: https://github.com/greenlaw110/greenscript/issues/24#issuecomment-2730757

itsadok commented 12 years ago

I could, but I don't think it would help.

I just reproduced this bug in a few simple steps:

(Using play 1.2.3)

  1. Create a new project by running play new greentest
  2. Edit dependencies.yml and add the line - play -> greenscript 1.2.6k
  3. Edit main.css and add the line body { background-image: url(test.png) }
  4. Run play dependencies
  5. Run play run
  6. Go to http://localhost:9000/public/stylesheets/main.css

On my machine, the rendered page is:

body { background-image: url(/public/home/itsadok/code/greentest/public/stylesheets/test.png) }

If you'd like, I can upload the project to github.

greenlaw110 commented 12 years ago

thanks. I think there must be some configuration problems. Are you able to run the sample application named "jquery-ui" correctly ?

On Tue, Nov 15, 2011 at 1:56 AM, Israel Tsadok < reply@reply.github.com

wrote:

I could, but I don't think it would help.

I just reproduced this bug in a few simple steps:

(Using play 1.2.3)

  1. Create a new project by running play new greentest
  2. Edit dependencies.yml and add the line - play -> greenscript 1.2.6k
  3. Edit main.css and add the line body { background-image: url(test.png) }
  4. Run play dependencies
  5. Run play run
  6. Go to http://localhost:9000/public/stylesheets/main.css

On my machine, the rendered page is:

body { background-image: url(/public/home/itsadok/code/greentest/public/stylesheets/test.png) }

If you'd like, I can upload the project to github.

Reply to this email directly or view it on GitHub: https://github.com/greenlaw110/greenscript/issues/24#issuecomment-2731286

itsadok commented 12 years ago
  1. I just tried to reproduce the bug using the same steps on Windows, and the bug did not happen. This is definitely a Linux thing.
  2. I managed to run the "jquery-ui" sample (under Linux), after editing application.conf and dependencies.yml, since they weren't working with 1.2.3. The behavior was the same - all the urls were mangled.

I'm using Ubuntu 11.10, if that makes any difference.

itsadok commented 12 years ago

Question: in GreenScriptPlugin.java, line 338, where you call min.processStatic(file.getRealFile()), is the File object supposed to contain an absolute path, or a relative path? I'm trying to figure out what's going on there.

itsadok commented 12 years ago

OK, after a little more debugging, I see that the difference between Linux in Windows in this case is in the line

int p = fn.lastIndexOf("/") + 1;

Under Windows, p will always be 0, whereas under Linux it will contain the position of the CSS filename. This means that under Windows, the next line would always assign resourceUrlPath_ to fn, and that becomes the prefix to the files.

greenlaw110 commented 12 years ago

Strange I didn't get the problem with my product server and testing server, both are ubuntu system. See the screen cap here: http://i44.tinypic.com/vrbtht.jpg

greenlaw110 commented 12 years ago

BTW, why did you say "jquery-ui" sample "weren't woking with 1.2.3"? I've just wget a 1.2.3 package, unzip it and install greenscript-1.2.6k and then go to the jquery-ui sample folder type "play run --%prod", back to my front-end browser, it run correctly.

What configuration changes did you made to jquery-ui to get it run in your env?

itsadok commented 12 years ago

Sorry, I guess I was mistaken about the jquery-ui sample not working under 1.2.3. Just tried it now and it worked.

I also noticed that the URL paths looked good when I go to the sample home page. There is a link there to a CSS file under /public/gs/8beb6a4a-b305-4159-82ab-cce683b1dd02.css, and and I look at it, all the URLs have been converted to absolute ones just fine.

However, if I go to [http://localhost:9000/public/jqueryui/css/dot-luv/jquery-ui-1.8.16.custom.css], then the relative URLs all look mangled.

So the workaround now seems obvious: replace this:

#{stylesheet src:'jquery-ui/ui-smoothness/jquery-ui-1.8.16.css' /}

with this:

#{greenscript.css '/public/stylesheets/jquery-ui/ui-smoothness/jquery-ui-1.8.16.custom.css', output: 'all'/}

Just tried it, and it solved my problem.

I would still suggest that this issue should be addressed

greenlaw110 commented 12 years ago

What is this tag: #{stylesheet /} ?

On Tue, Nov 15, 2011 at 7:12 PM, Israel Tsadok < reply@reply.github.com

wrote:

Sorry, I guess I was mistaken about the jquery-ui sample not working under 1.2.3. Just tried it now and it worked.

I also noticed that the URL paths looked good when I go to the sample home page. There is a link there to a CSS file under /public/gs/8beb6a4a-b305-4159-82ab-cce683b1dd02.css, and and I look at it, all the URLs have been converted to absolute ones just fine.

However, if I go to [ http://localhost:9000/public/jqueryui/css/dot-luv/jquery-ui-1.8.16.custom.css], then the relative URLs all look mangled.

So the workaround now seems obvious: replace this:

{stylesheet src:'jquery-ui/ui-smoothness/jquery-ui-1.8.16.css' /}

with this:

{greenscript.css

'/public/stylesheets/jquery-ui/ui-smoothness/jquery-ui-1.8.16.custom.css', output: 'all'/}

Just tried it, and it solved my problem.

I would still suggest that this issue should be addressed

Reply to this email directly or view it on GitHub: https://github.com/greenlaw110/greenscript/issues/24#issuecomment-2742080

greenlaw110 commented 12 years ago

I got it. It's play's built-in tag. So you actually found a problem with GreenScript's static compressing serivce. thanks.

BTW, I suggest you read the GreenScript document and also thishttp://software-lgl.blogspot.com/2011/07/how-greenscript-is-used-incorrectly.htmlhttp://software-lgl.blogspot.com/2011/07/how-greenscript-is-used-incorrectly.htmlblog to help you get better understanding on how to use GreenScript

On Tue, Nov 15, 2011 at 7:46 PM, green greenlaw110@gmail.com wrote:

What is this tag: #{stylesheet /} ?

On Tue, Nov 15, 2011 at 7:12 PM, Israel Tsadok < reply@reply.github.com

wrote:

Sorry, I guess I was mistaken about the jquery-ui sample not working under 1.2.3. Just tried it now and it worked.

I also noticed that the URL paths looked good when I go to the sample home page. There is a link there to a CSS file under /public/gs/8beb6a4a-b305-4159-82ab-cce683b1dd02.css, and and I look at it, all the URLs have been converted to absolute ones just fine.

However, if I go to [ http://localhost:9000/public/jqueryui/css/dot-luv/jquery-ui-1.8.16.custom.css], then the relative URLs all look mangled.

So the workaround now seems obvious: replace this:

{stylesheet src:'jquery-ui/ui-smoothness/jquery-ui-1.8.16.css' /}

with this:

{greenscript.css

'/public/stylesheets/jquery-ui/ui-smoothness/jquery-ui-1.8.16.custom.css', output: 'all'/}

Just tried it, and it solved my problem.

I would still suggest that this issue should be addressed

Reply to this email directly or view it on GitHub: https://github.com/greenlaw110/greenscript/issues/24#issuecomment-2742080

itsadok commented 12 years ago

Thanks. I wanted to use the "Transparent Compression" feature as a starting point, and only tweak it later if I saw the need. I guess I'm better off using the recommended way.

Thanks for taking the time to understand my issue, and thanks for a great plugin!

greenlaw110 commented 12 years ago

Thank you for trying GreenScript and finding and tolerating the issue with it.

BTW, I found the above link to the blog is not correct, here is the right one: http://software-lgl.blogspot.com/2011/07/how-greenscript-is-used-incorrectly.html

On Tue, Nov 15, 2011 at 10:50 PM, Israel Tsadok < reply@reply.github.com

wrote:

Thanks. I wanted to use the "Transparent Compression" feature as a starting point, and only tweak it later if I saw the need. I guess I'm better off using the recommended way.

Thanks for taking the time to understand my issue, and thanks for a great plugin!

Reply to this email directly or view it on GitHub: https://github.com/greenlaw110/greenscript/issues/24#issuecomment-2743756