Rebasing functionality very frustrating

[TheSisb]

Hi,

Love this module and use it on our web app. Recently ran npm update and cleancss was updated with the new features. Two of which are the rebasing capability and @import processing.

I quickly found and fixed the @import in our CSS, that was helpful. On the other hand, I can't seem to figure out how to fix the rebasing. The documentation is very unclear on how to specify the path. I tried:
-r css/app
-r "css/app"
-r ["css/app"]
-root (all the above)
etc.

Our folder structure is: /var/www/htdocs/cssSource/app/ for the source and /var/www/css/app for production after minification. I really cannot see how to make this work and I may just downgrade. Everytime I run cleancss it either sets the full path (/var/www/etc...) or keeps "cssSource/app" which is not what I want. This happens because I have an intermediate step where I compress the CSS to the same directory and then clone that directory to the css/app dir. I cannot compress directly into the CSS dir.

Any way to fix this?

[GoalSmashers]

Hi @TheSisb!

As you correctly pointed out the problem lies in cloning the directory. After all clean-css expects the root path to be the final path, and it recalculates urls relatively to it.

But there has to be a solution and we will be happy to help you find it.
Could you paste here the full clean-css command you run and which directory you execute it in?

We'll try to recreate the problem locally.

[TheSisb]

Thanks for the reply.

The command from my makefile is:

(Starting in htdocs/cssSource dir)

    cat app/layout.css          \
        app/UI-elements.css         \
        app/plugins.css         \
        app/notes.css           \
        app/aw/aw.css           \
        > app/combined.css              
    cleancss --s0 -s -o ../css/app/main.css app/combined.css 
    rm app/combined.css 
    cp app/aw/*.png ../css/app/

So "cssSource" and "css" folders are siblings, and all the css go into the "app" dir within them.

Could there just be a parameter to remove rebasing? -r false or something?

[GoalSmashers]

@TheSisb thanks for getting back to us. We'll give it a try shortly as there may be a way to make it work.
Otherwise we'll need a way to disable rebasing. Stay tuned!

[GoalSmashers]

@TheSisb By the last line of your Makefile we assume all images are in app/aw directory, right?
If so could you paste and excerpt from layout.css, notes.css, etc where you point to a png file via url(…)?

[TheSisb]

aw.css is part of a third party library. I don't want to have to modify the image paths inside it so everything remains operational when it updates.
It has relative paths like

#something { 
  background: url(thing.png);
}

So we put it in its own folder and added all the images necessary there as well (counter to our own directory conventions).

All our other CSS files (our own) have absolute paths so they're fine.
Ex: url(/image/app/file.png)

[GoalSmashers]

Since aw.css references images relatively, then by merging all CSS files into app/combined.css you loose reference to these images as they are not in the same path as combined.css.

There are at least two ways of solving this issue:

1. Copy images to ../css/app first, then merge CSS files into ../css/app/combined.css and run clean-css on that file: cleancss --s0 -s -o ../css/app/main.css ../css/app/combined.css
2. Run clean-css twice - once on merged CSS from app directory, then on app/aw.css then merge two minified files into one.

This gets a bit complicated so disabling rebasing altogether could be a better option though.
What do you think?

[TheSisb]

Speed also plays a role in this (grunt watch runs the process on the fly whenever I save a CSS file).

For the first method you propose, I would then have to delete the source files from the destination folder after moving them and combining / compressing. This would require a list of files to delete so that the new compiled.css file is not removed. I'd have to manage that when new files are added. As it stands I want to change my build process to cat *.css so I don't need to worry about managing a list of CSS files at all.

The second way could work, I'd need to test that. It just seems more straightforward to toggle off the rebasing functionality to me.

[GoalSmashers]

It indeed gets a bit cumbersome. Please test #2 if possible but after all we may need a 'no rebasing' option not only for you.

On 23 Oct 2013, at 00:09, TheSisb notifications@github.com wrote:

Speed also plays a role in this (grunt watch runs the process on the fly whenever I save a CSS file).

For the first method you propose, I would then have to delete the source files from the destination folder after moving them and combining / compressing. This would require a list of files to delete so I would need to manage that somehow. As it stands I want to change it to cat *.css so I don't need to worry about managing a list of CSS files for when the list grows.

The second way could work, I'd need to test that. It just seems more straightforward to toggle off the rebasing functionality to me.

—
Reply to this email directly or view it on GitHub.

[TheSisb]

Hey I just tested it and unfortunately it didn't work for me. Paths were still broken no matter how I did it. Only way would be to move it first and that option is not optimal.

[GoalSmashers]

@TheSisb clean-css 1.1.4 is out with --skip-rebase option. Please let us know if it solves the problem.

[TheSisb]

[edit] Works! thanks.

[GoalSmashers]

@TheSisb That's odd. With --skip-rebase clean-css does no transformations except when processing imports but this is desirable since you are inlining one file inside another which may be at a different path.

Does it fail on one file or all images are incorrectly referenced?