Skip to content

Commit b0c6921

Browse files
javiereguiluzjaviereguiluz
committed
feature #1449 [WIP] Upgrading to AssetMapper 6.4 (weaverryan)
This PR was squashed before being merged into the main branch. Discussion ---------- [WIP] Upgrading to AssetMapper 6.4 Hi! This converts from Encore to AssetMapper 6.4 (and also upgrading to Symfony 6.4 in general). This was the final product of a live stream walking through this process - https://www.youtube.com/watch?v=pyj1hvhcxGc There are still some TODOs to finish. The biggest is the first, as Sass is quite embedded in there. - [X] ~~A) convert Sass->CSS (not a requirement for AssetMapper, but Javier & I talked about this). Then remove SassBundle & bootstrap in `composer.json`. Probably many Sass variables should be converted to CSS variables. See #1450 and #1452~~. Much of this was done, Sass kept just for Bootstrap. - [X] ~~B) In `assets/app.js`, I should just be able to import from the individual `bootstrap` package instead of requiring each part~~ It's fine how it is. When we upgrade, perhaps we could look at it then. - [X] C) commit `public/assets/` or `assets/vendor/` so the code works after clone with ZERO other commands. Else, the user will need to run `importmap:install`. - [x] D) update `devcontainer.json` - [x] E) fix the `admin` entrypoint & layout It's a busy month! If anyone is interested in trying to fix any of the above points, just let me know here or on Slack. I'd be more than happy to coach someone through them. Cheers! Commits ------- 634f238 [WIP] Upgrading to AssetMapper 6.4
2 parents 38c9708 + 634f238 commit b0c6921

File tree

68 files changed

+814
-19189
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+814
-19189
lines changed

‎.devcontainer/devcontainer.json

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,13 @@
55
"ghcr.io/shyim/devcontainers-features/php:0": {
66
"version": "8.1"
77
},
8-
"ghcr.io/devcontainers/features/node:1": {
9-
"version": "lts"
10-
}
118
},
129
"updateContentCommand": {
1310
"composer install": ["composer", "install"],
14-
"yarn": ["yarn"]
11+
"importmap:install": ["symfony", "console", "importmap:install"]
1512
},
1613
"postAttachCommand": {
1714
"server": "symfony server:start",
18-
"yarn": ["yarn", "watch"]
15+
"sass build": ["symfony", "console", "sass:build", "-w"]
1916
}
2017
}

‎.github/workflows/tests.yaml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ jobs:
6161
- name: "Install dependencies"
6262
run: composer install --ansi --no-interaction --no-progress
6363

64+
- name: "Build Sass"
65+
run: php bin/console sass:build
66+
6467
- name: "Install PHPUnit"
6568
run: vendor/bin/simple-phpunit install
6669

‎.gitignore

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
.phpunit.result.cache
1818
/phpunit.xml
1919
###< symfony/phpunit-bridge ###
20-
###> symfony/webpack-encore-bundle ###
21-
/node_modules/
22-
npm-debug.log
23-
yarn-error.log
24-
###< symfony/webpack-encore-bundle ###
20+
21+
###> symfony/asset-mapper ###
22+
/public/assets/
23+
/assets/vendor
24+
###< symfony/asset-mapper ###

‎.php-cs-fixer.dist.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
// exclude files generated by Symfony Flex recipes
1919
->notPath('bin/console')
2020
->notPath('public/index.php')
21+
->notPath('importmap.php')
2122
;
2223

2324
return (new PhpCsFixer\Config())

‎assets/admin.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import './styles/admin.scss';
1+
import './styles/admin.css';
22
import 'typeahead.js';
33
import Bloodhound from "bloodhound-js";
4+
import './js/jquery_global.js';
5+
import $ from 'jquery';
46
import 'bootstrap-tagsinput';
7+
import './styles/bootstrap-tagsinput.css';
58

