rvm_css (v1.2)

ruud · 2011-12-19 14:22:34

LESS support added in version 0.8. It does require you to install the less.inc.php file manually (unless someone puts it into a separate plugin. rvm_css simply checks if the lessc class exists and uses it if it does), which makes it easier to keep that file up-to-date without me having to keep track of updates (because I don’t use LESS myself).

mrdale · 2011-12-19 18:30:02

Awesome!

The parser is a bit touchy about valid markup, so it’ll vomit on you if you’re code isn’t clean. Also, at this point it doesn’t preserve comments. I’m looking into it.

FYI: The cheap and nasty way to active less is to hack the entire phpless class (minus the php line of course) into rvm css.

ruud · 2011-12-19 18:34:25

^^ yes, that works, but including PHP code is faster than using ‘eval’ to load a plugin, I think, especially if you’re using some kind of op-code cache.

joebaich · 2011-12-19 18:45:51

Yes, it’s awesome! I have given it a run around an existing site’s CSS as much as I dare. I noted the non preservation of comments and see that is an intended outcome. I did get an exception when saving/processing one file but it is an IE6 hack comprised only a bunch of MS filters and it was a product of the lessc class. Thanks again Mr Dale and Ruud.

joebaich · 2011-12-20 05:04:41

There is a difficulty with handling less file imports, for instance
import 'reset.less';
import 'grid.less'; in the default style (less) file in the Textpattern interface.

From the lessphp documentation

Multiple LESS files can be compiled into a single CSS file by using the @import statement. Be careful, the LESS import statement shares syntax with the CSS import statement. If the file being imported ends in a .less extension, or no extension, then it is treated as a LESS import. Otherwise it is left alone and outputted directly.

The plugin generates files with a .css extension and so there is no ability to parse and outputting css from the less code in imported files.

ruud · 2011-12-20 13:00:43

joebaich wrote:

The plugin generates files with a .css extension and so there is no ability to parse and outputting css from the less code in imported files.

Right, because the static files don’t contain any LESS code, just plain CSS.

joebaich · 2011-12-20 14:50:13

ruud wrote:

Right, because the static files don’t contain any LESS code, just plain CSS.

Yes, the static files produced by the plug-in contain only plain CSS, but to use the full power of LESS one needs to have a static files with a LESS extension (or no extension). Importing supporting CSS static files (e.g. grid.css) into a main CSS static file (e.g. default.css) after they have been individually processed by less.php isn’t the same thing at all. One great strength of LESS is that an imported LESS file can contain a generic calculating mechanism which operates on a set of particular variables contained in the main LESS file. So ‘imported grid.less’ can contain a mathematical expression of the CSS grid which when taken in conjunction with the relevant variables in default.less by less.php will produce default.css with a precise statement of the desired columns CSS without carrying the ‘calculator’ or ‘grid tables’ with it. This is well explained on the Sematic.gs web site.

This does make things more complex for the plug-in doesn’t it?

Last edited by joebaich (2011-12-20 14:53:37)

ruud · 2011-12-20 15:25:22

If the plugin creates not just a static file default.css (plain CSS), but also default.less (original LESS code), would that solve the problem? Note that the goal of this is still to serve pure CSS to the visitor, not LESS code, the .less file would only be used by the lessphp compiler (assuming it can use these files).

Last edited by ruud (2011-12-20 15:40:26)

joebaich · 2011-12-20 15:53:32

I think it probably would. The espoused method using LESS.js and its imitators is to have a LESS files folder and a CSS files folder at the ‘same level’ (e.g. …/styles/less/ and ../styles/css) and it ‘finds’ them. Although that’s a neater arrangement for humans I don’t think having the corresponding LESS and CSS files in the same folder would be a problem for less.php.

ruud · 2011-12-20 16:11:28

Joe, please try the plugin version I just uploaded (0.9) and let me know if that solves the problem.
Just tried it myself. Seems to work, although you must import using absolute paths.

mrdale · 2011-12-20 16:38:46

