@import paths in CSS not being handled correctly

[MokoJumbie]

I'm trying to get SiteOptimizer to work with https://github.com/stubbornella/oocss/

I've unpacked that distribution to an'oocss' directory in my web root and am calling SmartOptimizer thus:

<link rel="stylesheet" href="[[!SmartOptimizer? &files=`oocss/all.css`]]" media="all">

and while the initial file is being linked to correctly, the paths of the @import statements it contains are being re-written as absolute server paths:

@import "/Users/name/projects/sitename/oocss/core/core.css"; @import "/Users/name/projects/sitename/oocss/plugins/plugins.css";

It appears this is not unique to my situation. It's been reported at: http://forums.modx.com/thread/72679/support-comments-for-smartoptimizer

[benjamin-vauchel]

Indeed I think path were prepared for embedding even if the functionality was disabled. I fixed it in version 1.0.0-beta2 : http://modx.com/extras/package/smartoptimizer

[MokoJumbie]

Thanks, but after updating, I am still getting the same behaviour as previously reported.

[benjamin-vauchel]

Did you try to clear the cache ?

[benjamin-vauchel]

It should works with relative URLs too. SmartOptimizer converts relative URLs to absolute to prevent break links during concatenation of multiple css files.

@Chrisissorry : Do you have the same issue ?

@MokoJumbie : I tried with MODx Revo 2.2 and oocss and it works. Is it work for you now ?

[Chrisissorry]

My include looks like this:

background: url('../images/image.png');

SO will make it:

background: url('/var/www/html/projectname/../image/image.png');

Does not seem to generate the correct paths as this is the base path instead of the assets URL.

Settings:

I've set base_dir explicitly as my project is in a subfolder. But instead of giving the full path to my installation, I had to leave out the subfolder. Means, this worked: /var/www/html/projectname/, this not /var/www/html/projectname/modx_folder/

Running on MODX 2.2

[benjamin-vauchel]

Did you install the last version of SmartOptimizer (ie 1.0.0-beta2) ?

[MokoJumbie]

Okay, I am running Revo 2.2-pl2 with SmartOptimizer 1.0.0-beta2, and cleared my cache.

I am not having paths (such as background images) rewritten in my CSS files as Chrisissorry is having, and it seems the @import paths are no longer being rewritten either.

However, the files referenced by the @import statements are not being concatenated. Am I incorrect in assuming that this should be working? If I enable embedding then the imported CSS files appear to be added as a data URI as intended, but the results are inconsistent. Not ALL of the files appear to be embedded and I can't determine what's causing it. Incidentally, one @import statement in particular is not being embedded...

from a file located in '/oocss/core/: @import url("module/mod_skins.css"); is being rewritten as: @import "/oocss/core/module/mod_skins.css"; ...which is the correct path, but all the other @import statements in that file are being correctly converted to data URIs.

Additionally, the connector gives an error of "File is out of base directory" when I feed it more than one file.

If you download the OOCSS distribution from the link in my first post you will be able to compare your findings with mine. I'm curious to know how they differ. It might be a good test suite for the addon if you don't already have one.

[benjamin-vauchel]

Indeed SmartOptimizer don't concatenate imported CSS files. You can try less.app on Mac to concatenate them ( and do much more with CSS ...) :

• less.app : http://incident57.com/less/
• less : http://lesscss.org/

Besides, the embed max size is set to 5120 octets by default that's why SmartOptimizer don't embed mod_skins.css. You can change this this value in SmartOptimizer settings.

Finally, you can concatenate multiple CSS files only if they are in the same directory. For example :

[[SmartOptimizer? &files=oocss/core/core.css,content.css]]

[MokoJumbie]

Thanks for clarifying that for me. It wasn't clear from the docs.

Did you deliberately omit that feature? Because it looks like you are halfway there with the Data URI embedding. I am sure I would not be the only person to find that to be a useful feature.

As for LESS, I have been looking at either that or SCSS/Compass for a while but would need a way to automate the building of CSS from source. I'm leaning towards using LESSPHP. A discussion on the MODx forums (http://forums.modx.com/?action=thread&thread=31404) includes a snippet which will build the CSS files on the server side. That's what I'm going to focus on at the moment.

Do you think it would be within the scope of this project to include that functionality? At the very least, there is a lot of potential for overlap between the projects.

[yogoo]

@MokoJumbie: there's a handful of apps to compile less files for you. I'm using CodeKit, it compiles/minifies/concatenates automatically whenever I save a css/js file.

Mac: Less.app, CodeKit Mac, Win, Linux: Simpless Build on Adobe Air: Crunch