[Plugin: WP-LESS] I really can't get this plugin to work

I found a work-around for my main issue, background images in CSS.

1.) First I am setting a variable with the absolut path to the image folder, like this:

@base-url: “https://website-name.com/wordpress/wp-content/themes/theme-name”;

2.) In your CSS use this variable to reference images:

background-image: url(“@{base-url}/images/bg.png”);

—

Still not really happy that the parsed CSS file ends up in the WP upload folder, but the above seems to work alright.

Any new hints how to parse the CSS file directly into the WP theme directory appreciated.

That’s my solution also..
Regrading the output folder, I think oncletom has a point regarding the folder permissions on the server and where to write files to, but what you can do is after finishing the development on the site is just copy the parsed file, move it into your theme and just include it as any other css file the normal way.

OK, I understand the concern.

However, if you have an url('images/blah.png'), the replacement takes care of all this.
If you look at your compiled CSS file, resources are called with absolute URL.
If it’s not properly done, it may be a bug and in this case, I would fix it.

Your themes and plugins folders don’t always have write permission access. And indeed, you should never rely on this. WordPress has a writeable directory which is made for that.

@oncletom:
Thanks, I understand. It seems to be a WordPress folder permission issue then.
Ideally however the bootstrap file should take care of that. Would it be possible to achieve a permission change to the current theme directory with the bootstrap file?

It seems impossible to package a WP theme with the bootstrap file for distribution/sale, unless you uses a variable for the CSS image path. Also this fact need to be mentioned in the documentation.

It does interrupt the normal WP work-flow a little where I would expect all project files in the theme folder.

@obvio:
It happens so often that a website is *not* done (we you think it`s done) and one has to go back and fix CSS. So I would not change the setup even on a client server.
It`s unfortunate that we need this setup and parse into the upload folder first.

Also when backing up an updated theme it`s easy to forget the parsed CSS file in the upload folder (ok, one still has the original .less file, but it feels not quite right somehow).

However, you can alter the upload dir (file access) and upload uri (file URI for browser) through the WPPluginToolkitConfiguration class.

Example:

...
$WPLessPlugin->getConfiguration()->setUploadUrl(get_template_directory_uri());
$WPLessPlugin->getConfiguration()->setUploadDir(get_template_directory());
$WPLessPlugin->dispatch();

Can you write here example of URL in stylesheet that are failing?

In one of my LESS stylesheet, I have this:

.rss{
  a{
    background: url('images/feed-readers.png') no-repeat left center;
  }
}

And the path is properly replaced, even if the resulting CSS file is located in wp-content/uploads folder.

Keep me in touch.

@oncletom:

In which file can I change the WPPluginToolkitConfiguration class?

Would I replace this..:
$WPLessPlugin->getConfiguration()->setUploadUrl(get_template_directory_uri());

..with this?:
$WPLessPlugin->getConfiguration()->setUploadDir(get_template_directory());

—

Strange, are you saying the plugin should automatically create the absolute path for CSS images? It doesn`t for me.

Something like this would still look the same after parsing:

background: url('images/feed-readers.png') no-repeat left center;

I have to use a variable to add the absolute path as explainded above:

@base-url: "https://website-name.com/wordpress/wp-content/themes/theme-name";

background-image: url("@{base-url}/images/bg.png");

You can do this change in any theme you bootstrap the plugin from.
The explained need is quite specific to you, so I won’t change the usual behavior only for that.

If you want to bundle wp-less in your theme, follow the steps in the boostrap-for-theme .php file. Basically it is:

1. drop wp-less in your theme (so as you have wp-content/themes/your-theme/wp-less
2. include the bootstrap file in your theme functions.php file
3. register the hooks to let the plugin do silently the work with your LESS files (through $WPLessPlugin->dispatch();)

Usually you include the bootstraper like this:

require dirname( __FILE__ ) . '/wp-less/bootstrap-for-theme.php';
$WPLessPlugin->dispatch( );

In your case, it should looks like this:

require dirname( __FILE__ ) . '/wp-less/bootstrap-for-theme.php';
$WPLessPlugin->getConfiguration()->setUploadUrl(get_template_directory_uri());
$WPLessPlugin->getConfiguration()->setUploadDir(get_template_directory());
$WPLessPlugin->dispatch();

Not so hard.

Anyway, I’ll look at your problem because yes, relative URL should be replaced properly.

Thanks again for your explanation, will try to figure this out.

Yes, there seems to be still a bug that relative paths in CSS are not replaced with absolute ones, which you said would be the default behavior.
Using a separate variable for the absolute path is a work-around.

Could you please copy/paste me your stylesheets properties causing this problem?

Because on my side I can’t reproduce it.

Thanks.

Basically any incidence where I reference an image in CSS i.e.

html {
	height: 100%;
	margin: 0 auto 1px auto;
	overflow-y: scroll;
	background: url(images/background_splatter.gif) repeat top left;
}

The parsed CSS looks the same.

However I noticed CSS images in stylesheets which are included via @import have the correctly added absolute path.

Okay I figured out the problem.

It should be fixed in the next release (1.4.1).

Thanks for reporting the issue!

Thanks, very much appreciated.

One more issue, when changing CSS in an @import stylesheet (a .less stylesheet) the changes are not updated in the parsed CSS somehow.

Each time I make a change in a @imported stylesheet.less I need to unlink it from the main stylesheet (i.e. delete the @import rule) and add it again afterwards.

Not sure if this is an issue of the plugins too.
Thanks again.

Hello,

I can’t check imported files without opening recursively every less files… which would be terrible for performances.

In case you are in a development process, the 1.4.2 version of the plugin now recompiles every time when the WP_DEBUG constant is set to true.

Yes, I am in development process and need to preview on-the-fly CSS/LESS changes.

Where can I set the WP_DEBUG variable?

Also:
– Where do I activate/deactivate minification/gzip?
– All comments are removed from the parsed CSS, I would like to keep /* comments */. As per LESS docs only //comments should be removed from output.