Ruud> Just wanted to say thanks again for less support (pun intended).

Can you see any way to bend that library to allow comments to get through? My site editing workflow is basically to make css edits with live preview using “edit-css” with Chris Pederick’s “Web Developer” firefox plugin. Then copy/paste to TXPs Style page. Preserving comments is not possible with that little round trip.

jakob · 2011-12-20 16:51:30

My site editing workflow is basically to make css edits with live preview using “edit-css” with Chris Pederick’s “Web Developer” firefox plugin. Then copy/paste to TXPs Style page. Preserving comments is not possible with that little round trip.

I do something similar with CSSedit (now Espresso 2) and you can work with comments without any problems, plus its not as fragile as working with the webdev plugin (got fed up with losing my work after inadvertently refreshing).

How do you integrate using LESS into that workflow? I’m not such a CSS guru that I can write error-free css onto a blank document – I need to see the page from time to time. Or does less.js allow you to edit your less code and see a live preview at the same time?

joebaich · 2011-12-20 16:51:51

It seem to work Ruud. the ‘Import’ files get processed. However, on my trial site I am not getting the results I expected and will have to investigate. It may be an error in one of the LESS files I dragged across. I’ll get back to you.

Added later It looks as though less.php does not emulate LESS.js exactly. In this instance the example CSS statements produced by LESS.js are expressed as a value in percent (56.7%) as intended. The same lines processed by less.php renders the same number in pixels (56.7px). I think that the revised plug-in is doing it’s thing correctly and that less.php needs some work so that it behaves in the same way as LESS.js.

Even later The problem with expressing calculated width values in pixels when they are intended to be expressed in percentages is a documented less.php issue and there is no indicationI could find that it is being addressed, though it may well be. I hope that it won’t always be a case of less.php running to catch up with LESS.js and never getting close enough.

Last edited by joebaich (2011-12-20 23:29:35)

ruud · 2011-12-20 17:20:07

Version 0.8.2 uploaded (only Dale downloaded the 0.9 version), which automatically translates @import ‘something.less’; into the correct absolute file path. And if parsing the LESS code fails, it doesn’t update the .css file and shows an error at the bottom of the admin side CSS page.

Dale, I don’t want to fork the lessphp library, so if preserving comments is important, ask the person who develops the library to provide a solution.

Pat64 · 2011-12-20 17:33:22

ruud wrote:

LESS support added in version 0.8. It does require you to install the less.inc.php file manually (unless someone puts it into a separate plugin. rvm_css simply checks if the lessc class exists and uses it if it does), which makes it easier to keep that file up-to-date without me having to keep track of updates (because I don’t use LESS myself).

Yeah Man. absolutely fabulous!

Ruud is the Santa Claus of all TXP users :)

I’m going to try this.

Cheers,

Textpattern CMS

Textpattern CMS support forum

#136 2011-12-19 14:22:34

Re: rvm_css (v1.2)

#137 2011-12-19 18:30:02

Re: rvm_css (v1.2)

#138 2011-12-19 18:34:25

Re: rvm_css (v1.2)

#139 2011-12-19 18:45:51

Re: rvm_css (v1.2)

#140 2011-12-20 05:04:41

Re: rvm_css (v1.2)

#141 2011-12-20 13:00:43

Re: rvm_css (v1.2)

#142 2011-12-20 14:50:13

Re: rvm_css (v1.2)

#143 2011-12-20 15:25:22

Re: rvm_css (v1.2)

#144 2011-12-20 15:53:32

Re: rvm_css (v1.2)

#145 2011-12-20 16:11:28

Re: rvm_css (v1.2)

#146 2011-12-20 16:38:46

Re: rvm_css (v1.2)

#147 2011-12-20 16:51:30

Re: rvm_css (v1.2)

#148 2011-12-20 16:51:51

Re: rvm_css (v1.2)

#149 2011-12-20 17:20:07

Re: rvm_css (v1.2)

#150 2011-12-20 17:33:22

Re: rvm_css (v1.2)

Board footer