-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
[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 our terms of service and privacy 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
Conversation
src/Symfony/Component/AssetMapper/AssetMapperDevServerSubscriber.php
Outdated
Show resolved
Hide resolved
src/Symfony/Component/AssetMapper/AssetMapperDevServerSubscriber.php
Outdated
Show resolved
Hide resolved
src/Symfony/Component/AssetMapper/Compiler/AssetCompilerPathResolverTrait.php
Outdated
Show resolved
Hide resolved
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
to
5c9fb34
Compare
Thank you @weaverryan. |
58830ca
to
53e297d
Compare
This 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 TODO Hi! 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:
PublicAssetsPathResolver
service$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.css
orpublic/assets/bundles/easyadmin/foo.css
. We could add an option in the future (or the user could decoratePublicAssetsPathResolver
immediately) to "flatten" everything into justpublic/assets/
..scss
or.jsx
These 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-sass
binary to convert this to CSS. Then, by decoratingPublicAssetsPathResolver
, I'm changing the public path forstyles/app.scss
so 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
=>.js
using 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
sass
binary manually, import the built.css
file and probably ignore that file fromgit
.Thanks for your consideration :).
Cheers!