69
$(function() {
710
// Bootstrap-tagsinput initialization

‎assets/app.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import './styles/app.scss';
2+
import '@fortawesome/fontawesome-free/css/all.css';
3+
import '@fortawesome/fontawesome-free/css/v4-shims.css';
4+
import 'highlight.js/styles/github-dark-dimmed.css';
5+
import 'lato-font/css/lato-font.css';
26

37
// loads the Bootstrap plugins
48
import 'bootstrap/js/dist/alert';
@@ -15,6 +19,6 @@ import './js/highlight.js';
1519
import './js/doclinks.js';
1620

1721
// start the Stimulus application
18-
import './bootstrap';
22+
import './bootstrap.js';
1923

20-
import './js/flatpicker';
24+
import './js/flatpicker.js';

‎assets/bootstrap.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import { startStimulusApp } from '@symfony/stimulus-bridge';
1+
import { startStimulusApp } from '@symfony/stimulus-bundle';
22

3-
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
4-
export const app = startStimulusApp(require.context(
5-
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
6-
true,
7-
/\.[jt]sx?$/
8-
));
3+
const app = startStimulusApp();
94

105
// register any custom, 3rd party controllers here
116
// app.register('some_controller_name', SomeImportedController);

‎assets/js/flatpicker.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'flatpickr';
2-
import 'flatpickr/dist/flatpickr.css';
2+
import 'flatpickr/dist/flatpickr.min.css';
33
import l10n from "flatpickr/dist/l10n";
44

55
flatpickr.defaultConfig.animate = window.navigator.userAgent.indexOf('MSIE') === -1;

‎assets/js/jquery_global.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// bootstrap-tagsinput is old and requires a global jQuery object
2+
// this is done in a separate file so it will fully run before the rest
3+
// of the code (i.e. the code that imports bootstrap-tagsinput)
4+
import $ from 'jquery';
5+
window.jQuery = $;

‎assets/styles/_variables.scss

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
// see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
44
$web-font-path: 'data:text/css;base64,';
55

6-
// Make sure the bootstrap-sass and lato fonts are resolved correctly
7-
//$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
8-
$lato-font-path: '~lato-font/fonts';
9-
106
$font-default: 19px;
117

128
$font-heading: 2.5rem;
@@ -27,4 +23,4 @@ $btn-padding-x: 10px;
2723
$btn-padding-y-sm: 9px;
2824
$btn-padding-x-sm: 6px;
2925

30-
@import "~bootswatch/dist/flatly/variables";
26+
@import "./bootswatch/variables";

‎assets/styles/admin.scss renamed to ‎assets/styles/admin.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
@import "variables";
2-
// @import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
3-
@import "bootstrap-tagsinput.scss";
4-
51
:root {
62
--blue: #007bff;
73
}

‎assets/styles/app.scss

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
11
@import "variables";
22

3-
@import "~bootstrap/scss/bootstrap.scss";
4-
@import "~bootswatch/dist/flatly/bootswatch";
5-
@import "~@fortawesome/fontawesome-free/css/all.css";
6-
@import "~@fortawesome/fontawesome-free/css/v4-shims.css";
7-
@import "~highlight.js/styles/github-dark-dimmed.css";
8-
9-
// pick the Lato fonts individually to avoid importing the entire font family
10-
@import '~lato-font/scss/public-api';
11-
12-
@include lato-include-font('normal');
13-
@include lato-include-font('bold');
3+
@import "../../vendor/twbs/bootstrap/scss/bootstrap.scss";
4+
@import "./bootswatch/bootswatch";
145

156
:root {
167
--font-heading: 2.5rem;

‎assets/styles/bootstrap-tagsinput.scss renamed to ‎assets/styles/bootstrap-tagsinput.css

File renamed without changes.

‎assets/styles/bootswatch/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Bootswatch Flatly
2+
3+
This directory holds a copy of the Bootswatch Flatly source code. We can't use
4+
the CSS directly, as it *always* loads a Google font. So, we embed the sass and
5+
override the font import with Sass variables.

‎assets/styles/bootswatch/_bootswatch.scss

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Flatly 5.3.2
2+
// Bootswatch
3+
4+
5+
// Variables
6+
7+
$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
8+
@if $web-font-path {
9+
@import url($web-font-path);
10+
}
11+
12+
// Navs
13+
14+
.pagination {
15+
a:hover {
16+
text-decoration: none;
17+
}
18+
}
19+
20+
// Indicators
21+
22+
.badge {
23+
&.bg-light {
24+
color: $dark;
25+
}
26+
}
27+
28+
.alert {
29+
color: $white;
30+
border: none;
31+
32+
a,
33+
.alert-link {
34+
color: $white;
35+
text-decoration: underline;
36+
}
37+
38+
@each $color, $value in $theme-colors {
39+
&-#{$color} {
40+
@if $enable-gradients {
41+
background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
42+
} @else {
43+
background-color: $value;
44+
}
45+
}
46+
}
47+
48+
&-light {
49+
&,
50+
a,
51+
.alert-link {
52+
color: $body-color;
53+
}
54+
}
55+
}
56+
57+
// Containers
58+
59+
.modal,
60+
.toast,
61+
.offcanvas {
62+
.btn-close {
63+
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>"));
64+
}
65+
}

‎assets/styles/bootswatch/_variables.scss

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
// Flatly 5.3.2
2+
// Bootswatch
3+
4+
$theme: "flatly" !default;
5+
6+
//
7+
// Color system
8+
//
9+
10+
$white: #fff !default;
11+
$gray-100: #f8f9fa !default;
12+
$gray-200: #ecf0f1 !default;
13+
$gray-300: #dee2e6 !default;
14+
$gray-400: #ced4da !default;
15+
$gray-500: #b4bcc2 !default;
16+
$gray-600: #95a5a6 !default;
17+
$gray-700: #7b8a8b !default;
18+
$gray-800: #343a40 !default;
19+
$gray-900: #212529 !default;
20+
$black: #000 !default;
21+
22+
$blue: #2c3e50 !default;
23+
$indigo: #6610f2 !default;
24+
$purple: #6f42c1 !default;
25+
$pink: #e83e8c !default;
26+
$red: #e74c3c !default;
27+
$orange: #fd7e14 !default;
28+
$yellow: #f39c12 !default;
29+
$green: #18bc9c !default;
30+
$teal: #20c997 !default;
31+
$cyan: #3498db !default;
32+
33+
$primary: $blue !default;
34+
$secondary: $gray-600 !default;
35+
$success: $green !default;
36+
$info: $cyan !default;
37+
$warning: $yellow !default;
38+
$danger: $red !default;
39+
$light: $gray-200 !default;
40+
$dark: $gray-700 !default;
41+
42+
$min-contrast-ratio: 2.05 !default;
43+
44+
// Links
45+
46+
$link-color: $success !default;
47+
48+
// Fonts
49+
50+
// stylelint-disable-next-line value-keyword-case
51+
$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;
52+
$h1-font-size: 3rem !default;
53+
$h2-font-size: 2.5rem !default;
54+
$h3-font-size: 2rem !default;
55+
56+
// Tables
57+
58+
$table-bg-scale: 0% !default;
59+
60+
// Dropdowns
61+
62+
$dropdown-border-color: $gray-400 !default;
63+
$dropdown-link-color: $gray-700 !default;
64+
$dropdown-link-hover-color: $white !default;
65+
$dropdown-link-hover-bg: $primary !default;
66+
67+
// Navs
68+
69+
$nav-link-padding-y: .5rem !default;
70+
$nav-link-padding-x: 2rem !default;
71+
$nav-link-disabled-color: $gray-600 !default;
72+
73+
$nav-tabs-border-color: $dropdown-border-color !default;
74+
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
75+
$nav-tabs-link-active-color: $success !default;
76+
$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
77+
78+
79+
// Navbar
80+
81+
$navbar-padding-y: 1rem !default;
82+
$navbar-dark-color: $white !default;
83+
$navbar-dark-hover-color: $success !default;
84+
$navbar-dark-active-color: $success !default;
85+
86+
$navbar-dark-brand-color: $white !default;
87+
$navbar-dark-brand-hover-color: $navbar-dark-hover-color !default;
88+
89+
// Pagination
90+
91+
$pagination-color: $white !default;
92+
$pagination-bg: $success !default;
93+
$pagination-border-width: 0 !default;
94+
$pagination-border-color: transparent !default;
95+
$pagination-hover-color: $white !default;
96+
$pagination-hover-bg: darken($success, 15%) !default;
97+
$pagination-hover-border-color: transparent !default;
98+
$pagination-active-bg: $pagination-hover-bg !default;
99+
$pagination-active-border-color: transparent !default;
100+
$pagination-disabled-color: $gray-200 !default;
101+
$pagination-disabled-bg: lighten($success, 15%) !default;
102+
$pagination-disabled-border-color: transparent !default;
103+
104+
// List group
105+
106+
$list-group-hover-bg: $gray-200 !default;
107+
$list-group-disabled-bg: $gray-200 !default;
108+
109+
// Breadcrumbs
110+
111+
$breadcrumb-padding-y: .375rem !default;
112+
$breadcrumb-padding-x: .75rem !default;
113+
$breadcrumb-border-radius: .25rem !default;
114+
115+
// Close
116+
117+
$btn-close-color: $white !default;
118+
$btn-close-opacity: .4 !default;
119+
$btn-close-hover-opacity: 1 !default;

‎composer.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"license": "MIT",
44
"type": "project",
55
"description": "Symfony Demo Application",
6-
"minimum-stability": "stable",
6+
"minimum-stability": "dev",
77
"prefer-stable": true,
88
"replace": {
99
"symfony/polyfill-php72": "*",
@@ -22,6 +22,7 @@
2222
"league/commonmark": "^2.1",
2323
"symfony/apache-pack": "^1.0",
2424
"symfony/asset": "6.4.*",
25+
"symfony/asset-mapper": "6.4.*",
2526
"symfony/console": "6.4.*",
2627
"symfony/dotenv": "6.4.*",
2728
"symfony/expression-language": "6.4.*",
@@ -42,8 +43,8 @@
4243
"symfony/twig-bundle": "6.4.*",
4344
"symfony/ux-live-component": "^2.6",
4445
"symfony/validator": "6.4.*",
45-
"symfony/webpack-encore-bundle": "^2.1",
4646
"symfony/yaml": "6.4.*",
47+
"symfonycasts/sass-bundle": "^0.2.3",
4748
"twig/extra-bundle": "^3.3",
4849
"twig/intl-extra": "^3.3",
4950
"twig/markdown-extra": "^3.3"
@@ -61,7 +62,8 @@
6162
"symfony/maker-bundle": "^1.36",
6263
"symfony/phpunit-bridge": "6.4.*",
6364
"symfony/stopwatch": "6.4.*",
64-
"symfony/web-profiler-bundle": "6.4.*"
65+
"symfony/web-profiler-bundle": "6.4.*",
66+
"twbs/bootstrap": "^4.5.3"
6567
},
6668
"config": {
6769
"allow-plugins": {
@@ -90,7 +92,8 @@
9092
"scripts": {
9193
"auto-scripts": {
9294
"cache:clear": "symfony-cmd",
93-
"assets:install %PUBLIC_DIR%": "symfony-cmd"
95+
"assets:install %PUBLIC_DIR%": "symfony-cmd",
96+
"importmap:install": "symfony-cmd"
9497
},
9598
"post-install-cmd": [
9699
"@auto-scripts"

0 commit comments

Comments
 (0)