Make less-rails add line numbers as comment

123 Views Asked by At

Is there any way to configure less-rails so that it shows the line number of original sources as comments? And is it possible to enable source mapping?

Consider the following example:

file1.less

body {
  background-color: black;
}

file2.less

body {
  padding: 20px;
}

application.css.less

@import "file1";
@import "file1";

What I get:

body {
  background-color: black;
}

body {
  padding: 20px;
}

What I want

/* file1.less line: 1 */
body {
  background-color: black;
}

/* file2.less line: 1 */
body {
  padding: 20px;
}

Or is there any other easier way to find out which rule belongs to which file?

Update

When configuring my application, the config.less only contains the following:

{:paths=>
  [#<Pathname:/home/yan-foto/.../vendor/less>,
   #<Pathname:/home/yan-foto/.../node_modules/bootstrap-datetimepicker>,
   #<Pathname:/home/yan-foto/.../node_modules/bootstrap-slider>],
 :compress=>false}
1

There are 1 best solutions below

5
On BEST ANSWER

Open the vendor/bundle/ruby/1.9.1/gems/less-2.6.0/lib/less/parser.rb file and replace (around line 54):

  end
  @parser = Less::JavaScript.exec { Less['Parser'].new(env) }

with:

  end
  env['dumpLineNumbers'] = 'comments';
  @parser = Less::JavaScript.exec { Less['Parser'].new(env) }

Based on https://github.com/metaskills/less-rails#configuration you should try:

MyProject::Application.configure do
  config.less.line-numbers << "comments"
  config.less.compress = true
end

When the preceding works as expected you could also consider to use CSS sourcemaps:

MyProject::Application.configure do
  config.less.source-map = true
  config.less.source-map-map-inline = true
end

I really don't find the line config.less.line-numbers << "comments" in docs

I fact my answer is only a suggestion and i was not able to test it. The above suggest that you are able to set some option for the Less compiler.

You can also find this option by running lessc without any argument:

-------------------------- Deprecated ----------------
  --line-numbers=TYPE      Outputs filename and line numbers.
                           TYPE can be either 'comments', which will output
                           the debug info within comments, 'mediaquery'
                           that will output the information within a fake
                           media query which is compatible with the SASS
                           format, and 'all' which will do both.
  --verbose                Be verbose.

and I am sure that it has a syntax error because of the dash between line and numbers

I bet you are right about that. You should possible use: config.less.dumpLineNumbers and config.less.sourceMap

Or in your config.less: :dumpLineNumbers>comments