Merge remote-tracking branch '38977/wip_less_source_maps' into novcommpr-2

Author: engcom-Dash

lib/internal/Magento/Framework/Css/PreProcessor/Adapter/Less/Processor.php

@@ -5,6 +5,8 @@
  */
 namespace Magento\Framework\Css\PreProcessor\Adapter\Less;
 
+use Magento\Framework\App\Filesystem\DirectoryList;
+use Magento\Framework\App\ObjectManager;
 use Magento\Framework\App\State;
 use Magento\Framework\Css\PreProcessor\File\Temporary;
 use Magento\Framework\Phrase;
@@ -16,6 +18,8 @@
 
 /**
  * Class Processor
+ *
+ * Process LESS files into CSS
  */
 class Processor implements ContentProcessorInterface
 {
@@ -39,24 +43,32 @@ class Processor implements ContentProcessorInterface
      */
     private $temporaryFile;
 
+    /**
+     * @var DirectoryList
+     */
+    private DirectoryList $directoryList;
+
     /**
      * Constructor
      *
      * @param LoggerInterface $logger
      * @param State $appState
      * @param Source $assetSource
      * @param Temporary $temporaryFile
+     * @param ?DirectoryList $directoryList
      */
     public function __construct(
         LoggerInterface $logger,
         State $appState,
         Source $assetSource,
-        Temporary $temporaryFile
+        Temporary $temporaryFile,
+        ?DirectoryList $directoryList = null,
     ) {
         $this->logger = $logger;
         $this->appState = $appState;
         $this->assetSource = $assetSource;
         $this->temporaryFile = $temporaryFile;
+        $this->directoryList = $directoryList ?: ObjectManager::getInstance()->get(DirectoryList::class);
     }
 
     /**
@@ -66,10 +78,19 @@ public function processContent(File $asset)
     {
         $path = $asset->getPath();
         try {
+            $mode = $this->appState->getMode();
+            $sourceMapBasePath = sprintf(
+                '%s/pub/',
+                $this->directoryList->getPath(DirectoryList::TEMPLATE_MINIFICATION_DIR),
+            );
+
             $parser = new \Less_Parser(
                 [
                     'relativeUrls' => false,
-                    'compress' => $this->appState->getMode() !== State::MODE_DEVELOPER
+                    'compress' => $mode !== State::MODE_DEVELOPER,
+                    'sourceMap' => $mode === State::MODE_DEVELOPER,
+                    'sourceMapRootpath' => '/',
+                    'sourceMapBasepath' => $sourceMapBasePath,
                 ]
             );
 

lib/internal/Magento/Framework/Css/Test/Unit/PreProcessor/Adapter/Less/ProcessorTest.php

@@ -7,6 +7,7 @@
 
 namespace Magento\Framework\Css\Test\Unit\PreProcessor\Adapter\Less;
 
+use Magento\Framework\App\Filesystem\DirectoryList;
 use Magento\Framework\App\State;
 use Magento\Framework\Css\PreProcessor\Adapter\Less\Processor;
 use Magento\Framework\Css\PreProcessor\File\Temporary;
@@ -18,15 +19,15 @@
 
 class ProcessorTest extends TestCase
 {
-    const TEST_CONTENT = 'test-content';
+    private const TEST_CONTENT = 'test-content';
 
-    const ASSET_PATH = 'test-path';
+    private const ASSET_PATH = 'test-path';
 
-    const TMP_PATH_LESS = '_file/test.less';
+    private const TMP_PATH_LESS = '_file/test.less';
+    private const TMP_PATH_CSS_PRODUCTION = '_file/test-production.css';
+    private const TMP_PATH_CSS_DEVELOPER = '_file/test-developer.css';
 
-    const TMP_PATH_CSS = '_file/test.css';
-
-    const ERROR_MESSAGE = 'Test exception';
+    private const ERROR_MESSAGE = 'Test exception';
 
     /**
      * @var Processor
@@ -52,6 +53,10 @@ class ProcessorTest extends TestCase
      * @var Temporary|MockObject
      */
     private $temporaryFileMock;
+    /**
+     * @var DirectoryList|MockObject
+     */
+    private $directoryListMock;
 
     /**
      * Set up
@@ -69,12 +74,16 @@ protected function setUp(): void
         $this->temporaryFileMock = $this->getMockBuilder(Temporary::class)
             ->disableOriginalConstructor()
             ->getMock();
+        $this->directoryListMock = $this->getMockBuilder(DirectoryList::class)
+            ->disableOriginalConstructor()
+            ->getMock();
 
         $this->processor = new Processor(
             $this->loggerMock,
             $this->appStateMock,
             $this->assetSourceMock,
-            $this->temporaryFileMock
+            $this->temporaryFileMock,
+            $this->directoryListMock,
         );
     }
 
@@ -89,7 +98,7 @@ public function testProcessContentException()
 
         $this->appStateMock->expects(self::once())
             ->method('getMode')
-            ->willReturn(State::MODE_DEVELOPER);
+            ->willReturn(State::MODE_PRODUCTION);
 
         $this->assetSourceMock->expects(self::once())
             ->method('getContent')
@@ -120,7 +129,7 @@ public function testProcessContentEmpty()
 
         $this->appStateMock->expects(self::once())
             ->method('getMode')
-            ->willReturn(State::MODE_DEVELOPER);
+            ->willReturn(State::MODE_PRODUCTION);
 
         $this->assetSourceMock->expects(self::once())
             ->method('getContent')
@@ -141,12 +150,55 @@ public function testProcessContentEmpty()
     }
 
     /**
-     * Test for processContent method (not empty content)
+     * Test for processContent method in production mode (not empty content)
      */
     public function testProcessContentNotEmpty()
     {
         $assetMock = $this->getAssetMock();
 
+        $this->appStateMock->expects(self::once())
+            ->method('getMode')
+            ->willReturn(State::MODE_PRODUCTION);
+
+        $this->assetSourceMock->expects(self::once())
+            ->method('getContent')
+            ->with($assetMock)
+            ->willReturn(self::TEST_CONTENT);
+
+        $this->temporaryFileMock->expects(self::once())
+            ->method('createFile')
+            ->with(self::ASSET_PATH, self::TEST_CONTENT)
+            ->willReturn(__DIR__ . '/' . self::TMP_PATH_LESS);
+
+        $assetMock->expects(self::once())
+            ->method('getPath')
+            ->willReturn(self::ASSET_PATH);
+
+        $this->loggerMock->expects(self::never())
+            ->method('critical');
+
+        $clearSymbol = ["\n", "\r", "\t", ' '];
+        self::assertEquals(
+            trim(str_replace(
+                $clearSymbol,
+                '',
+                file_get_contents(__DIR__ . '/' . self::TMP_PATH_CSS_PRODUCTION)
+            )),
+            trim(str_replace(
+                $clearSymbol,
+                '',
+                $this->processor->processContent($assetMock)
+            ))
+        );
+    }
+
+    /**
+     * Test for processContent method in developer mode (not empty content)
+     */
+    public function testProcessContentNotEmptyInDeveloperMode()
+    {
+        $assetMock = $this->getAssetMock();
+
         $this->appStateMock->expects(self::once())
             ->method('getMode')
             ->willReturn(State::MODE_DEVELOPER);
@@ -170,8 +222,16 @@ public function testProcessContentNotEmpty()
 
         $clearSymbol = ["\n", "\r", "\t", ' '];
         self::assertEquals(
-            trim(str_replace($clearSymbol, '', file_get_contents(__DIR__ . '/' . self::TMP_PATH_CSS))),
-            trim(str_replace($clearSymbol, '', $this->processor->processContent($assetMock)))
+            trim(str_replace(
+                $clearSymbol,
+                '',
+                file_get_contents(__DIR__ . '/' . self::TMP_PATH_CSS_DEVELOPER)
+            )),
+            trim(str_replace(
+                $clearSymbol,
+                '',
+                $this->normalizeInlineSourceMap($this->processor->processContent($assetMock))
+            ))
         );
     }
 
@@ -186,4 +246,34 @@ private function getAssetMock()
 
         return $assetMock;
     }
