Remove 'pub/' directory from paths in css source maps when compiling using grunt

[hostep]

Description (*)

When compiling css using grunt, and generating sourcemaps, the url's in the sourcemap point to .less files inside the pub/ directory, which is not correct, as Magento's document root is set to pub/ in the webserver config, so pub/ should not be in the url of the sourcemaps.

Fixed with the help from reading the documentation from less:

Source Map Basepath

lessc --source-map-basepath=less-files/ { sourceMap: { sourceMapBasepath: 'less-files/' } }

This is the opposite of the rootpath option, it specifies a path which should be removed from the output paths. For instance if you are compiling a file in the less-files directory but the source files will be available on your web server in the root or current directory, you can specify this to remove the additional less-files part of the path.

It defaults to the path to the input less file.

Related Pull Requests

N/A

Fixed Issues (if relevant)

1. Fixes Grunt Less uses pub/ prefix for sourcemaps #38837

Manual testing scenarios (*)

1. Setup clean Magento
2. Run:

$ cp package.json.sample package.json
$ cp Gruntfile.js.sample Gruntfile.js
$ npm install
$ grunt clean:luma && grunt exec:luma && grunt less:luma

3. Open the frontend in your browser and open the inspector
4. Expectation is not to see a pub/ directory in the path when hovering over a less filename in the inspector:
   

Questions or comments

No automated test were added, I don't think we have tests for grunt workflows, or do we?

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @hostep. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.

Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

---

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

[hostep]

There's no good reason for this (I think), but let's run the automated test suite once...

@magento run all tests

[hostep]

@magento run Static Tests

(this was supposed to be a quick and easy fix, see the first commit, but the static tests require me to change a lot of code, see the second commit)

[hostep]

There is still one static test failure:

Use the function form of 'use strict'.
line 17, col 32, Error - Use the function form of 'use strict'. (strict)

If somebody could give me a hint of how to fix this, that would be appreciated, I'm not a node.js developer, so it would take me too long to research a good solution.

[Eddcapone]

For me the source maps are not getting generated at all when compiling by using grunt.

[hostep]

@Eddcapone, it sounds like you aren't using Magento 2.4.7 but probably a lower version? In that case you'll also need this fix: #28415, which got included in Magento 2.4.7

[Eddcapone]

@Eddcapone, it sounds like you aren't using Magento 2.4.7 but probably a lower version? In that case you'll also need this fix: #28415, which got included in Magento 2.4.7

Thank you so much, I try to figure this out for a long time...
Adding these lines solved it!

I can confirm that there is /pub in the path and therefor you can't inspect the file in the developer tools:

[hostep]

And that last one can be fixed by the first commit in this pull request: 8f0387c

[Eddcapone]

And that last one can be fixed by the first commit in this pull request: 8f0387c

Confirmed. I've applied your fix and now it works as it is supposed to.

[engcom-November]

Hello @hostep,

Thank you for collaboration and contribution!

✔️ QA Passed

Preconditions:

• Install fresh Magento 2.4-develop

Steps to reproduce:

• Run:

$ cp package.json.sample package.json
$ cp Gruntfile.js.sample Gruntfile.js
$ npm install
$ grunt clean:luma && grunt exec:luma && grunt less:luma

• Open the frontend in your browser and open the inspector
• Expectation is not to see a pub/ directory in the path when hovering over a less filename in the inspector.

Before: ✖️
pub/ directory can be seen in path of less file.

After: ✔️
pub/ directory cannot be seen in path of less file.

Thank you.

[engcom-November]

@magento run all tests

[engcom-November]

Since builds are failed, moving it to Extended Testing.

[engcom-November]

@magento run Static Tests

[engcom-November]

@magento run Static Tests

[engcom-November]

@magento run all tests

[engcom-November]

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE, Integration Tests, Unit Tests

[engcom-November]

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE

[engcom-November]

The repeating Functional Tests B2B, Functional Tests EE and Functional Tests CE failures are flaky and know issues.

Functional Tests B2B:
Run 1:

Run 2:

Known issues:
ACQE-6695 - TierPricingWhenPriceScopeIsWebsiteWorkingProperlyWithMultipleCurrenciesConfiguredTest
AC-12714 - StorefrontLoginFormCheckDuplicateValidateMessageTest
ACQE-6886 - StorefrontVerifyMultipleProductRatingsOnCategoryPageTest
ACQE-6350 - AdminCreateDraftQuoteFromQuoteGridPageWithMultipleStoresTest

Functional Tests EE:
Run 1:

Run 2:

Known issues:
ACQE-6695 - TierPricingWhenPriceScopeIsWebsiteWorkingProperlyWithMultipleCurrenciesConfiguredTest
AC-12714 - StorefrontLoginFormCheckDuplicateValidateMessageTest
ACQE-6331 - StorefrontCreateOrderAllQuantityGroupedProductOptionDefaultStockTest

Functional Tests CE:
Run 1:

Run 2:

Known issues:
ACQE-6695 - TierPricingWhenPriceScopeIsWebsiteWorkingProperlyWithMultipleCurrenciesConfiguredTest
ACQE-6774 - StorefrontCashOnDeliveryPaymentForSpecificCountryTest

Hence moving this to Merge in Progress.