Hi there,

Thanks for the port of LESS to Drupal, LESS is making my life much nicer. :)

One thing that's hard with LESS is tracking down the source of the style definitions. Something that would make it a little easier is giving the file name something similar to the directory it's in plus the filename. Here's one idea which would replace line 22:

//$output_file = $css_path .'/'. 'less_'. md5_file($base_path . $input_file) .'.css'; // Current way
$output_file = $css_path .'/'. 'less_'. str_replace(array('/', '.less'), array('_', ''), $input_file) .'.css'; // New way

What do you think?

Thanks!
Chris

Comments

corey.aufang’s picture

corey.aufang commented

I was actually thinking about doing something similar.

I'll start working on this soon and get an update in 6.x dev soon.

corey.aufang’s picture

corey.aufang commented
Status: Active » Needs review

I just committed a patch that changes the path to match the original's, but under the less directory.

I did this instead because you could have a folder name that had the character that was used a the delimiter, it could become confusing.

If you look at the path of the compiled filed, you can match it with the source by looking at the folders that are under the files/less directory. The system knows when a file has been changed based on file times now, so it should even be a little (microseconds) faster.

mlncn’s picture

mlncn commented

CSS filenames need to be unique sitewide (see #576448: Use unique filename for CSS files to allow overriding stylesheets from theme), so you could put files directly in the less directory, without nesting the directories. Perhaps the original file path could then be put in as a comment in the first line of the less file?

I would find this easier, but maybe others would not.

corey.aufang’s picture

corey.aufang commented

I don't think there is a conflict. The issue you cited is about about using unique files names for the purpose of theme CSS overrides. The uniqueness of the filename is up to the person that created them.

Currently the preprocess hook that LESS depends on happens before theme CSS overrides.

You can override a parent-theme/module .less file with a .css file, or a parent-theme/module .css file with a .less file, as long as the basename is the same.

The reason that I am putting the files in their normal path but under the files/less directory as opposed to a comment at the top of the file is when your looking at a specific line of code, you don't want to have to scroll to the top of the file and in the process lose your spot. Most places that you would be view the compiled .css file will show the path to the file in a prominent, always visible location.

For example, in Firebug for Firefox, when you are inspecting a element and you see the list of applied styles, it cites a file and line number. If you hover over the filename, it will display the full path in a tooltip.

chrisshattuck’s picture

chrisshattuck commented

This is great, Corey, I'm looking forward to trying this out.

Do you know offhand if there are any LESS settings that will output the line number as a comment to each line of the processed CSS that corresponds to their source the LESS file? The file name will help tremendously, but just curious if there were any settings like this in the preprocessor for development purposes?

Just in case the question sounds wonky, let's say I have a nested css in my LESS:

p {
  a {
    color:brown;
  }
}

And when I'm looking at that a tag in Firebug, I'll see that it corresponds to a line in the preprocessed CSS file:

p a {
  color:brown;
}

If it could read something like:

p a { /* line 4 */
  color:brown;
}

That would just kick ass. The only think that makes using LESS *more* difficult than CSS is tracking down where in the file the definition was made.

But, don't know if this can be done, do you?

Cheers!
Chris

corey.aufang’s picture

corey.aufang commented

I looked and there doesn't appear to be the functionality you are looking for.

Also after thinking about it for a bit, I don't think it would be simple to implement.

For your sample it would be simple, but when you get into more complex statements such as:

@space(@mrgn: 10px) {
  margin: @mrgn;
}

.spacer {
  @space();
}

p {
  h1 {
    .spacer;
  }
}

Which line number would be the appropriate one to use?

I agree that it would be an awesome feature to have, but I think it would be difficult technically to create.

In no way do I want to discourage you from suggesting this to the creator of the lessphp, Leaf Corcoran (leafot@gmail.com). He would have the best idea as to the feasibility and ultimately the one coding it.

corey.aufang’s picture

corey.aufang commented

Has anyone tried the latest dev version? I would like to get some feedback before I release a new version with this change in place.

chrisshattuck’s picture

chrisshattuck commented

I just gave the dev version a run and it looks great. I turned on CSS preprocessing and that worked well too.

I've sent an e-mail to Leaf to see if the line number thing is on his mind at all.

Thanks again, cheers!

corey.aufang’s picture

corey.aufang commented
Status: Needs review » Fixed

I've committed and pushed a new version.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.