Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9.7k
[AssetMapper] Flexible public paths + relative path imports + possibility of "building" assets#50264
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
[AssetMapper] Flexible public paths + relative path imports + possibility of "building" assets#50264
Uh oh!
There was an error while loading.Please reload this page.
Conversation
src/Symfony/Component/AssetMapper/AssetMapperDevServerSubscriber.php OutdatedShow resolvedHide resolved
Uh oh!
There was an error while loading.Please reload this page.
src/Symfony/Component/AssetMapper/AssetMapperDevServerSubscriber.php OutdatedShow resolvedHide resolved
Uh oh!
There was an error while loading.Please reload this page.
src/Symfony/Component/AssetMapper/Compiler/AssetCompilerPathResolverTrait.phpShow resolvedHide resolved
Uh oh!
There was an error while loading.Please reload this page.
javiereguiluz left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
After thinking about this, I changed my initial thoughts and now I'm 👍 about this.
It's true that it's controversial and the"you are recreating Assetic" argument is half-true .... but at the same time:
- Without any utility to build SCSS into CSS, I can't use AssetMapper. I'd stick to Webpack, Encore, node.js, etc.
- My current usage of SCSS is minimal(and from what I've seen, for many other Symfony developers is the same)
- In fact, my only current reason for using SCSS is selector nesting. This is already a native browser feature (https://caniuse.com/css-nesting) so, as soon as there's more support for it, I'll remove SCSS and just use plain CSS.
So, this "controversial" feature would be useful for me during the 1 or 2 year transition from today until I can stop using SCSS and move to CSS.
Thanks Ryan!
4d24d98 to5c9fb34CompareUh oh!
There was an error while loading.Please reload this page.
fabpot commentedMay 12, 2023
Thank you@weaverryan. |
58830ca to53e297dCompareThis PR was squashed before being merged into the 6.3 branch.Discussion----------[AssetMapper] Add cached asset factory| Q | A| ------------- | ---| Branch? | 6.3| Bug fix? | no| New feature? | yes| Deprecations? | no| Tickets | None| License | MIT| Doc PR | Still TODOHi!This is built on top of#50264. I CAN separate them if needed - sorry for the noise.tl;dr When using asset mapper, to load the page, we need to build the importmap & resolve a few paths, like `{{ asset('styles/app.css') }}`. Because asset mapper loads the contents and performs some regex on CSS and JS files, this can slow down the page in dev (in prod, `asset-map:compile` removes all overhead).This PR fixes that (I can see a big improvement in my test app). We "cache" the `MappedAsset` objects via the config cache system so that if an underlying file changes (e.g. `assets/styles/app.css`), we only need to rebuild that ONE `MappedAsset` when the page is loading.Cheers!Commits-------ce77ed8 [AssetMapper] Add cached asset factory
Hi!
Working hard to see where AssetMapper adjustments need to be made. 3 changes proposed here:
PublicAssetsPathResolverservice$mappedAsset->getPublicExtension()instead.Why these changes?
The new
PublicAssetsPathResolver+ the "adjustment" of import/url paths in the compilers allows the "output" directory structure to be decoupled from the source structure. Currently the output structure matches your "source" structure, so you get things likepublic/assets/styles/app.cssorpublic/assets/bundles/easyadmin/foo.css. We could add an option in the future (or the user could decoratePublicAssetsPathResolverimmediately) to "flatten" everything into justpublic/assets/..scssor.jsxThese changes allow users to create... more controversial functionality that could build certain files automatically. For example, you could have:
Locally, I have a custom compiler that executes the
dart-sassbinary to convert this to CSS. Then, by decoratingPublicAssetsPathResolver, I'm changing the public path forstyles/app.scssso that it ends with.css. This is about 50 lines of code that results in the sass-compiled CSS file being properly rendered onto the page.I have a similar compiler + path decorator locally that compiles
.jsx=>.jsusing the babel binary. Usage:I realize usage like this is more controversial... however it's also super pragmatic if you DO use Sass or have some React components. The alternative would be to run the
sassbinary manually, import the built.cssfile and probably ignore that file fromgit.Thanks for your consideration :).
Cheers!