style(daffio): enforce stylelint configurations (#3364)

.stylelintrc

@@ -4,7 +4,6 @@
     "@stylistic/stylelint-plugin"
   ],
   "extends": "stylelint-config-recommended-scss",
-
   "rules": {
     "color-hex-length": "long",
     "color-no-invalid-hex": true,

apps/daffio/.eslintrc.js

@@ -1,7 +1,9 @@
 module.exports = {
   extends: '../../.eslintrc.js',
   ignorePatterns: [
-    '!**/*'
+    'src/test.ts',
+    'src/polyfills.ts',
+    'node_modules/**/*'
   ],
   overrides: [
     {
@@ -11,15 +13,11 @@ module.exports = {
       parserOptions: {
         project: [
           'apps/daffio/tsconfig.app.json',
-          'apps/daffio/tsconfig.spec.json',
+          'apps/daffio/tsconfig.spec.json'
         ],
         createDefaultProgram: true
       },
       rules: {
-        // TODO: Remove once the rule is added to the global eslint config
-        '@angular-eslint/prefer-on-push-component-change-detection': [
-          'error'
-        ],
         '@angular-eslint/component-class-suffix': [
           'error',
           {
@@ -53,16 +51,6 @@ module.exports = {
         }],
       }
     },
-    {
-      files: [
-        '*.spec.ts'
-      ],
-      rules: {
-        '@angular-eslint/prefer-on-push-component-change-detection': [
-          0
-        ],
-      }
-    },
     {
       files: [
         '*.html'

apps/daffio/package.json

@@ -17,8 +17,10 @@
   "scripts": {
     "build": "ng build daffio --configuration production",
     "test": "ng test daffio --watch=false --browsers=ChromeHeadless",
-    "lint": "cd ../.. && ng lint daffio",
-    "lint:fix": "npm run lint -- --fix",
+    "lint": "ng lint daffio && npm run lint:scss",
+    "lint:scss": "stylelint '**/*.scss'",
+    "lint:fix": "ng lint daffio --fix",
+    "lint:scss:fix": "ng run lint:scss -- --fix",
     "dev:ssr": "ng run daffio:serve-ssr",
     "serve:ssr": "node ../../dist/apps/daffio/server/server.mjs"
   },

apps/daffio/src/app/app.component.ts

@@ -6,7 +6,6 @@ import {
 @Component({
   selector: 'daffio-app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 

apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.scss

@@ -1,6 +1,5 @@
 @use 'utilities' as daff;
 
-/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-home-callout-platforms {
 	&__logos {
 		display: grid;
@@ -11,8 +10,8 @@
 
 		@include daff.breakpoint(mobile) {
 			grid-template-columns: 144px 144px;
-		grid-template-areas: 'magento shopify';
-		grid-gap: 48px;
+			grid-template-areas: 'magento shopify';
+			grid-gap: 48px;
 		}
 	}
 
@@ -33,4 +32,4 @@
 			}
 		}
 	}
-}
+}

apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.component.scss

@@ -1,6 +1,5 @@
 @use 'utilities' as daff;
 
-/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-home-callout-pwa {
 	&__body {
 		display: grid;
@@ -11,7 +10,7 @@
 		grid-gap: 48px;
 	}
 
-  &__card-grid {
+	&__card-grid {
 		grid-area: card-grid;
 		display: grid;
 		grid-template-columns: 1fr;
@@ -21,7 +20,7 @@
 			'c'
 			'd';
 		grid-gap: 16px;
-	
+
 		@include daff.breakpoint(tablet) {
 			grid-template-columns: 1fr 1fr;
 			grid-template-areas:
@@ -34,23 +33,23 @@
 			&:first-child {
 				grid-area: a;
 			}
-	
+
 			&:nth-child(2) {
 				grid-area: b;
 			}
-	
+
 			&:nth-child(3) {
 				grid-area: c;
 			}
-	
+
 			&:last-child {
 				grid-area: d;
 			}
 		}
 	}
-	
+
 	&__button {
 		grid-area: button;
 		justify-self: center;
 	}
-}
+}

apps/daffio/src/app/content/home/components/home-hero/home-hero.component.scss

@@ -13,29 +13,28 @@
 	}
 }
 
-/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-home-hero {
 	&__grid {
-    display: grid;
-    grid-template-columns: 1fr;
+		display: grid;
+		grid-template-columns: 1fr;
 		grid-template-areas:
 			'content';
 		position: relative;
 
-    @include daff.breakpoint(big-tablet) {
-      grid-template-columns: 560px 1fr;
+		@include daff.breakpoint(big-tablet) {
+			grid-template-columns: 560px 1fr;
 			grid-template-areas:
 				'content illustration';
-    	grid-gap: 48px;
-    }
+			grid-gap: 48px;
+		}
 
-    @include daff.breakpoint(small-laptop) {
+		@include daff.breakpoint(small-laptop) {
 			grid-template-columns: 560px 1fr;
 			grid-template-areas:
 				'content illustration';
-    	grid-gap: 48px;
-    }
-  }
+			grid-gap: 48px;
+		}
+	}
 
 	&__content {
 		grid-area: content;
@@ -65,4 +64,4 @@
 		flex-wrap: wrap;
 		gap: 8px;
 	}
-}
+}

apps/daffio/src/app/content/home/view/home-view.component.scss

@@ -1,4 +1,4 @@
 :host {
 	display: block;
 	overflow: hidden;
-}
+}

apps/daffio/src/app/content/not-found/component/not-found.component.scss

@@ -1,3 +1,3 @@
 .daffio-not-found {
-  text-align: center;
-}
+	text-align: center;
+}

