Not possible to defer parsing until all dependencies have been loaded

[drbenschmidt]

I've run into an issue when using variables defined in one LESS file not existing later for other modules because the LESS is parsed for each dependency instead of aggregating each dependency and parsing them all at the end.

I'm using Backbone Marionette and have setup my project similarly to a typical MVC framework, however each of my view folders contain the Backbone Marionette View, Handlebars Template, and LESS file. When I create my Application View, I use require-less to include my default application LESS, which includes imports to bootstrap and some overrides, as well as newly defined variables.

Here is a quick visual for how it's structured:

- Views
  |-- ApplicationView
      |-- ApplicationView.js  <-- Requires HeaderVew
      |-- ApplicationTemplate.handlebars
      |-- ApplicationStyle.less  <-- Defines @image-base-path
  |-- HeaderView
      |-- HeaderView.js
      |-- HeaderTemplate.handlebars
      |-- HeaderStyle.less  <-- Requires @image-base-path

I've played around with the require-less/less.js file to introduce a new option for deferedParsing where if enabled it will store each required file in an array instead of parsing the import, then added a function that can be called once the loading is done. I wasn't able to normalize the CSS with this method, and this may not work for everyone. I also hadn't tried this approach in the builder yet.

Have you encountered this issue before, or do you have any ideas that could solve this issue without requiring a separate call to start the parsing?

[guybedford]

Yes this is a known limitation unfortunately.

The best solution I can think of is to make the "variables" less file a repeated dependency of all less files that need it, using backtracking in the file - eg HeaderStyle.less would load from ../../app-variables.less.

Would the above work for your needs?

[drbenschmidt]

I thought about that, but wasn't sure how well it would scale or how it could be used in different applications. It should work for this as it's a single application, but I think ultimately a deferred parsing would be best. I'll see if I can get a working solution for both browser and build scenarios and let you tell me how crazy I am 😆

[drbenschmidt]

Alright, I think I've sufficiently played around with everything in a real-world development setting and I don't like my idea to defer the parsing.

Kind of a bummer, it might have been worth it if requireJS offered a little bit more access in it's API (such as getting the dependency tree after it's been generated), but for now the import method you mentioned is better than deferring the parsing until everything has been imported.

[guybedford]

Ok great. The issue then is the backtracking approach. Ideally one would be able to have LESS imports using module names as well.