Fix URL path of Sourcemap(.map) files

[tshabatyn]

Description (*)

Related Pull Requests

Fixed Issues (if relevant)

1. resolves [Issue] Fix URL path of Sourcemap(.map) files #37290: Fix URL path of Sourcemap(.map) files

Manual testing scenarios (*)

Verified the problem and fix on Magento 2.4.5-p1 and 2.4-develop. The problem doesn't exist on Magento 2.3.7-p4 so probably one of the recent changes in 2.4.x to the grunt code or one of the updated npm packages causes the problem.

Steps to reproduce:

1. Setup clean Magento
2. Copy package.json.sample to package.json
3. Run npm install
4. Run cp Gruntfile.js.sample Gruntfile.js
5. Run grunt exec:luma
6. Run grunt less:luma
7. Run: grep -r 'sourceMappingURL' pub/static and notice this output:

$ grep -r 'sourceMappingURL' pub/static
pub/static/frontend/Magento/luma/en_US/css/styles-l.css:/*# sourceMappingURL=pub/static/frontend/Magento/luma/en_US/css/styles-l.css.map */
pub/static/frontend/Magento/luma/en_US/css/styles-m.css:/*# sourceMappingURL=pub/static/frontend/Magento/luma/en_US/css/styles-m.css.map */

Which are incorrect paths to the sourcemap files, the browser tries to load these incorrectly resulting in 404 errors and doesn't find the original less files in the inspector:

Questions or comments

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)
• All automated tests passed successfully (all builds are green)

Resolved issues:

1. resolves [Issue] Fix URL path of Sourcemap(.map) files #37290: Fix URL path of Sourcemap(.map) files

[m2-assistant]

Hi @tshabatyn. Thank you for your contribution
Here is some useful tips 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

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

[ihor-sviziev]

@tshabatyn unfortunately it's really hard to understand what the issue you have, how to test it and not clear if your fix is correct.
Could you add some issue description and how you're going to fix it?

[ihor-sviziev]

@tshabatyn I am closing this PR now due to inactivity.
Please reopen and update if you wish to continue.
Thank you for the collaboration!

[m2-assistant]

Hi @tshabatyn, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

[hostep]

Hey @ihor-sviziev!
Can we have this PR re-opened? It's a really good one and actually fixes the path to the sourcemaps generated by the less compiler.
Verified the problem and fix on Magento 2.4.5-p1 and 2.4-develop. The problem doesn't exist on Magento 2.3.7-p4 so probably one of the recent changes in 2.4.x to the grunt code or one of the updated npm packages causes the problem.

Steps to reproduce:

1. Setup clean Magento
2. Copy package.json.sample to package.json
3. Run npm install
4. Run grunt exec:luma
5. Run grunt less:luma
6. Run: grep -r 'sourceMappingURL' pub/static and notice this output:

$ grep -r 'sourceMappingURL' pub/static
pub/static/frontend/Magento/luma/en_US/css/styles-l.css:/*# sourceMappingURL=pub/static/frontend/Magento/luma/en_US/css/styles-l.css.map */
pub/static/frontend/Magento/luma/en_US/css/styles-m.css:/*# sourceMappingURL=pub/static/frontend/Magento/luma/en_US/css/styles-m.css.map */

Which are incorrect paths to the sourcemap files, the browser tries to load these incorrectly resulting in 404 errors and doesn't find the original less files in the inspector:

7. Apply the fix from this PR
8. Run grunt less:luma again
9. Run grep -r 'sourceMappingURL' pub/static again and notice correct relative paths are generated:

$ grep -r 'sourceMappingURL' pub/static
pub/static/frontend/Magento/luma/en_US/css/styles-l.css:/*# sourceMappingURL=styles-l.css.map */
pub/static/frontend/Magento/luma/en_US/css/styles-m.css:/*# sourceMappingURL=styles-m.css.map */

Also, the sourcemap files are now loaded in the browser and the inspector finds the less files where the code originally came from:

Thanks for this fix @tshabatyn!

[m2-assistant]

Hi @tshabatyn. Thank you for your contribution
Here are some useful tips 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 Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

[ihor-sviziev]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[joshuaswarren]

Hello, @ihor-sviziev - I'm going through some of the oldest open pull requests on the Magento 2 repository to better understand why they are still open, if they ought to be closed, etc.

On this one, I noticed that it's marked as changes requested and links back to a comment you made in 2020 - #28415 (review)

At least to my admittedly untrained eye, @hostep's comment in #28415 (comment) seems like it clarifies what @tshabatyn was solving in this pull request. Is there additional info still needed, and if so, what might it be?

Thanks for helping me understand this! Through my position at the Magento Association, I'm on a crusade to get more community innovations merged smoothly into the Magento codebase and understanding these oldest pull requests can really help me determine the best way to apply our efforts.

[engcom-Lima]

@magento create issue

[engcom-Lima]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Lima]

✔️ QA Passed

Preconditions:

• Install fresh Magento 2.4-develop and PHP 8.1

Manual testing scenario:

1. Followed steps given in the comment and document.

Before: ✖️ Path was wrong.

After: ✔️ Now correct

[engcom-Lima]

@magento run Integration Tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.