Upgrading to use AssetMapper 6.4

.devcontainer/devcontainer.json

@@ -5,16 +5,13 @@
     "ghcr.io/shyim/devcontainers-features/php:0": {
       "version": "8.1"
     },
-    "ghcr.io/devcontainers/features/node:1": {
-      "version": "lts"
-    }
   },
   "updateContentCommand": {
     "composer install": ["composer", "install"],
-    "yarn": ["yarn"]
+    "importmap:install": ["symfony", "console", "importmap:install"]
   },
   "postAttachCommand": {
     "server": "symfony server:start",
-    "yarn": ["yarn", "watch"]
+    "sass build": ["symfony", "console", "sass:build", "-w"]
   }
 }

.github/workflows/tests.yaml

@@ -61,6 +61,9 @@ jobs:
             - name: "Install dependencies"
               run: composer install --ansi --no-interaction --no-progress
 
+            - name: "Build Sass"
+              run: php bin/console sass:build
+
             - name: "Install PHPUnit"
               run: vendor/bin/simple-phpunit install
 

.gitignore

@@ -17,8 +17,8 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
-###> symfony/webpack-encore-bundle ###
-/node_modules/
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor
+###< symfony/asset-mapper ###

.php-cs-fixer.dist.php

@@ -18,6 +18,7 @@
     // exclude files generated by Symfony Flex recipes
     ->notPath('bin/console')
     ->notPath('public/index.php')
+    ->notPath('importmap.php')
 ;
 
 return (new PhpCsFixer\Config())

assets/admin.js

@@ -1,7 +1,10 @@
-import './styles/admin.scss';
+import './styles/admin.css';
 import 'typeahead.js';
 import Bloodhound from "bloodhound-js";
+import './js/jquery_global.js';
+import $ from 'jquery';
 import 'bootstrap-tagsinput';
