fix: adapt purgecss configuration to prevent purging needed styles (#601

)

* fix: toast styling after purgecss
* fix: recaptcha badge hiding after purgecss
* fix: nav tabs styling after purgecss
Co-authored-by: Susanne Schneider <s.schneider@intershop.de>

src/styles/global/forms/forms.scss

@@ -98,6 +98,7 @@ input.form-check-input {
   }
 }
 
+/* purgecss ignore */
 .grecaptcha-badge {
   visibility: hidden;
 }

src/styles/global/global.scss

@@ -123,7 +123,6 @@ img {
 .nav-tabs {
   display: block;
   margin-bottom: $space-default;
-  overflow-x: auto;
   white-space: nowrap;
 
   .nav-item {

src/styles/global/toasts.scss

@@ -1,3 +1,4 @@
+/* purgecss start ignore */
 .toast-container {
   z-index: 1030; // appears on top of the page but below the modal windows
 
@@ -71,3 +72,5 @@
   background-color: theme-color-level('success', $alert-border-level);
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="#{$toastViewBox}" fill="#{$toast-success-color}">#{$toast-success-icon}</svg>');
 }
+
+/* purgecss end ignore */

templates/webpack/webpack.custom.ts

@@ -144,7 +144,16 @@ export default (
         paths: glob.sync('./{src,projects}/**/*', { nodir: true }),
         safelist: {
           standard: [/(p|m)(l|r|x|y|t|b)?-[0-5]/],
-          greedy: [/\bfa\b/, /\bmodal\b/, /\bswiper\b/, /\bcarousel\b/, /\bslide\b/],
+          greedy: [
+            /\bfa\b/,
+            /\bmodal\b/,
+            /\bswiper\b/,
+            /\bcarousel\b/,
+            /\bslide\b/,
+            /\btoast-close-button\b/,
+            /\bnav-tabs\b/,
+            /\bnav-link\b/,
+          ],
         },
       })
     );