Migrate to webpack encore for JS and CSS build

.gitignore

@@ -43,3 +43,10 @@ node_modules
 
 # System files
 .DS_Store
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

.postcssrc.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+    plugins: {
+        'autoprefixer': {},
+    },
+};

assets/website/.stylelintrc → .stylelintrc

@@ -8,7 +8,6 @@
     "selector-class-pattern": "^[a-z-_0-9]*$",
     "scss/dollar-variable-pattern": "^[a-z-0-9]*$",
     "value-keyword-case": null,
-    "selector-combinator-blacklist": [" "],
     "order/order": [
       "custom-properties",
       "declarations"

assets/website/css/components/_article-list.scss

@@ -1,6 +1,5 @@
 .article-list__item {
     display: flex;
-    flex-direction: row;
     flex-wrap: nowrap;
 
     &:first-child ~ .article-list__item {

assets/website/css/components/_demobar.scss

@@ -2,7 +2,6 @@
     align-items: center;
     background: $grey;
     display: flex;
-    flex-direction: row;
     flex-wrap: nowrap;
     height: 50px;
     left: 0;

assets/website/css/components/_image-map.scss

@@ -15,12 +15,12 @@
 }
 
 .imagemap__hotspot--rectangle {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb(0 0 0 / 50%);
     border: 2px solid white;
 }
 
 .imagemap__hotspot--circle {
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgb(0 0 0 / 30%);
     border: 2px solid white;
     border-radius: 100%;
     transform: translate(-50%, -50%);

assets/website/css/components/_navbar.scss

@@ -1,7 +1,6 @@
 .navbar {
     align-items: center;
     display: flex;
-    flex-direction: row;
     flex-wrap: nowrap;
     height: 50px;
     justify-content: space-between;

assets/website/css/generics/_font-settings.scss

@@ -4,14 +4,13 @@ body {
     -webkit-font-smoothing: antialiased;
 
     /* Font varient */
-    -webkit-font-variant-ligatures: none;
     font-variant-ligatures: none;
 
     /* Smoothing */
     text-rendering: optimizeLegibility;
 
     // Font Rendering
-    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 
     @include mediaEachMax((
         font-size: $font-sizes,

assets/website/css/generics/_font.scss

@@ -1,7 +1,7 @@
 /* karla-200 - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: normal;
     font-weight: 200;
     // src: url('/website/fonts/karla/karla-v21-latin-200.eot'); /* IE9 Compat Modes */
@@ -17,7 +17,7 @@
 /* karla-300 - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: normal;
     font-weight: 300;
     // src: url('/website/fonts/karla/karla-v21-latin-300.eot'); /* IE9 Compat Modes */
@@ -33,7 +33,7 @@
 /* karla-regular - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: normal;
     font-weight: 400;
     // src: url('/website/fonts/karla/karla-v21-latin-regular.eot'); /* IE9 Compat Modes */
@@ -49,7 +49,7 @@
 /* karla-500 - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: normal;
     font-weight: 500;
     // src: url('/website/fonts/karla/karla-v21-latin-500.eot'); /* IE9 Compat Modes */
@@ -65,7 +65,7 @@
 /* karla-600 - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: normal;
     font-weight: 600;
     // src: url('/website/fonts/karla/karla-v21-latin-600.eot'); /* IE9 Compat Modes */
@@ -81,7 +81,7 @@
 /* karla-700 - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: normal;
     font-weight: 700;
     // src: url('/website/fonts/karla/karla-v21-latin-700.eot'); /* IE9 Compat Modes */
@@ -97,7 +97,7 @@
 /* karla-800 - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: normal;
     font-weight: 800;
     // src: url('/website/fonts/karla/karla-v21-latin-800.eot'); /* IE9 Compat Modes */
@@ -113,7 +113,7 @@
 /* karla-200italic - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: italic;
     font-weight: 200;
     // src: url('/website/fonts/karla/karla-v21-latin-200italic.eot'); /* IE9 Compat Modes */
@@ -129,7 +129,7 @@
 /* karla-300italic - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: italic;
     font-weight: 300;
     // src: url('/website/fonts/karla/karla-v21-latin-300italic.eot'); /* IE9 Compat Modes */
@@ -145,7 +145,7 @@
 /* karla-italic - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: italic;
     font-weight: 400;
     // src: url('/website/fonts/karla/karla-v21-latin-italic.eot'); /* IE9 Compat Modes */
@@ -161,7 +161,7 @@
 /* karla-500italic - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: italic;
     font-weight: 500;
     // src: url('/website/fonts/karla/karla-v21-latin-500italic.eot'); /* IE9 Compat Modes */
@@ -177,7 +177,7 @@
 /* karla-600italic - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: italic;
     font-weight: 600;
     // src: url('/website/fonts/karla/karla-v21-latin-600italic.eot'); /* IE9 Compat Modes */
@@ -193,7 +193,7 @@
 /* karla-700italic - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: italic;
     font-weight: 700;
     // src: url('/website/fonts/karla/karla-v21-latin-700italic.eot'); /* IE9 Compat Modes */
@@ -209,7 +209,7 @@
 /* karla-800italic - latin */
 @font-face {
     font-display: swap;
-    font-family: 'Karla';
+    font-family: Karla;
     font-style: italic;
     font-weight: 800;
     // src: url('/website/fonts/karla/karla-v21-latin-800italic.eot'); /* IE9 Compat Modes */

assets/website/css/main.scss

@@ -11,10 +11,10 @@
 @import '../../../public/website/fonts/icomoon/variables';
 
 // Tools:
-@import '../node_modules/@sulu/web/packages/scss/tools/media/media';
+@import '~@sulu/web/packages/scss/tools/media/media';
 
 // Generics:
-@import '../node_modules/normalize.css/normalize';
+@import '~normalize.css/normalize';
 @import 'generics/font';
 @import 'generics/box-sizing';
 @import 'generics/font-settings';
@@ -30,8 +30,8 @@
 @import 'objects/container';
 @import 'objects/grid';
 @import 'objects/width';
-@import '../node_modules/slick-carousel/slick/slick.scss';
-@import '../node_modules/slick-carousel/slick/slick-theme.scss';
+@import '~slick-carousel/slick/slick.scss';
+@import '~slick-carousel/slick/slick-theme.scss';
 
 // Components:
 @import 'components/article-list';

assets/website/css/objects/_container.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .container {
     margin: 0 auto;
     max-width: $container-width;
@@ -29,15 +31,15 @@
 }
 
 .container-left {
-    padding-right: calc(#{percentage(5 / 12)} + 10px);
+    padding-right: calc(#{percentage(math.div(5, 12))} + 10px);
 
     @include media('<tablet') {
         padding-right: 0;
     }
 }
 
 .container-right {
-    padding-left: calc(#{percentage(5 / 12)} + 10px);
+    padding-left: calc(#{percentage(math.div(5, 12))} + 10px);
 
     @include media('<tablet') {
         padding-left: 0;

assets/website/css/objects/_grid.scss

@@ -1,8 +1,10 @@
+@use 'sass:math';
+
 .grid {
     align-items: flex-start;
     display: flex;
     flex-wrap: wrap;
-    margin: $grid-gutter-width / -2;
+    margin: math.div($grid-gutter-width, -2);
 
     &--middle {
         align-items: center;
@@ -31,7 +33,7 @@
 
 .grid__item {
     flex: 1;
-    padding: $grid-gutter-width / 2;
+    padding: math.div($grid-gutter-width, 2);
     width: 100%;
 
     &--flex {

assets/website/css/objects/_width.scss

@@ -1,19 +1,21 @@
+@use 'sass:math';
+
 [class^='width-'],
 [class*=' width-'] {
     flex: 0 0 auto;
 }
 
 @for $i from 1 through $grid-columns {
     .width-#{$i} {
-        width: percentage($i / $grid-columns);
+        width: percentage(math.div($i, $grid-columns));
     }
 }
 
 @for $i from 1 through $grid-columns {
     @each $breakpoint-name, $breakpoint in $breakpoints {
         @include mediaMax($breakpoint) {
             .width-#{$breakpoint-name}-#{$i} {
-                width: percentage($i / $grid-columns);
+                width: percentage(math.div($i, $grid-columns));
             }
         }
     }

assets/website/js/components/NavigationToggler.js

@@ -1,21 +1,16 @@
-import $ from 'jquery';
-
 export default class NavigationToggler {
-    initialize($el, options) {
-        this.toggler = $el;
-        this.navigation = options.navigation;
-        this.togglerActiveIconClass = options.togglerActiveIconClass || 'icon icon--times';
-        this.togglerInactiveIconClass = options.togglerInactiveIconClass || 'icon icon--menu';
-
-        // Needed to let jquery know to set display to flex when calling fadeIn
-        $(this.navigation).css('display', 'flex').hide();
+    initialize(el, options) {
+        this.toggler = el;
+        this.navigation = document.querySelector(options.navigation);
+        this.togglerActiveIconClass = options.togglerActiveIconClass || 'icon--times';
+        this.togglerInactiveIconClass = options.togglerInactiveIconClass || 'icon--menu';
 
-        $(this.toggler).click(this.click.bind(this));
+        this.toggler.addEventListener('click', this.click.bind(this));
     }
 
     click() {
-        $(this.navigation).fadeToggle('fast');
-        $(this.toggler).toggleClass(this.togglerActiveIconClass);
-        $(this.toggler).toggleClass(this.togglerInactiveIconClass);
+        this.navigation.style.display = this.navigation.style.display === 'flex' ? 'none' : 'flex';
+        this.toggler.classList.toggle(this.togglerActiveIconClass);
+        this.toggler.classList.toggle(this.togglerInactiveIconClass);
     }
 }

assets/website/js/main.js

@@ -1,5 +1,6 @@
 import web from '@sulu/web';
 import $ from 'jquery';
+import '../css/main.scss';
 import './polyfill';
 import WindowScroll from '@sulu/web/packages/components/window-scroll/window-scroll';
 import Timeago from './components/Timeago';