@Findus23 opened this Issue on December 20th 2020 Member

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.php it 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:774 which 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=getCssSourcemap that 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 like somefile.less:123 allowing to immediatly fix the right file.

Reasons why this might not be completely trivial (but still probably not that complex):

  • the LESS compilation code would need to be rewritten in the less.php class style instead of the lessc compatibility style (but that should just be a few lines of code)
  • I don't see a method that just returns the content of the source map instead of writing it into a file
  • A new asset handling and Proxy endpoint would need to be added

If this is too much work, there would be an easier method that only needs a rewrite of the LESS compilation code:

  • set $options = array( 'sourceMap' => true ); and therefore append the sourcemap to the CSS file
  • this means bloating the file size of the CSS and therefore the page load time (during the development) a lot
  • but nothing else needs to be changed.
@Findus23 commented on December 20th 2020 Member

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.

Powered by GitHub Issue Mirror