Findus23
commented
3 years ago Implementing the latter is really easy
Patch
```diff diff --git a/core/AssetManager/UIAssetMerger/StylesheetUIAssetMerger.php b/core/AssetManager/UIAssetMerger/StylesheetUIAssetMerger.php index c57610a466..c6652e4cf6 100644 --- a/core/AssetManager/UIAssetMerger/StylesheetUIAssetMerger.php +++ b/core/AssetManager/UIAssetMerger/StylesheetUIAssetMerger.php @@ -9,7 +9,7 @@ namespace Piwik\AssetManager\UIAssetMerger; use Exception; -use lessc; +use Less_Parser; use Piwik\AssetManager\UIAsset; use Piwik\AssetManager\UIAssetMerger; use Piwik\Common; @@ -21,7 +21,7 @@ use Piwik\Plugin\Manager; class StylesheetUIAssetMerger extends UIAssetMerger { /** - * @var lessc + * @var Less_Parser */ private $lessCompiler; @@ -40,12 +40,13 @@ class StylesheetUIAssetMerger extends UIAssetMerger protected function getMergedAssets() { // note: we're using setImportDir on purpose (not addImportDir) - $this->lessCompiler->setImportDir(PIWIK_DOCUMENT_ROOT); + $this->lessCompiler->SetImportDirs([PIWIK_DOCUMENT_ROOT]); $concatenatedAssets = $this->getConcatenatedAssets(); - $this->lessCompiler->setFormatter('classic'); +// $this->lessCompiler->SetFormatter('classic'); try { - $compiled = $this->lessCompiler->compile($concatenatedAssets); + $this->lessCompiler->parse($concatenatedAssets); + $compiled = $this->lessCompiler->getCss(); } catch(\Exception $e) { // save the concated less files so we can debug the issue $this->saveConcatenatedAssets($concatenatedAssets); @@ -62,6 +63,7 @@ class StylesheetUIAssetMerger extends UIAssetMerger $this->mergedContent = $compiled; $this->cssAssetsToReplace = array(); +// var_dump($compiled); return $compiled; } @@ -108,7 +110,7 @@ class StylesheetUIAssetMerger extends UIAssetMerger } /** - * @return lessc + * @return Less_Parser * @throws Exception */ private static function getLessCompiler() @@ -116,7 +118,8 @@ class StylesheetUIAssetMerger extends UIAssetMerger if (!class_exists("lessc")) { throw new Exception("Less was added to composer during 2.0. ==> Execute this command to update composer packages: \$ php composer.phar install"); } - $less = new lessc(); + $options = array( 'sourceMap' => true ); + $less = new Less_Parser($options); return $less; } ```Unfortunately there are other things that make this much harder as expected: Instead of (as I expected) generating a list of LESS imports for all files and compiling this getConcatenatedAssets() already appends all files into one huge LESS file meaning any information about files is already lost before the LESS compiler.
This is one thing that in my opinion would make developing CSS in Matomo a lot easier and more fun. And now that we are using
wikimedia/less.phpit is finally possible to achieve:Issues like https://github.com/matomo-org/matomo/issues/16983 are unnecessarily hard to debug as all you see in the browser developer tools is
index.php:774which contains a huge amount of CSS.Instead (probably only when development mode is enabled) Matomo should add an endpoint like
/index.php?module=Proxy&action=getCssSourcemapthat returns the CSS sourcemap, add a link to it at the end of the CSS output and therefore allow the browser to show helpful things likesomefile.less:123allowing to immediatly fix the right file.Reasons why this might not be completely trivial (but still probably not that complex):
If this is too much work, there would be an easier method that only needs a rewrite of the LESS compilation code:
$options = array( 'sourceMap' => true );and therefore append the sourcemap to the CSS file