+import './styles/bootstrap-tagsinput.css';
 
 $(function() {
     // Bootstrap-tagsinput initialization

assets/app.js

@@ -1,4 +1,8 @@
 import './styles/app.scss';
+import '@fortawesome/fontawesome-free/css/all.css';
+import '@fortawesome/fontawesome-free/css/v4-shims.css';
+import 'highlight.js/styles/github-dark-dimmed.css';
+import 'lato-font/css/lato-font.css';
 
 // loads the Bootstrap plugins
 import 'bootstrap/js/dist/alert';
@@ -15,6 +19,6 @@ import './js/highlight.js';
 import './js/doclinks.js';
 
 // start the Stimulus application
-import './bootstrap';
+import './bootstrap.js';
 
-import './js/flatpicker';
+import './js/flatpicker.js';

assets/bootstrap.js

@@ -1,11 +1,6 @@
-import { startStimulusApp } from '@symfony/stimulus-bridge';
+import { startStimulusApp } from '@symfony/stimulus-bundle';
 
-// Registers Stimulus controllers from controllers.json and in the controllers/ directory
-export const app = startStimulusApp(require.context(
-    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
-    true,
-    /\.[jt]sx?$/
-));
+const app = startStimulusApp();
 
 // register any custom, 3rd party controllers here
 // app.register('some_controller_name', SomeImportedController);

assets/js/flatpicker.js

@@ -1,5 +1,5 @@
 import 'flatpickr';
-import 'flatpickr/dist/flatpickr.css';
+import 'flatpickr/dist/flatpickr.min.css';
 import l10n from "flatpickr/dist/l10n";
 
 flatpickr.defaultConfig.animate = window.navigator.userAgent.indexOf('MSIE') === -1;

assets/js/jquery_global.js

@@ -0,0 +1,5 @@
+// bootstrap-tagsinput is old and requires a global jQuery object
+// this is done in a separate file so it will fully run before the rest
+// of the code (i.e. the code that imports bootstrap-tagsinput)
+import $ from 'jquery';
+window.jQuery = $;

assets/styles/_variables.scss

@@ -3,10 +3,6 @@
 // see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
 $web-font-path: 'data:text/css;base64,';
 
-// Make sure the bootstrap-sass and lato fonts are resolved correctly
-//$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-$lato-font-path: '~lato-font/fonts';
-
 $font-default: 19px;
 
 $font-heading: 2.5rem;
@@ -27,4 +23,4 @@ $btn-padding-x: 10px;
 $btn-padding-y-sm: 9px;
 $btn-padding-x-sm: 6px;
 
-@import "~bootswatch/dist/flatly/variables";
+@import "./bootswatch/variables";

assets/styles/admin.scss → assets/styles/admin.css

@@ -1,7 +1,3 @@
-@import "variables";
-// @import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
-@import "bootstrap-tagsinput.scss";
-
 :root {
   --blue: #007bff;
 }

assets/styles/app.scss

@@ -1,16 +1,7 @@
 @import "variables";
 
-@import "~bootstrap/scss/bootstrap.scss";
-@import "~bootswatch/dist/flatly/bootswatch";
-@import "~@fortawesome/fontawesome-free/css/all.css";
-@import "~@fortawesome/fontawesome-free/css/v4-shims.css";
-@import "~highlight.js/styles/github-dark-dimmed.css";
-
-// pick the Lato fonts individually to avoid importing the entire font family
-@import '~lato-font/scss/public-api';
-
-@include lato-include-font('normal');
-@include lato-include-font('bold');
+@import "../../vendor/twbs/bootstrap/scss/bootstrap.scss";
+@import "./bootswatch/bootswatch";
 
 :root {
   --font-heading: 2.5rem;

assets/styles/bootswatch/README.md

@@ -0,0 +1,5 @@
+# Bootswatch Flatly
+
+This directory holds a copy of the Bootswatch Flatly source code. We can't use
+the CSS directly, as it *always* loads a Google font. So, we embed the sass and
+override the font import with Sass variables.

assets/styles/bootswatch/_bootswatch.scss

@@ -0,0 +1,65 @@
+// Flatly 5.3.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+// Navs
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+.alert {
+  color: $white;
+  border: none;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    a,
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+// Containers
+
+.modal,
+.toast,
+.offcanvas {
+  .btn-close {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+  }
+}

assets/styles/bootswatch/_variables.scss

@@ -0,0 +1,119 @@
+// Flatly 5.3.2
+// Bootswatch
+
+$theme: "flatly" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ecf0f1 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #b4bcc2 !default;
+$gray-600: #95a5a6 !default;
+$gray-700: #7b8a8b !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #2c3e50 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e74c3c !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f39c12 !default;
+$green:   #18bc9c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498db !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-700 !default;
+
+$min-contrast-ratio:   2.05 !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                2rem !default;
+
+// Tables
+
+$table-bg-scale:              0% !default;
+
+// Dropdowns
+
+$dropdown-border-color:             $gray-400 !default;
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default;
+$nav-link-padding-x:                2rem !default;
+$nav-link-disabled-color:           $gray-600 !default;
+
+$nav-tabs-border-color:             $dropdown-border-color !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+$nav-tabs-link-active-color:        $success !default;
+$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
+
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $success !default;
+$navbar-dark-active-color:          $success !default;
+
+$navbar-dark-brand-color:                 $white !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-hover-color !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               darken($success, 15%) !default;
+$pagination-hover-border-color:     transparent !default;
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+$pagination-disabled-color:         $gray-200 !default;
+$pagination-disabled-bg:            lighten($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// List group
+
+$list-group-hover-bg:               $gray-200 !default;
+$list-group-disabled-bg:            $gray-200 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .4 !default;
+$btn-close-hover-opacity:    1 !default;

composer.json

@@ -3,7 +3,7 @@
     "license": "MIT",
     "type": "project",
     "description": "Symfony Demo Application",
-    "minimum-stability": "stable",
+    "minimum-stability": "dev",
     "prefer-stable": true,
     "replace": {
         "symfony/polyfill-php72": "*",
@@ -22,6 +22,7 @@
         "league/commonmark": "^2.1",
         "symfony/apache-pack": "^1.0",
         "symfony/asset": "6.4.*",
+        "symfony/asset-mapper": "6.4.*",
         "symfony/console": "6.4.*",
         "symfony/dotenv": "6.4.*",
         "symfony/expression-language": "6.4.*",
@@ -42,8 +43,8 @@
         "symfony/twig-bundle": "6.4.*",
         "symfony/ux-live-component": "^2.6",
         "symfony/validator": "6.4.*",
-        "symfony/webpack-encore-bundle": "^2.1",
         "symfony/yaml": "6.4.*",
+        "symfonycasts/sass-bundle": "^0.2.3",
         "twig/extra-bundle": "^3.3",
         "twig/intl-extra": "^3.3",
         "twig/markdown-extra": "^3.3"
@@ -61,7 +62,8 @@
         "symfony/maker-bundle": "^1.36",
         "symfony/phpunit-bridge": "6.4.*",
         "symfony/stopwatch": "6.4.*",
-        "symfony/web-profiler-bundle": "6.4.*"
+        "symfony/web-profiler-bundle": "6.4.*",
+        "twbs/bootstrap": "^4.5.3"
     },
     "config": {
         "allow-plugins": {
@@ -90,7 +92,8 @@
     "scripts": {
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
+            "assets:install %PUBLIC_DIR%": "symfony-cmd",
+            "importmap:install": "symfony-cmd"
         },
         "post-install-cmd": [
             "@auto-scripts"