purgecss removes CSS classes filter-layer1 which is needed in filter-text.component.html dynamic angular expression and other CSS classes unexpectedly

[jstein213]

Build Intershop PWA production config webpack plugin purgecss-webpack-plugin removes CSS classes filter-layer1 originating with filter-panel.scss from output CSS unexpectedly. At PWA runtime, filter navigation sidebar menu identation is wrong and menu malfunctions.

filter-text.component.html

<li class="filter-item filter-layer{{ facet.level }}" [ngClass]="{ 'filter-selected': facet.selected }">

Actual Behavior

purgecss removes CSS classes filter-layer1 which is needed in filter-text.component.html dynamic angular expression and other CSS classes unexpectedly

filter-text.component.html

<li class="filter-item filter-layer{{ facet.level }}" [ngClass]="{ 'filter-selected': facet.selected }">

Expected Behavior

purgecss does not removes CSS classes filter-layer1 and all to pattern filter-layer where is a number in range 1 to 9 .

Steps to Reproduce the Bug

Steps to reproduce the behavior:

1. Build Intershop PWA production config

Environment Details

• Project Code Version: git branch develop as of 2022-07-07

AB#78046

[jstein213]

applied solution from a PWA project based on intershop-pwa : Comment out CSS classes in filter-panel.scss with the block comment pattern start and end comment block following https://github.com/FullHuman/purgecss-docs/blob/master/whitelisting.md#in-the-css-directly for excluding CSS classes from CSS purge/minify to solution hint following model bugfix "missing styles for main navigation hover menu - removed by PurgeCSS (#901) (0205842)" from Quadient PWA 1.3.0 (2021-10-29) for a different CSS file for a different CSS file:

diff --git a/src/styles/pages/category/filter-panel.scss b/src/styles/pages/category/filter-panel.scss
index be8d52d74..11be32db8 100644
--- a/src/styles/pages/category/filter-panel.scss
+++ b/src/styles/pages/category/filter-panel.scss
@@ -45,6 +45,7 @@
   }
 }
 
+/* purgecss start ignore */
 .filter-group {
   position: relative;
   padding-bottom: $space-default;
@@ -252,6 +253,8 @@
   }
 }
 
+/* purgecss end ignore */
+
 .non-parametric-panel {
   .filter-group {
     padding-bottom: 0;