tweaks after proofread

Author: weaverryan

frontend/asset_mapper.rst

@@ -262,33 +262,32 @@ outputs an `importmap`_:
         }
     }</script>
 
-Import maps are a native browser feature. They work in all browsers thanks to
-a "shim" file that's included automatically by the AssetMapper component
-(all *modern* browsers `support them natively <https://caniuse.com/import-maps>`_).
-
-When you import ``bootstrap`` from your JavaScript, the browser will look at
-the ``importmap`` and see that it should fetch the package from the URL.
+Import maps are a native browser feature. When you import ``bootstrap`` from
+JavaScript, the browser will look at the ``importmap`` and see that it should
+fetch the package from the associated path.
 
 .. _automatic-import-mapping:
 
-But where did the ``/assets/duck.js`` import entry come from? Great question!
+But where did the ``/assets/duck.js`` import entry come from? That doesn't live
+in ``importmap.php``. Great question!
 
 The ``assets/app.js`` file above imports ``./duck.js``. When you import a file using a
 relative path, your browser looks for that file relative to the one importing
 it. So, it would look for ``/assets/duck.js``. That URL *would* be correct,
 except that the ``duck.js`` file is versioned. Fortunately, the AssetMapper component
-sees that import and adds a mapping from ``/assets/duck.js`` to the correct, versioned
+sees the import and adds a mapping from ``/assets/duck.js`` to the correct, versioned
 filename. The result: importing ``./duck.js`` just works!
 
-The ``importmap()`` function also outputs an `ES module shim`_ so that older browsers
-understand impotmaps (see the :ref:`polyfill config <config-importmap-polyfill>`).
+The ``importmap()`` function also outputs an `ES module shim`_ so that
+`older browsers <https://caniuse.com/import-maps>`_ understand importmaps
+(see the :ref:`polyfill config <config-importmap-polyfill>`).
 
 .. _app-entrypoint:
 
-The "app" Entrypoint Preloading
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+The "app" Entrypoint & Preloading
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-An "entrypoint" is the main JavaScript file that the browser will load,
+An "entrypoint" is the main JavaScript file that the browser loads,
 and your app starts with one by default::
 
     // importmap.php
@@ -302,7 +301,7 @@ and your app starts with one by default::
 
 .. _importmap-app-entry:
 
-In addition to the importmap, the ``{{ importmap('app') }}`` function call in
+In addition to the importmap, the ``{{ importmap('app') }}`` in
 ``base.html.twig`` outputs a few other things, including:
 
 .. code-block:: html
@@ -338,7 +337,7 @@ and a specific language:
     hljs.highlightAll();
 
 In this case, adding the ``highlight.js`` package to your ``importmap.php`` file
-won't work: whatever your importing - e.g. ``highlight.js/lib/core`` - needs to
+won't work: whatever you import - e.g. ``highlight.js/lib/core`` - needs to
 *exactly* match an entry in the ``importmap.php`` file.
 
 Instead, use ``importmap:require`` and pass it the exact paths you need. This
@@ -397,7 +396,7 @@ Handling CSS
     The ability to import CSS files was introduced in Symfony 6.4.
 
 CSS can be added to your page by importing it from a JavaScript file. The default
-``assets/app.js`` already imports the ``assets/styles/app.css`` file:
+``assets/app.js`` already imports ``assets/styles/app.css``:
 
 .. code-block:: javascript
 
@@ -416,7 +415,8 @@ the page as ``link`` tags in the order they were imported.
     Importing a CSS file is *not* something that is natively supported by
     JavaScript modules and normally causes an error. AssetMapper makes this
     work by adding an importmap entry for each CSS file that is valid, but
-    does nothing (but the CSS file *is* included as a ``link`` tag).
+    does nothing. AssetMapper adds a ``link`` tag for each CSS file, but when
+    the JavaScript executes the ``import`` statement, nothing additional happens.
 
 .. _asset-mapper-3rd-party-css:
 
@@ -426,7 +426,7 @@ Handling 3rd-Party CSS
 Sometimes a JavaScript package will contain one or more CSS files. For example,
 the ``bootstrap`` package has a `dist/css/bootstrap.min.css file`_.
 
-Fortunately, you can require CSS files in the same way as JavaScript files:
+You can require CSS files in the same way as JavaScript files:
 
 .. code-block:: terminal
 
@@ -471,6 +471,21 @@ for ``duck.png``:
         background-image: url('../images/duck-3c16d9220694c0e56d8648f25e6035e9.png');
     }
 
+.. _asset-mapper-tailwind:
+
+Using Tailwind CSS
+~~~~~~~~~~~~~~~~~~
+
+To use the `Tailwind`_ CSS framework with the AssetMapper component, check out
+`symfonycasts/tailwind-bundle`_.
+
+.. _asset-mapper-sass:
+
+Using Sass
+~~~~~~~~~~
+
+To use Sass with AssetMapper component, check out `symfonycasts/sass-bundle`_.
+
 Lazily Importing CSS from a JavaScript File
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
@@ -485,7 +500,9 @@ the normal, "dynamic" import syntax:
     // ...
 
 In this case, ``lazy.css`` will be downloaded asynchronously and then added to
-the page.
+the page. If you use a dynamic import to lazily-load a JavaScript file and that
+file imports a CSS file (using the non-dynamic ``import`` syntax), that CSS file
+will also be downloaded asynchronously.
 
 Issues and Debugging
 --------------------
@@ -659,13 +676,13 @@ download them one-by-one as it discovers them. That would hurt performance.
 AssetMapper avoids this problem by outputting "preload" ``link`` tags.
 The logic works like this:
 
-A) When you call ``importmap('app')`` in your template, the AssetMapper component
-   looks at the ``assets/app.js`` file and finds all of the JavaScript files
-   that it imports or files that those files import, etc.
+**A) When you call ``importmap('app')`` in your template**, the AssetMapper component
+looks at the ``assets/app.js`` file and finds all of the JavaScript files
+that it imports or files that those files import, etc.
 
-B) It then outputs a ``link`` tag for each of those files with a ``rel="preload"``
-   attribute. This tells the browser to start downloading those files immediately,
-   even though it hasn't yet seen the ``import`` statement for them.
+**B) It then outputs a ``link`` tag** for each of those files with a ``rel="preload"``
+attribute. This tells the browser to start downloading those files immediately,
+even though it hasn't yet seen the ``import`` statement for them.
 
 Additionally, if the :doc:`WebLink Component </web_link>` is available in your application,
 Symfony will add a ``Link`` header in the response to preload the CSS files.
@@ -755,7 +772,7 @@ Sure! See :ref:`Using Tailwind CSS <asset-mapper-tailwind>` or :ref:`Using Sass
 Can I use with TypeScript?
 ~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Sure!See :ref:`Using TypeScript <asset-mapper-ts>`.
+Sure! See :ref:`Using TypeScript <asset-mapper-ts>`.
 
 Can I use with JSX or Vue?
 ~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -774,21 +791,6 @@ files) with component, as those must be used in a build system. See the
 `UX Vue.js Documentation`_ for more details about using with the AssetMapper
 component.
 
-.. _asset-mapper-tailwind:
-
-Using Tailwind CSS
-------------------
-
-To use the `Tailwind`_ CSS framework with the AssetMapper component, check out
-`symfonycasts/tailwind-bundle`_.
-
-.. _asset-mapper-sass:
-
-Using Sass
-----------
-
-To use Sass with AssetMapper component, check out `symfonycasts/sass-bundle`_.
-
 .. _asset-mapper-ts:
 
 Using TypeScript