seperate sourcemaps are badly generated #41
Description
Hello guys, this is my first use of less.php, so here is my exemple:
The web DocumentRoot is public_html/ , which includes these files :
- less_php/
- vendor/
- composer.json
- composer.lock
- theme.less
- footer.less
- header.less
- components/
- buttons.less
- index.php
index.php
<?php
require __DIR__ . '/vendor/autoload.php';
$less_file = __DIR__ . '/theme.less';
$options = array(
'sourceMap' => true,
'sourceMapWriteTo' => __DIR__ . '/theme.map',
'sourceMapURL' => '/less_php/theme.map',
);
$parser = new Less_Parser($options);
$parser->parseFile( $less_file , 'http://exemple.com/less_php/' );
$generated_css = $parser->getCss();
$css_file = fopen("theme.css", "w") or die("Unable to open theme.css!");
fwrite($css_file, $generated_css);
fclose($css_file);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div class="h1">Body .h1</div>
<div class="btn">bouton</div>
<footer>
<div class="h2">footer .h2</div>
</footer>
</body>
</html>theme.less
@primary-color: #990000;
@primary-font-siz: 1.8rem;
div {
background: url('test.jpeg');
}
@import 'header';
@import 'components/buttons';
@import 'footer';footer.less
footer {
.h2 {
color: @primary-color;
font-size: @primary-font-siz;
}
}header.less
body {
.h1 {
color: @primary-color;
font-size: @primary-font-siz;
}
}components/buttons.less
.btn {
background-color: @primary-color;
font-size: @primary-font-siz;
}The generated theme.css
div {
background: url('http://exemple.com/less_php/test.jpeg');
}
body .h1 {
color: #990000;
font-size: 1.8rem;
}
.btn {
background-color: #990000;
font-size: 1.8rem;
}
footer .h2 {
color: #990000;
font-size: 1.8rem;
}
/*# sourceMappingURL=/less_php/theme.map */The issue
the generated theme.map looks like this
{
"version":3,
"sources":[
"home\/foo\/public_html\/less_php\/theme.less",
"home\/foo\/public_html\/less_php\/header.less",
"home\/foo\/public_html\/less_php\/components\/buttons.less",
"home\/foo\/public_html\/less_php\/footer.less"
],
"names":[],
"mappings":"AAGA;EACE,gBAAgB,wCAAhB;;ACHF,IACE;EACE,cAAA;EACA,iBAAA;;ACJJ;EACE,yBAAA;EACA,iBAAA;;ACDF,MACE;EACE,cAAA;EACA,iBAAA"
}The "sources" values shouldn't be absolute, because when using the navigator inspector, the navigator can't access to them.
The fix
vendor/wikimedia/less.php/lib/Less/SourceMap/Generator.php
I removed this block :
if(strpos($filename, '\\') === 0 || strpos($filename, '/') === 0){
$filename = substr($filename, 1);
}And I changed this line :
$this->sources[$fileInfo['currentUri']] = $fileInfo['filename'];to become :
$this->sources[$fileInfo['currentUri']] = $fileInfo['currentUri'];So the result of the new generated theme.map is :
{
"version":3,
"sources":[
"http:\/\/exemple.com\/less_php\/theme.less",
"http:\/\/exemple.com\/less_php\/header.less",
"http:\/\/exemple.com\/less_php\/components\/buttons.less",
"http:\/\/exemple.com\/less_php\/footer.less"
],
"names":[],
"mappings":"AAGA;EACE,gBAAgB,wCAAhB;;ACHF,IACE;EACE,cAAA;EACA,iBAAA;;ACJJ;EACE,yBAAA;EACA,iBAAA;;ACDF,MACE;EACE,cAAA;EACA,iBAAA"
}And everything is ok in the navigator inspector 💯
Thank you for your help and suggestions 👍