search

lasso-js / lasso-less

Lasso.js plugin to support compilation of less dependencies
7 stars 10 forks source link

Bootstrap doesnt compile using lasso-less #8

Closed pranavjha closed 9 years ago

pranavjha commented 9 years ago

I am trying to extend bootstrap to fit my requirements. I want to compile less files using lasso-less.

As suggested in the README, it is not allowed to use less variables inside URLs. Bootstrap uses it extensively, and sometimes, it can really reduce repetition as in the below example:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
  url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
  url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
  url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}

However, because of the URL restriction, lasso-less will give me the below error:

Error: File with path "../core/@{icon-font-path}@{icon-font-name}.eot" does not exist
patrick-steele-idem commented 9 years ago

The problem is that all the URL paths need to resolve to an actual file system path so that the referenced assets can go through the asset pipeline (writing/uploading, compression, fingerprinting, etc.). For example, @{icon-font-path}@{icon-font-name}.ttf would need to some how be resolved to the full file system path for the referenced ttf file. Since the Lasso plugin won't know the value of @{icon-font-path}@{icon-font-name}.ttf until after rendering the Less to CSS, the plugin would need to parse the rendered CSS (which is fine, it will just make things a bit slower). Even after the plugin parses the rendered CSS to resolve the resource URLs, how does the plugin resolve that path to an actual file system path? I see the following options:

  1. Assume the path is already a full file system path (unlikely in practice)
  2. Resolve the relative path using the CWD as the base directory
  3. Resolve the relative path using the location of the Less file with the url() as the path
  4. Try 1, 2 and 3 and if none of those work then throw an error

Do you have any thoughts given the constraints mentioned?

pranavjha commented 9 years ago

@patrick-steele-idem the issue can be reproduced in the barebone setup at https://github.com/pranavjha/lasso-bootstrap.

run npm start and hit localhost:8080. The console should trace the error.

patrick-steele-idem commented 9 years ago

Thanks, @pranavjha. I'll take a look and see if we can put in a clean workaround.