+
+    /**
+     * - find json part of sourcemap
+     * - url decode it
+     * - replace \/ with / in source filenames
+     * - remove absolute path in filename, make it a relative path
+     */
+    private function normalizeInlineSourceMap(string $css): string
+    {
+        $regexBegin = 'sourceMappingURL=data:application/json,';
+        $regexEnd = '*/';
+        $regex = '@' . preg_quote($regexBegin, '@') . '([^\*]+)' . preg_quote($regexEnd, '@') . '@';
+
+        if (preg_match($regex, $css, $matches) === 1) {
+            $inlineSourceMapJson = $matches[1];
+            $inlineSourceMapJson = urldecode($inlineSourceMapJson);
+            $inlineSourceMapJson = json_decode($inlineSourceMapJson, true, 512, JSON_UNESCAPED_SLASHES);
+
+            $relativeFilenames = [];
+            foreach ($inlineSourceMapJson['sources'] as $filename) {
+                $relativeFilenames[] = str_replace(sprintf('%s/', BP), '', $filename);
+            }
+            $inlineSourceMapJson['sources'] = $relativeFilenames;
+            $inlineSourceMapJson = json_encode($inlineSourceMapJson, JSON_UNESCAPED_SLASHES);
+
+            $css = preg_replace($regex, sprintf('%s%s%s', $regexBegin, $inlineSourceMapJson, $regexEnd), $css);
+        }
+
+        return $css;
+    }
 }

lib/internal/Magento/Framework/Css/Test/Unit/PreProcessor/Adapter/Less/_file/test-developer.css

@@ -0,0 +1,20 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+body {
+   background: #333333;
+   color: #454545;
+}
+a {
+   color: #ff9900;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+   color: #333333;
+}
+/*#sourceMappingURL=data:application/json,{"version":3,"sources":["lib/internal/Magento/Framework/Css/Test/Unit/PreProcessor/Adapter/Less/_file/test.less"],"names":[],"mappings":";;;;AASA;EACE,mBAAA;EACA,cAAA;;AAEF;EACE,cAAA;;AAEF;AAAI;AAAI;AAAI;AAAI;AAAI;EAClB,cAAA"}*/

lib/internal/Magento/Framework/Css/Test/Unit/PreProcessor/Adapter/Less/_file/test-production.css

@@ -0,0 +1,15 @@
+body {
+   background: #333333;
+   color: #454545
+}
+a {
+   color: #ff9900
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+   color: #333333
+}