Skip to content

Commit 634f238

Browse files
weaverryanjaviereguiluz
weaverryan
authored and
javiereguiluz
committed
[WIP] Upgrading to AssetMapper 6.4
1 parent 5622c89 commit 634f238

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

+2-5
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

+3
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

+5-5
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

+1
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

+4-1
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

+6-2
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

+2-7
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

+1-1
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

+5
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

+1-5
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

-4
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

+2-11
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

+5
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

+65
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

+119
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

+7-4
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)