apps/daffio/src/app/content/support/component/support.component.scss

@@ -1,18 +1,17 @@
 @use 'utilities' as daff;
 
-/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-support {
-  &__body {
-    text-align: center;
-  }
+	&__body {
+		text-align: center;
+	}
 
-  &__actions {
-    display: inline-grid;
-    grid-template-columns: 1fr;
-    grid-gap: 16px;
+	&__actions {
+		display: inline-grid;
+		grid-template-columns: 1fr;
+		grid-gap: 16px;
 
-    @include daff.breakpoint(tablet) {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-}
+		@include daff.breakpoint(tablet) {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+}

apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss

@@ -1,20 +1,20 @@
 @use 'sass:map';
 @use 'theme' as daff-theme;
 
-@mixin daffio-feature-comparison-theme($theme){
-    $secondary: map.get($theme, secondary);
-    $base: daff-theme.daff-map-deep-get($theme, "core.base");
-    $base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast");
-    
-    .feature-comparison {
-        background: $base;
-        box-shadow: 0 0 30px 0 rgba($base-contrast, 0.05);
-        
-        > * {
-            &:nth-child(4n-2) {
-                background: daff-theme.daff-color($secondary);
-                color: daff-theme.daff-text-contrast(daff-theme.daff-color($secondary));
-            }
-        }
-    }
+@mixin daffio-feature-comparison-theme($theme) {
+	$secondary: map.get($theme, secondary);
+	$base: daff-theme.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
+
+	.daffio-feature-comparison {
+		background: $base;
+		box-shadow: 0 0 30px 0 rgba($base-contrast, 0.05);
+
+		> * {
+			&:nth-child(4n-2) {
+				background: daff-theme.daff-color($secondary);
+				color: daff-theme.daff-text-contrast(daff-theme.daff-color($secondary));
+			}
+		}
+	}
 }

apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.html

@@ -1,36 +1,36 @@
-<div class="feature-comparison">
-  <div class="feature-comparison__header">Features</div>
-  <div class="feature-comparison__header">PWA</div>
-  <div class="feature-comparison__header">Native App</div>
-  <div class="feature-comparison__header">Website</div>
+<div class="daffio-feature-comparison">
+  <div class="daffio-feature-comparison__header">Features</div>
+  <div class="daffio-feature-comparison__header">PWA</div>
+  <div class="daffio-feature-comparison__header">Native App</div>
+  <div class="daffio-feature-comparison__header">Website</div>
 
-  <div class="feature-comparison__cell">Offline Capability</div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell">Offline Capability</div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
 
-  <div class="feature-comparison__cell">Push Notifications</div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell">Push Notifications</div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
 
-  <div class="feature-comparison__cell">Home Screen Access</div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell">Home Screen Access</div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
 
-  <div class="feature-comparison__cell">No Installation Required</div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell">No Installation Required</div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
 
-  <div class="feature-comparison__cell">No Updates Required</div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell">No Updates Required</div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
 
-  <div class="feature-comparison__cell">Searchable and Linkable</div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
-  <div class="feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell">Searchable and Linkable</div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faTimes"></fa-icon></div>
+  <div class="daffio-feature-comparison__cell"><fa-icon [icon]="faCheck"></fa-icon></div>
 </div>