Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

hostep
Copy link
Contributor

@hostep hostep commented Jun 18, 2024

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
  1. Open the frontend in your browser and open the inspector
  2. Expectation is not to see a pub/ directory in the path when hovering over a less filename in the inspector:
    Screenshot 2024-06-18 at 20 37 48

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)

Copy link

m2-assistant bot commented Jun 18, 2024

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
Copy link
Contributor Author

hostep commented Jun 18, 2024

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

@magento run all tests

@hostep
Copy link
Contributor Author

hostep commented Jun 19, 2024

@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
Copy link
Contributor Author

hostep commented Jun 19, 2024

There is still one static test failure:

Use the function form of 'use strict'.
line 17, col 32, Error - Use the function form of &apos;use strict&apos;. (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.

@m2-community-project m2-community-project bot added the Priority: P2 A defect with this priority could have functionality issues which are not to expectations. label Jun 19, 2024
@engcom-Bravo engcom-Bravo added the Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it label Jul 25, 2024
@Eddcapone
Copy link

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

@hostep
Copy link
Contributor Author

hostep commented Aug 2, 2024

@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
Copy link

Eddcapone commented Aug 5, 2024

@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:

image

@hostep
Copy link
Contributor Author

hostep commented Aug 5, 2024

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

@Eddcapone
Copy link

Eddcapone commented Aug 5, 2024

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
Copy link
Contributor

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.
image

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

Thank you.

@engcom-November
Copy link
Contributor

@magento run all tests

@engcom-November
Copy link
Contributor

Since builds are failed, moving it to Extended Testing.

@engcom-November
Copy link
Contributor

@magento run Static Tests

@engcom-November
Copy link
Contributor

@magento run Static Tests

@engcom-November
Copy link
Contributor

@magento run all tests

@engcom-November
Copy link
Contributor

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

@engcom-November
Copy link
Contributor

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

@engcom-November
Copy link
Contributor

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

Functional Tests B2B:
Run 1:
image

Run 2:
image

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

Functional Tests EE:
Run 1:
image

Run 2:
image

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

Functional Tests CE:
Run 1:
image

Run 2:
image

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

Hence moving this to Merge in Progress.

@engcom-Delta engcom-Delta added the Project: Community Picked PRs upvoted by the community label Aug 16, 2024
@magento-devops-reposync-svc magento-devops-reposync-svc merged commit 4093281 into magento:2.4-develop Sep 5, 2024
9 of 12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Progress: accept Project: Community Picked PRs upvoted by the community Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Grunt Less uses pub/ prefix for sourcemaps
7 participants