5564: Use assets mapper for CSS

Author: turegjorup

.env

@@ -1,6 +1,5 @@
 COMPOSE_PROJECT_NAME=itksites
-#COMPOSE_DOMAIN=itksites.local.itkdev.dk
-COMPOSE_DOMAIN=sites.itkdev.dk
+COMPOSE_DOMAIN=itksites.local.itkdev.dk
 
 ITKDEV_TEMPLATE=symfony-6
 

.gitignore

@@ -34,3 +34,8 @@ phpstan.neon
 ###> vincentlanglet/twig-cs-fixer ###
 /.twig-cs-fixer.cache
 ###< vincentlanglet/twig-cs-fixer ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###

assets/app.js

@@ -0,0 +1,9 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * This file will be included onto the page via the importmap() Twig function,
+ * which should already be in your base.html.twig.
+ */
+import './styles/app.css';
+
+console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

public/css/admin.css assets/styles/app.csspublic/css/admin.css renamed to assets/styles/app.css

@@ -21,7 +21,8 @@
         "phpdocumentor/reflection-docblock": "^5.6.3",
         "phpstan/phpdoc-parser": "^2.3",
         "symfony/amqp-messenger": "^7.3.2",
-        "symfony/asset": "^7.3",
+        "symfony/asset": "7.3.*",
+        "symfony/asset-mapper": "7.3.*",
         "symfony/browser-kit": "^7.3.2",
         "symfony/console": "^7.3.4",
         "symfony/doctrine-messenger": "^7.3.4",
@@ -41,7 +42,9 @@
         "symfony/uid": "^7.3.1",
         "symfony/validator": "^7.3.4",
         "symfony/webpack-encore-bundle": "^2.3",
-        "symfony/yaml": "^7.3.3"
+        "symfony/yaml": "^7.3.3",
+        "twig/extra-bundle": "^2.12|^3.0",
+        "twig/twig": "^2.12|^3.0"
     },
     "require-dev": {
         "ergebnis/composer-normalize": "^2.48.2",
@@ -112,7 +115,8 @@
         ],
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
+            "assets:install %PUBLIC_DIR%": "symfony-cmd",
+            "importmap:install": "symfony-cmd"
         },
         "coding-standards-apply": [
             "PHP_CS_FIXER_IGNORE_ENV=1 vendor/bin/php-cs-fixer fix"

composer.json

@@ -0,0 +1,11 @@
+framework:
+    asset_mapper:
+        # The paths to make available to the asset mapper.
+        paths:
+            - assets/
+        missing_import_mode: strict
+
+when@prod:
+    framework:
+        asset_mapper:
+            missing_import_mode: warn

composer.lock

@@ -0,0 +1,19 @@
+<?php
+
+/**
+ * Returns the importmap for this application.
+ *
+ * - "path" is a path inside the asset mapper system. Use the
+ *     "debug:asset-map" command to see the full list of paths.
+ *
+ * - "entrypoint" (JavaScript only) set to true for any module that will
+ *     be used as an "entrypoint" (and passed to the importmap() Twig function).
+ *
+ * The "importmap:require" command can be used to add new entries to this file.
+ */
+return [
+    'app' => [
+        'path' => './assets/app.js',
+        'entrypoint' => true,
+    ],
+];

config/packages/asset_mapper.yaml

@@ -52,7 +52,7 @@ public function index(): Response
     public function configureDashboard(): Dashboard
     {
         return Dashboard::new()
-            ->setTitle('<img src="/img/itk-sites-logo.png" width="170px" alt="ITK sites">')
+            ->setTitle('<img src="/img/itk-sites-logo.png" width="170px" alt="ITK sites logo">')
             ->setFaviconPath('img/favicon.ico')
             ->renderContentMaximized();
     }
@@ -95,6 +95,6 @@ public function configureCrud(): Crud
     #[\Override]
     public function configureAssets(): Assets
     {
-        return Assets::new()->addCssFile('css/admin.css');
+        return parent::configureAssets()->addAssetMapperEntry('app');
     }
 }

importmap.php

@@ -316,6 +316,21 @@
     "symfony/asset": {
         "version": "v6.0.3"
     },
+    "symfony/asset-mapper": {
+        "version": "7.3",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "6.4",
+            "ref": "5ad1308aa756d58f999ffbe1540d1189f5d7d14a"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/styles/app.css",
+            "config/packages/asset_mapper.yaml",
+            "importmap.php"
+        ]
+    },
     "symfony/browser-kit": {
         "version": "v6.0.3"
     },