Search code examples
ruby-on-railslessasset-pipelineless-rails

Make less-rails add line numbers as comment


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}

Solution

  • 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